Estou precisando de uma pequena ajuda, tenho no meu site uma galeria de fotos, ou seja, eu clico na foto e ela abre numa div ao lado a mesma imagem só que em tamanho maior. Só que eu quero que quando eu entrar na pagina da galeria ela automaticamente já abra com uma imagem carregada nessa div central. Resumindo, quero abrir a pagina com um imagem já carregada nesse div.
Pergunta
alemaodp
Bom dia.
Estou precisando de uma pequena ajuda, tenho no meu site uma galeria de fotos, ou seja, eu clico na foto e ela abre numa div ao lado a mesma imagem só que em tamanho maior. Só que eu quero que quando eu entrar na pagina da galeria ela automaticamente já abra com uma imagem carregada nessa div central. Resumindo, quero abrir a pagina com um imagem já carregada nesse div.
Desde já agradeço.
Abraço...
Link da pagina: http://www.qwerty.com.br/galeria.php
Codigo HTML da pagina.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Galeria de Fotos - Qwerty Escola de Educação Profissional</title> <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK <META content="MSHTML 6.00.6000.20733" name=GENERATOR> <meta http-equiv="imagetoolbar" content="false"> <meta name="description" content=""> <meta name="keywords" content=""> <link href="imagens/galeria.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="imagens/jquery.galleria.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability $('.nav').css('display','none'); // hides the nav initially $('ul.gallery_demo').galleria({ history : false, // deactivates the history object for bookmarking, back-button etc. clickNext : false, // helper for making the image clickable. Let's not have that in this example. insert : undefined, // the containing selector for our main image. // If not found or undefined (like here), galleria will create a container // before the ul with the class .galleria_container (see CSS) onImage : function() { $('.nav').css('display','block'); } // shows the nav when the image is showing }); }); </script> <style media="screen,projection" type="text/css"> /* STYLE */ *{margin:0;padding:0} body{padding:20px;background:white;background:white;color:#555;font:80%/140% 'helvetica neue',sans-serif;width:900px;margin: 0 auto;} h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;} a{color:#348;text-decoration:none;outline:none;} a:hover{color:#67a;} .caption{color:#888;position:absolute;top:250px;left:3px;width:200px;} .demo{position:relative;margin-top:2em;} .gallery_demo{width:200px;float:left;} .gallery_demo li{width:55px;height:70px;border:3px double #eee;margin: 0 2px 2px 0;background:#eee;} .gallery_demo li.hover{border-color:#bbb;} .gallery_demo li.active{border-style:solid;border-color:#222;} .gallery_demo li div{left:240px} .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;} .galleria_container{margin:0 auto 60px auto;height:438px;width:700px;float:right;} .nav{padding-top:15px;clear:both;} .info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;} .info p{margin-top:1.6em;} .nav{position:absolute;top:410px;left:0;} </style> </head> <body> <Div> <a href="index.php"><img src="imagens/topo.JPG" width="760" height="90" border="0" alt="Qwerty Comunicações"></a></Div> <h1> Galeria de Fotos - Qwerty Escola</h1> <div class="demo"> <ul class="gallery_demo_unstyled"> <li><img src="fotos/foto1.JPG" alt="Qwerty Escola" ></li> <li><img src="fotos/foto2.JPG" alt="Qwerty Escola" ></li> <li><img src="fotos/foto3.JPG" alt="Qwerty Escola" ></li> <li><img class="noscale" src="fotos/foto4.JPG" alt="Qwerty Escola" ></li> <li><img src="fotos/foto5.JPG" alt="Qwerty Escola" ></li> <li><img src="fotos/foto6.JPG" alt="Qwerty Escola" ></li> <li><img src="fotos/foto7.JPG" alt="Qwerty Escola" ></li> <li><img src="fotos/foto8.JPG" alt="Qwerty Escola" ></li> <li><img src="fotos/foto9.JPG" alt="Qwerty Escola" ></li> <li><img src="fotos/foto10.JPG" alt="Qwerty Escola"></li> <li><img src="fotos/foto11.JPG" alt="Qwerty Escola"></li> </ul> <p class="nav"><a href="#" onClick="$.galleria.prev(); return false;">Anterior</a> | <a href="#" onClick="$.galleria.next(); return false;">Próxima</a> <br> <a href="java script:history.go(-1);">Voltar</a> </p> </div> <div class="info"> <h2> </h2> <div> <img src="imagens/rodape.JPG"> </div> </body> </html>Link para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.