1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

jQuery.popeye ajuda

Discussão em 'Web Development' iniciada por Inoculado, 11 de Dezembro de 2008. (Respostas: 3; Visualizações: 709)

  1. Inoculado

    Inoculado Power Member

    boas noites ,
    queria que me socorrem se possivel
    estou com dificuldades em implementar esta galeria jquerypopeye
    e queria que ela ficassem exactamente com o mesmo design que esta na demo ,
    mas parece me a mim que o ficheiro css n esta incluido no pacote
    tentei atraves de visualizar o codigo fonte da pagina demo e o codigo fonte gerado pela galeria na pagina demo ,e consegui ver o style da galeria,mas ainda assim desculpem me ,nao consegui implementar .parece tao simples e provavelmente é ,so que eu nao consigo la chegar .
    se alguem me pudesse dar um exemplo real do code ,para eu conseguir implementar a galeria agradecia (ja baixei tudo o que é necessario indicado na pagina inicial)

    o que eu retiro das instruçoes é simples
    e basta criar a lista de imagens assim numa pagina html
    Código:
    <div class="popeye">
    <ul>
    <li><a href="url_of_large_image.jpg">
                <img src="url_of_thumbnail.jpg" alt="The caption string"></a></li>
    <li><a href="url_of_large_image.jpg">
                <img src="url_of_thumbnail.jpg" alt="The caption string"></a></li>
    <li><a href="url_of_large_image.jpg">
                <img src="url_of_thumbnail.jpg" alt="The caption string"></a></li>
    <li>...</li>
    </ul>
    </div>
    depois com o plugin incluido na pagina

    $(document).ready(function () {
    $('.popeye').popeye();
    });

    eu introduzi assim antes de fechar o body tag

    Código:
    <script type="text/javascript">
        <!--//<![CDATA[
    
        $(document).ready(function () {
        $('.popeye').popeye();
    });
    
        
        //]]>-->
    </script>
    e introduzi claro no inicio da pagina os documentos necessarios
    Código:
    <link rel="stylesheet" type="text/css" href="css/jquery.popeye.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/styling.css" media="screen" />
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="lib/jquery.popeye-0.2.1.js"></script>
    a pagina completa resume se a isto ,mas nao esta nem perto do desejado

    Código:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="css/jquery.popeye.css" media="screen" />
      <link rel="stylesheet" type="text/css" href="css/styling.css" media="screen" />
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="lib/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="lib/jquery.popeye-0.2.1.js"></script>
    </head>
    <body>
    <div class="popeye">
    <ul>
    <li><a href="images/1.jpg"><img src="thumbs/1.jpg" alt="The caption string"></a></li>
    <li><a href="images/2.jpg"><img src="thumbs/2.jpg" alt="The caption string"></a></li>
    <li><a href="images/3.jpg"><img src="thumbs/3.jpg" alt="The caption string"></a></li>
    </ul> 
    </div>
    <script type="text/javascript">
        <!--//<![CDATA[
    
        $(document).ready(function () {
        $('.popeye').popeye();
    });
    
        
        //]]>-->
    </script>
    </body>
    </html>
     
  2. geoblast

    geoblast Power Member

    O código que tens aqui escrito é substancialmente diferente do que está na demo que referes. Os pormenores que faltam devem fazer toda a diferença.

    Quanto aos css que te faltam, basta colocares os URL na barra de endereços e copiares para um css teu.
     
  3. Inoculado

    Inoculado Power Member

    eu sei disso ,eu tentei pegar nessas diferenças e trabalhar com elas ,so que n consegui incluir a lista de modo a ficar funcional

    podes me dar um exemplo?
     
  4. Inoculado

    Inoculado Power Member

    ja consegui .
    Gracias
     

Partilhar esta Página