Ir para conteúdo
Fórum Script Brasil
  • 0

Galeria de Fotos - Abrir pagina já com imagem carregada na div central


alemaodp

Pergunta

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>&nbsp;</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

  • 0

Vendo assim por cima, tentaria no seu lugar colocar dentro do $(document).ready a chamada da função: $.galleria.prev() no final.

Link para o comentário
Compartilhar em outros sites

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.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...