Visualizzazione dei risultati da 1 a 10 su 10

Discussione: [lightbox+ajax]

  1. #1
    Utente di HTML.it L'avatar di Goonie
    Registrato dal
    Sep 2007
    residenza
    Rome/Florence
    Messaggi
    39

    [lightbox+ajax]

    Ho un problemino con questa ottima libreria,
    ho seguito gli esempi e funziona correttamente, il mio problema soggiunge quando carico tramite ajax (jquery) il contenuto di un div con dentro una gallery in ligthbox. Il codice che genero è corretto tanto che se faccio il cut&past dello stesso su una pagina html la gallery funziona correttamente.

    Non sono molto pratico di lightbox e di jquery in generale, esiste qualche problema "nativo" nel caricare una gallery di photobox tramite una chiamata asincrona con ajax???

    ps: il non funziona sta ad indicare che cliccando sulla preview della galleria apre direttamente l'immagine nel browser, bypassando il javascript di lightbox.

    Thanks...

  2. #2
    Utente di HTML.it L'avatar di Goonie
    Registrato dal
    Sep 2007
    residenza
    Rome/Florence
    Messaggi
    39
    risolto

    per chi avesse il mio stesso problema

    Nella porzione di html che "innesto" tramite la chiamata asincrona includo il js della libreria, prima lo avevo inserito nel header della pagina "madre"
    I suppose that....A quanto pare il javascript innestato non è "mappato" dal browser e tutte le fuzioni chiamate nell'innesto non possono far riferimento alla pagina principale ma solo a quella "innestata"... contorto lo sò... ma javascript è contorto!
    se ho detto una boiata ditemelo!

  3. #3
    Utente di HTML.it L'avatar di Goonie
    Registrato dal
    Sep 2007
    residenza
    Rome/Florence
    Messaggi
    39

    errata corrige

    In realtà la "soluzione" trovata non è affidabile, funziona in maniera randomica. La galleria caricata con lightbox (LB da ora in poi) tramite ajax funziona solo se prima le funzioni di LB sono state utilizzate sulla pagina principale.
    Guardando un pò in giro ho visto che non sono l'unico ad avere questo problema; penso di aver capito che la criticità del tutto viene dal fatto che carico la gallerìa da visualizzare tramite LB con ajax, quindi da Html esterno alla pagina principale dove è incluso il file js di LB, e quindi per il nuovo Html la libreria di LB non è inizializata.

    Domanda: come faccio a ri-inizializare LB per l'html caricato da ajax senza ri-includere il js di LB sul nuovo codice html? Soluzione zozzona e poco affidabile come ho riscontrato.

    Son giunto a todo guardando questo post,
    http://www.dynamicdrive.com/forums/s...ad.php?t=25671

    solo che la libreria del tizio non è la LB derivata da jquery na da scriptaculous e prototype.

    Qualche luminare di jQuery è in grado di rispondere???

    thanks for the info!!!
    {chickens come home to roost}

    MySite

  4. #4
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    alla fine non si capisce se vuoi restare su lightbox (protaculous) o vuoi usare un alternativa in jquery

  5. #5
    Utente di HTML.it L'avatar di Goonie
    Registrato dal
    Sep 2007
    residenza
    Rome/Florence
    Messaggi
    39
    jquery
    dal momento che nel sito che sto creando lo uso per altre cose.

    uso questo plugin di jquery
    http://plugins.jquery.com/project/jquerylightbox_bal

    in alternativa anche questo
    http://leandrovieira.com/projects/jquery/lightbox/
    {chickens come home to roost}

    MySite

  6. #6
    Utente di HTML.it L'avatar di Xinod
    Registrato dal
    Sep 2000
    Messaggi
    13,649
    Originariamente inviato da Goonie
    jquery
    dal momento che nel sito che sto creando lo uso per altre cose.
    tra cui queste chiamate ajax oggetto della discussione?

  7. #7
    Utente di HTML.it L'avatar di Goonie
    Registrato dal
    Sep 2007
    residenza
    Rome/Florence
    Messaggi
    39
    chiamata ajax che viene invocata sul evento onclick di un link

    $(document).ready(function(){
    $(".prj_lnk").click(function(){
    var id = $(this).attr("id").toString().split(":")[1];
    $.ajax({
    type: "GET",
    url: "mod/project_view.php",
    data: "id="+id,
    cache: false,
    success: function(html){

    $("#prj\\.entry\\[" + id + "\\]").append(html);
    $("#prj\\.entry\\[" + id + "\\]").show("slow");
    $.scrollTo( "#prj\\.entry\\[" + id + "\\]", 800);

    }
    });
    });
    });

    nella variabile html c'è in codice html della pagina con la galleria lightbox, ergo la gallerya di lightbox me lo costruisco in codesto modo

    Codice PHP:
               $d=opendir($dir);
               while (
    $file readdir($d))
               {
                   if(!
    is_dir($file)){                   
                      echo 
    "
                                <a  rel=\"lightbox-prj
    $idProgetto\" href=\"./img/prj/$idProgetto/big/$file\" title=\"$pro_des\">
                                    <img src=\"./img/prj/
    $idProgetto/small/$file\" alt=\"\" />
                                </a>
                            "
    ;
                      
    $i++;
                   }
               } 

    cliccando sul link on succede nulla, se prendo l'html generato e me lo copio e incollo sulla pagina principale la gallery funziona.
    Quindi. penso ma non essendo pratico 99% sbaglio, il la libreria di ligthbox non è inizializzata nella porzione di codice che innesto tramite ajax a quella principale.
    {chickens come home to roost}

    MySite

  8. #8
    Utente di HTML.it L'avatar di Goonie
    Registrato dal
    Sep 2007
    residenza
    Rome/Florence
    Messaggi
    39

    sono una pippa al sugo

    ho risolto....
    una volta caricato l'html da ajax e avero "innestato" nella pagina chiamante, riinizializzo la libreria lightbox questa maniera.

    questa è la pagina (project_view.php) che viene chiamata da ajax, dove costruisco la gallery che pongo dentro un div con id #gallery appunto
    codice:
            <div id="gallery">
                <?
                $i=1;
                $allowed_types = array('png','jpg','jpeg','gif');
                $dir=$_GET["sub_dir"];
                $dir="../img/prj/$idProgetto/small";
               $d=opendir($dir);
               while ($file = readdir($d))
               {
                   if(!is_dir($file)){                   
                      echo "
                                <a rel=\"lightbox\" href=\"./img/prj/$idProgetto/big/$file\" title=\"\">
                                    <img src=\"./img/prj/$idProgetto/small/$file\" alt=\"\" />
                                </a>
                            ";
                      $i++;
                   }
               }
               closedir($d);
                ?>           
            </div>
    questo è il codice della pagina che effettua la chiamata ajax
    codice:
    <script type="text/JavaScript" language="javascript">
     $(document).ready(function(){
        $(".prj_lnk").click(function(){
            var id = $(this).attr("id").toString().split(":")[1];
            //alert(id);
            $.ajax({                
                type: "GET",
                url: "mod/project_view.php",
                data: "id="+id,
                cache: false,
                success: function(html){
                    $("#prj\\.entry\\[" + id + "\\]").append(html);
                    $("#prj\\.entry\\[" + id + "\\]").show("slow");
    
                    $.scrollTo( "#prj\\.entry\\[" + id + "\\]", 800);
                    $('#gallery a').lightBox(); //inizializzo la lightbox nel div gallery creato nella project_view.php
                }
            });
        });     
     }); 
    </script>
    E' reperibile una documentazione approfondita su jQuery in italiano o mi devo rassegnare a imparare l'idioma dei sassoni???
    {chickens come home to roost}

    MySite

  9. #9
    Utente di HTML.it
    Registrato dal
    May 2008
    Messaggi
    41
    ciao anche io sto cercando una documentazione in italiano ma sembra non ci sia. Se qualcuno ha qualche tipo di documentazione o link utile la posti su questo forum.

    grazie mille a tutti


    ciao ciao.

  10. #10

    jQuery and LightBox

    Ciao a tutti, mi sono praticamente 'terminato', cercando di trovare una soluzione a questo problema. Ma qualcosa sono riuscito a fare. Forse non è il massimo ma lo voglio condividere con voi.
    Ho una serie di gallerie di immagini (thumbnails) che vengono caricate con Ajax una alla volta (a seconda del ramo che seleziono) e vorrei fare in modo che con LightBox possa visualizzarne ognuna.
    Ho lincato tutti i lightbox e i jqueri.js correttamente ma la cosa pare non interessare affatto al mio browser che ha continuato bellamente a rimandarmi all'url della immagine.
    Le ho provate tutte ma poi ho cambiato sistema:

    L'idea è pressoché questa:

    ho l'immagine thumbnail, con la sua src='...' e questa è, come ovvio, inclusa in un link;

    <a id="idLINK" href='*****'>
    [img]urlMiaImg[/img]
    </a>

    Allora l'idea, faccio in modo che il link ('*****') punti INVECE che all'url della immagine NON ridotta, ad una mia funzioncina, passandogli il suo ID e l'ID dell'immagine (quest'ultimo si potrebbe evitare, evincedolo con JQuery direttamente dal Link e mediante il DOM).

    Nella mia funzioncina faccio così:

    function miaFunzioncina(idLink, idImg){

    $('#' + idLink).attr('href',$('#' + idImg).attr('src'));
    $('#' + idLink).lightBox();
    $('#' + idLink).click();

    }

    Non ci crederete (e non sarà elegante) ma funziona!!!
    La prima volta che clicco sul link, funziona perchè viene chiamata la funzioncina, la seconda funziona come funziona normalmente LightBox.

    Pino

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 © 2025 vBulletin Solutions, Inc. All rights reserved.