none
Datalist + jquery.galleria.js RRS feed

  • Pergunta

  • Olá Pessoal,
    Bom dia ...

    Estou utilizando o jquery.galleria.js para desenvolver um tipo de galeria de imagens, onde ocorre a repeticao atraves de um datalist pai ( q mostra as imagens maiores), e um datalist filho (que esta dentro do datalist pai, com objetivo de mostrar as imagens menores para cada imagem maior)

    Porém a main_image (perceberam atraves dos codigo abaixo) , aparece somente na primeira posicao do datalist, nas seguintes, somente aparece as imagens filhas, e qdo estas sao clicadas, atualiza somente a main_image da primeira posicao do datalist,

    O que devo fazer para passar para este .js a posicao que esta sendo clicada ?


    Chamada :

     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta http-equiv="imagetoolbar" content="false">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="galeria/galleria.css" rel="stylesheet" type="text/css" />
    
        <script src="galeria/jquery.min.js" type="text/javascript"></script>
    
        <script src="galeria/jquery.galleria.js" type="text/javascript"></script>
    
        <script type="text/javascript">
    
            $(document).ready(function() {
                $('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
    
                $('ul.gallery_demo').galleria({
                    history: false, // activates the history object for bookmarking, back-button etc.
                    clickNext: true, // helper for making the image clickable
                    insert: '#main_image', // the containing selector for our main image
                    onImage: function(image, caption, thumb) { // let's add some image effects for demonstration purposes
    
                        // fade in the image & caption
                        image.css('display', 'none').fadeIn(500);
                        caption.css('display', 'none').fadeIn(500);
    
                        // fetch the thumbnail container
                        var _li = thumb.parents('li');
    
                        // fade out inactive thumbnail
                        _li.siblings().children('img.selected').fadeTo(500, 0.3);
    
                        // fade in active thumbnail
                        thumb.fadeTo('fast', 1).addClass('selected');
    
                        // add a title for the clickable image
                        image.attr('title', 'Próxima Imagem >>');
                    },
                    onThumb: function(thumb) { // thumbnail effects goes here
    
                        // fetch the thumbnail container
                        var _li = thumb.parents('li');
    
                        // if thumbnail is active, fade all the way.
                        var _fadeTo = _li.is('.active') ? '1' : '0.3';
    
                        // fade in the thumbnail when finnished loading
                        thumb.css({ display: 'none', opacity: _fadeTo }).fadeIn(1500);
    
                        // hover effects
                        thumb.hover(
    					function() { thumb.fadeTo('fast', 1); },
    					function() { _li.not('.active').children('img').fadeTo('fast', 0.3); } // don't fade out if the parent is active
    				)
                    }
                });
            });
    	
        </script>
    
        <style media="screen,projection" type="text/css">
            .borderTop
            {
                border-top: 1px solid Silver;
            }
            .gallery_demo
            {
                text-align: center;
                width: 150px;
                margin-left: -30px;
            }
            .gallery_demo li
            {
                float: left;
                margin-left: 0px;
                width: 55px;
                height: 40px;
                border: 2px 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
            {
            }
            .gallery_demo li div .caption
            {
                font: italic 0.7em/1.4 georgia,serif;
            }
            .galleria_container
            {
            }
            .nav
            {
                position: absolute;
            }
    </style>

     

     <asp:DataList ID="dlAuto" DataSourceID="dtsAuto" runat="server" OnItemDataBound="dlAuto_ItemDataBound">
                <ItemTemplate>
    <table>
                                                <tr>
                                                    <td valign="top">
                                                        <div id="main_image">
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td valign="top">
                                                        <div style="float: left; margin-left: -6px;">                                                    
                                                            <ul id="ulImagem" runat="server" class="gallery_demo_unstyled">
                                                                <asp:DataList ID="dlAutoImg" DataSourceID="dtsAutoImg" runat="server"
                                                                    DataKeyField="Id_Imagem" RepeatColumns="3" RepeatDirection="Horizontal" OnItemCommand="dlAutomovelImagem_ItemCommand1">
                                                                    <ItemTemplate>
                                                                       <%-- <li class="active">
                                                                            <img src='<%# Eval("Imagem","imagens/anuncios/xmenor/{0}") %>' />
                                                                        </li>--%>
                                                                    </ItemTemplate>
                                                                </asp:DataList>
                                                            </ul>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </table>
    </ItemTemplate>
    </DataList>


     

    Já pesquisei bastante, mas nao estou conseguindo encontrar uma solucao ...

    Alguém que já conheca o jquery.galleria.js pode me ajudar ? .. .caso necessario posto ele aqui .


    Att,


    Nycolas Barrel

    segunda-feira, 7 de dezembro de 2009 10:54

Todas as Respostas

  • Nycolas,

    O jquery.galleria.js é um componente que utiliza o core do JQuery representado pelo arquivo: jquery.min.js.
    Reformule a sua pergunta. E vamos resolver sua dúvida. Eu uso o Jquery a uns 3 meses e creio que posso te ajudar.
    Simplifique e faça uma pergunta direta. 

    Tiago Novaes (MSP, MCP)- http://www.atitudebrasil.net - Blog: http://www.atitudebrasil.net/blogs/tiagosantos
    segunda-feira, 7 de dezembro de 2009 12:30
  • Olá Tiago,

    Realmente agradeço o interesse em me ajudar,

    Bom, observe este endereço

    http://www.emporioinline.com/testedatalist.aspx


    veja que coloquei uma repeticao de dois registros,  (é um datalist pai, com dois registros , e as imagens menores, estao em um datalist filho)

    Verifique que a imagem maior so apareceu na primeira posicao do datalist (entende ? ,... preciso que apareca em cada posicao, e qdo clicar nas imagens menores, a imagem maior atualize NAQUELA posicao)


    Agradeço desde já,


    Att,

    Nycolas Barrel.
    segunda-feira, 7 de dezembro de 2009 13:12
  • Então, você quer que ele apareça como duas áreas distintas. Correto? 
    ================================================

    Bom eu não testei aqui mais faça o seguinte:
    Se vc tiver dúvidas de como montar o "head" dinâmicamente depois avise.

    1) Crie dois nomes de css para as galerias: 1º "gallery_demo_unstyled" e o segundo "gallery_demo_unstyled2" isso vai mostrar para o controle que existem duas galerias destintas. 

          Obs.: O "jquery.galleria.js" localiza seus objeto atravéz de marcação CSS3.
                   Logo ele está entendendo que só existe uma galeria chamada: (gallery_demo_unstyled).
                   <ul id="ulImagem" runat="server" class="gallery_demo_unstyled">
                   <ul/>
                   <ul id="ulImagem" runat="server" class="gallery_demo_unstyled2">
                   <ul/>


    2) Crie 02 containers para armazenar as imagens_grande:
                <div id="main_image">
                </div>

                <div id="main_image2">
                </div>




    3) Agora vamos a declaração do "$().galleria()" deve haver duas destintas uma para cada galeria:

            $(document).ready(function() {
                 ...

                      $('ul.gallery_demo_unstyled').galleria({
                         insert: '#main_image', // the containing selector for our main image
                 ...

                      $('ul.gallery_demo_unstyled2').galleria({
                      insert: '#main_image2', // the containing selector for our main image
                 ...

            });



    Se essa resposta foi útil não deixe de marca-lo como tal.


    Tiago Novaes (MSP, MCP)- http://www.atitudebrasil.net - Blog: http://www.atitudebrasil.net/blogs/tiagosantos
    segunda-feira, 7 de dezembro de 2009 16:40
  • Olá Tiago,

    Agradeço sua ajuda, realmente esta sua observação será de muito valor em outra parte do meu projeto, (estava precisando saber desta maneira tambem,)


    Porém Tiago, no exemplo que te mostrei , coloquei repeticao dentro de um datalist, e coloquei 2(dois) registros aparecendo,  ... na verdade eu preciso de uma repetição de "n" vezes , sendo assim , nao poderia limitar a quantidade de galerias funciando (entende ?) .... 


    gostaria de colocar dentro de um datalist o id="main_image" e dentro de um outro datalist (que esta dentro deste datalist principal) colocar o

     <li class="active">
    <img src='<%# Eval("Imagem","imagens/anuncios/xmenor/{0}") %>' />
     </li>

    Agradeço desde já pela ajuda, 


    Att,

    Nycolas Barrel.
    terça-feira, 8 de dezembro de 2009 10:10
  • Você disse
      ... na verdade eu preciso de uma repetição de "n" vezes , sendo assim , nao poderia limitar a quantidade de galerias funciando (entende ?) ....  

    Eu respondo: "Para aparecer galerias distintas. Elas precisão ter nomes destintos". Você entendeu isso?

    --------------------------------------------------------------------
    Você esta me perguntando a mesma coisa do início.  
    Concluo com isso que: eu não estou entendendo a sua pergunta.

    Tiago Novaes (MSP, MCP)- http://www.atitudebrasil.net - Blog: http://www.atitudebrasil.net/blogs/tiagosantos
    terça-feira, 8 de dezembro de 2009 13:44
  • Olá Tiago, me desculpe se eu não estou sabendo me expressar,

    Deixa eu ver se eu entendi, segundo sua resposta :

    "Eu respondo: "Para aparecer galerias distintas. Elas precisão ter nomes destintos". Você entendeu isso?"

    Eu precisaria definir aqueles 3 (tres) passos para cada vez que eu desejasse que gerasse galerias diferentes, certo ?


    Eu preciso de um Datalist, que traga para mim, supondo 100 registros, sendo que cada registro, seria uma mini galeria diferente  .... 

    olhe neste exemplo (estou apenas trazendo do banco estes dados, preciso que cada registro, funcione como uma galeria) :

    http://www.emporioinline.com/resultado_automovel.aspx



    Então se eu tiver um Datalist que traga 100 registros do banco , e eu quisesse gerar essa galeria para cada registro, eu teria que definir 100 nomes diferentes ?
    Ou existe uma outra maneira ? ...


    Att,


    Nycolas Barrel.
    terça-feira, 8 de dezembro de 2009 16:47