Mosaico de fotos igual ao do site Terra

[Yuka]

Olá Pessoal, blza?

Eu não sei se vocês conhecem o "mosaico" de fotos do site Terra www.terra.com.br (ali na parte de baixo à esquerda), mas eu gostaria de fazer algo parecido em meu site.

Eu sei como deixar as fotos naquela posição, pois conheço css, mas minha dúvida seria como fazer para dar aquele zoom quando passar o mouse em cima, criar aquela borda laranjinha e ainda adicionar um textinho embaixo da foto...Eu não quero ser folgada pedindo o código, gostaria apenas que vocês me encaminhassem no que devo aprender para fazer algo parecido com aquilo para colocar em meu site. ^^

Obs: eu já dei uma fuçada no codigo fonte do site e ainda não entendi a logica de como fazer isso...talvez o codigo rode no servidor ou eu que não achei! =p

Bjinhos

[*FIT*]

Movendo para Javascript.

Acredito que com jQuery você consiga fazer esse efeito http://www.google.com.br/search?hl=pt-BR&a...mp;aql=&o que=

[Yuka]

Então *FIT*, obrigada pela movida do tópico, eu não sabia que esse seria o local! =)

Mas então, acho q o q você me passou, de galerias com Jquery, não seria exatamente o que eu gostaria de fazer...Ali são realmente galerias de fotos e o que procuro fazer é apenas dar um zoom na foto ao passar ao mouse e acrescentar uma leganda e talvez uma pequena figura no box expandido, exatamente como no site do Terra! Estou procurando algo parecido na internet mas não encontro...rss...tah dificil!

[Romerito]

i aew Yuka, bom eu tenho esse plugin, que é um pouco parecido, qualquer coisa você vai adaptando:

jqTooltip.js

/**

    Project: Tooltip de imagens

    Version: 1.0.1
    Date: 12/07/2010

    Author: Rogério Avelino da Silva 

*/

jQuery.fn.extend({
    jqTooltip: function(jsonOptions){

        var defaults = {
            bordaDiv: "5px solid #000",
            espacamentoDiv: "5px",
            fundoDiv: "#fff",
            bordaImg: "1px solid #000",
            espacamentoImg: "2px",
        }

        var options = jQuery.extend(defaults, jsonOptions);

        var jsonCSS = {};

        var obj = $(this);                

        obj.find("img").each( function(){
            $(this).mouseover(
                function(e){
                    var imagem = $(this);

                    var pathImagem = imagem.attr("src");

                    var w = e.pageX - imagem.outerWidth(true);
                    var h = e.pageY - imagem.outerHeight(true);

                    jsonCSS.top = h + "px";
                    jsonCSS.left = w + "px"
                    jsonCSS.border = options.bordaDiv;
                    jsonCSS.padding = options.espacamentoDiv;
                    jsonCSS.background = options.fundoDiv;
                    jsonCSS.position = "absolute";                            

                    var link = imagem.attr("link");
                    if ( typeof link != "undefined" ){
                        jsonCSS.cursor = "pointer";
                    }

                    criaDiv(pathImagem,imagem.attr("title"),imagem.attr("alt"));
                    $("#jqTooltipDDiv")
                        .css(jsonCSS).fadeIn(1200,function(){
                            if ( typeof link != "undefined" ){
                                $("#jqTooltipDDiv").click(function(){
                                    window.open(link);
                                });
                            }
                        })
                        .mouseout(
                            function(){
                                $(this).remove();
                            }
                        );
                }
            );
        } );

        function criaDiv(pathImagem,titulo,descricao){
            var dImg = "<img style='border:" + options.bordaImg + ";margin:" + options.espacamentoDiv + "' src='" + pathImagem + "' />";
            var dDivTitulo = "<div id='jqTooltipDDivTitulo' style='font-size:12px;font-weight:bold;text-align:center;'>" + titulo + "</div>";
            var dDivSubTitulo = "<div id='jqTooltipDDivDescricao' style='font-size:12px'>" + descricao + "</div>";
            var dDiv = "<div id='jqTooltipDDiv' style='display:none;text-align:center;'>" + dImg + dDivTitulo + dDivSubTitulo + "</div>";
            $("body").append(dDiv);
        }

    }
});

lembrando que você precisa usar em conjunto com JQuery, e a pagina html fica assim:

<html>
<head>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jqTooltip.js"></script>
	<script type="text/javascript">

		$(function(){
			$("#photos").jqTooltip();			
		});


	</script>

</head>
<body>
	<div id="photos">
		<ul style="list-style-type:none">
			<li><img src="http://www.google.com.br/intl/en_com/images/srpr/logo1w.png" title="Google" alt="Site de busca Google" link="http://www.google.com.br/" height="50" width="50"/></li>
			<li><img src="http://scriptbrasil.com.br/forum/style_images/sb_images/logo4.jpg" title="ScriptBrasil Forum" alt="Forum Script Brasil" link="http://scriptbrasil.com.br/forum/index.php?" height="50" width="50"/></li>
			<li><img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" title="JQuery" alt="Site Framework JQuery" link="http://jquery.com/" height="50" width="50"/></li>
			<li><img src="http://4.bp.blogspot.com/_PvHNTzGBovY/TEN9-ue8NWI/AAAAAAAAANY/pAx0JvBVscE/s400/terra.jpg" title="Terra" alt="Portal Terra" link="http://www.terra.com.br/portal/" height="50" width="50"/></li>
			<li><img src="http://www.techpin.com/wp-content/uploads/2009/12/cool-yahoo-messenger-tools.jpg" title="YahooBR" alt="Link para Yahoo Brasil" link="http://www.yahoo.com.br" height="50" width="50"/></li>
		</ul>
	</div>
</body>
</html>

espero que ajude, qualquer dúvida posta aew que tentamos ajudar, abraço!

[Yuka]

Nossaaaa Romerito!!! Testei aqui e ficou simplesmente demais! Na minha opinião ficou até melhor do que o do Terra! =) O efeito de abertura está show também! Agora como você disse, farei algumas alterações para tentar deixar o box que se cria com o mouseover sempre em um local fixo, independente do lugar onde se coloque o mouse na figura "original" e apenas aplicar o mouseout quando o mouse sair de cima do box criado e não da imagem! Mas de qualquer forma, parabens pelo código! Muito bom msmo!