prettyPhoto mehrere Galerien auf einer Seite

Question

Ich baue eine worpdress Site und habe mehrere Galerien auf einer Seite, die mit dem Shortcode erstellt wurde. Im Moment haben alle Bilder das rel-Attribut 'prettyPhoto [1]', aber ich brauche jede Galerie separat. Ich habe 56 Bilder insgesamt auf der Seite, wenn also das erste Bild von Galerie 1 im Leuchtkasten geöffnet wird sagt es 1/56 und ich kann durch alle 56 Bilder klicken, was ich möchte ist für Galerie eins zu sagen 1/16 dann Galerie 1/16 usw. ich wurde gesagt, diese Zeile des Skripts in meiner raw.js Datei zu bearbeiten:

$(".gallery-icon a").attr('rel', 'prettyPhoto[1]'); 

aber noch sicher, was es damit zu tun? Jede Hilfe würde sehr geschätzt werden. Hier ist ein Link auf die Seite in Frage:

http://www.tetra-shed.co.uk/news/

Answer 1

pretty Gruppen Galerien zusammen basierend auf dem Inhalt der eckigen Klammern. So erhalten Sie alle 56 Bilder in der gleichen Galerie, weil sie alle der Galerie 1 zugeordnet wurden.

Was Sie wirklich wollen, ist das erste sechzehn in Galerie 1;

$(".gallery-icon a").attr('rel', 'prettyPhoto[1]'); 

Und die nächsten 16 in der Galerie 2;

$(".gallery-icon a").attr('rel', 'prettyPhoto[2]'); 

Die Frage ist-wie das, dass die rel zu tun gegeben Attribut über JS zugewiesen wird? Nun, ich würde es basierend auf der Eltern-Div-ID betrachten. Jedes gallery-icon-Element hat einen gallery-item-Parent. Jeder von diesen ist Teil einer Galerie-Klasse, die eine spezifische ID hat. Zum Beispiel

<div id='gallery-3' class='gallery galleryid-555 gallery-columns-4 gallery-size-thumbnail'> 
    <dl class='gallery-item'> 
     <dt class='gallery-icon'> 

Sie möchten also diese eindeutige Galerie-ID als den hübschen Foto-Rel-Wert zuweisen. dh;

$(".gallery-icon a").attr('rel', 'prettyPhoto[gallery-3]'); 

ich es von der Suche nach aller Galerie-Icons tun würde, und mit closest() die Eltern Galerie ID zu finden, wie diese;

Finding the id of a parent div using Jquery

ich es oder so, aber so etwas wie dies nicht getestet haben, sollten Sie gehen in die richtige Richtung;

  $('#content').find('.gallery-icon a').each(function() { 

       var gallid = $(this).closest("div").attr("id"); 

       $(this).attr('rel', 'prettyPhoto['+ gallid +']'); 

      });  

Answer 2

kam ich vielleicht mit einfacher Lösung, ich bin gerade durch alle meine Galerie div in each Funktion gehen und dann die prettyPhoto in Bilder in ihnen zu initialisieren.

$(document).ready(function(){ 
    $.each($(".gallery"), function(i, val) { 
     var queryString = ".gallery:nth(" + i + ") a[rel^='prettyPhoto']"; 
     $(queryString).prettyPhoto({animation_speed:'normal',theme:'light_square', social_tools: false}); 
    }); 
}); 

Answer 3

Alles, was getan werden muss, ist die rel im html zu ändern, in dem Sie Ihre Galerie hinzufügen, die so etwas wie dieses rel sieht = „pretty [pp_gal]“

in Ihrer ersten Galerie Sie innen erstellen Dein div ändere das rel = "prettyPhoto [pp_gal]" zu "prettyPhoto [gallery1]" (zum Beispiel)

und das nächste zu "prettyPhoto [gallery2]" und so weiter.