Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Problema per sviluppo Gallery in JQuery e Lazy loading + Java Servlet

    Ciao a tutti, mi stò cimentando le prime volte con JQuery. Volevo creare una gallery stile google caricando le foto man mano la pagina viene scrollata.


    Inb sostanza con JQuery interrogo una servlet Java che genera i <li></li> contenenti le foto. Dopodiché le scrivo dinamicamente con JQuery.


    Funziona tutto, quando scrollo la pagina JQuery interroga la Servlet e ottiene i nuovi elementi ed in effetti vedo le nuove foto comparire man mano.


    Unico problema se clicco sulle foto inserite fisicamente nel codice HTML tutto funziona e si apre la descrizione, se invece clicco sulle foto generate da JQuery e aggiunte con append() non mi apre la descrizione.


    Qualche consiglio o suggerimento?




    Lo script per la Grid Gallery è questo: https://tympanus.net/codrops/2013/03...nding-preview/


    Vi allego anche parte del codice:


    Questa parte ottiene i tag <li> con il relativo contenuto dalla Servlet e lo inserisce con JQuery nel tag <ul>


    codice:
    <script type="text/javascript">
           
                   window.onscroll = function() { 
                        
                            
                            $.get("infinitContentServlet", function(data){
                                $("#og-grid").append(data);
                                $contentLoadTriggered = false;
                            });
                   }
                            
     </script>

    Quà invece troviamo la parte relativa alla gallery, ho lasciato un unico elemento dato che gli altri vengono generati con JQuery, in sostanza se si clicca su questo elemento ovvero il primo si apre la descrizione, se si clicca su quelli successivi generati da JQuery non si apre.
    codice HTML:
    <div class="main">
    <ul id="og-grid" class="og-grid">
    <li><a href="" data-largesrc="images/1.jpg" data-title="Primo" data-description="Descrizione di prova">
    <img src="images/thumbs/1.jpg" alt="img01"/>
    </a></li></ul>

  2. #2
    Quote Originariamente inviata da jr1980 Visualizza il messaggio
    Unico problema se clicco sulle foto inserite fisicamente nel codice HTML tutto funziona e si apre la descrizione, se invece clicco sulle foto generate da JQuery e aggiunte con append() non mi apre la descrizione.

    Evidentemente il plug-in per la grid gallery non delega gli eventi ma li applica direttamente agli elementi.

    Potresti provare a re-inizializzare il plug-in dopo aver aggiunto nuovi elementi, anche se è una soluzione poco elegante e potrebbe dare risultati inaspettati se il plug-in aggiunge degli elementi agli items al momento dell'inizializzazione.

    codice:
    <script type="text/javascript">
    window.onscroll = function() { 
        $.get("infinitContentServlet", function(data){
            $("#og-grid").append(data);
            $contentLoadTriggered = false;
            Grid.init();
        });
    }
    </script>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.