prettyPhoto wiele galerii na jednej stronie

Question

Buduję witrynę worpdress i mam wiele galerii na stronie zbudowanej za pomocą kodu. W tej chwili cały obraz otrzymuje atrybut rel "prettyPhoto [1]", ale potrzebuję każdej galerii osobno. Mam łącznie 56 zdjęć na stronie, więc gdy pierwszy obraz z galerii 1 zostanie otwarty w lightboxie, oznacza to, że 1/56 i mogę przeglądać wszystkie 56 obrazów, to czego chcę, to galeria, aby powiedzieć 1/16 , a następnie galeria 1/16 itd powiedziano mi do edytowania tej linii skryptu w moim pliku raw.js:

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

ale też pewien, co zrobić z tym? Każda pomoc będzie bardzo ceniona. Tu jest link do danej strony:

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

Answer 1

grupy prettyPhoto galerie razem na podstawie zawartości nawiasów kwadratowych. Otrzymujesz wszystkie 56 zdjęć w tej samej galerii, ponieważ wszystkie zostały przypisane do galerii 1.

Co naprawdę chcesz, to pierwsze szesnaście w galerii 1;

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

I następne 16 w galerii 2;

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

Pytanie jest-jak to zrobić, biorąc pod uwagę, że atrybut rel jest przypisany przez JS? Cóż, chciałbym spojrzeć na to na podstawie rodzica div div. Każdy element galerii-ikony ma rodzica elementu galerii. Każda z nich jest częścią klasy galerii, która ma określony identyfikator. Na przykład:

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

Przypisanie tego unikatowego identyfikatora galerii jako pięknej wartości zdjęcia. to znaczy;

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

Chciałbym zrobić to poprzez znalezienie wszystkich gallery-ikony i korzystania closest() znaleźć galerię rodzic id, tak;

Finding the id of a parent div using Jquery

Nie Przetestowałem go ani nic, ale coś takiego powinno Ci idą w dobrym kierunku;

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

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

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

      });  

Answer 2

I może przyszedł z łatwiejszego rozwiązania, jestem po prostu przechodząc przez wszystkie mojej galerii div w each funkcji, a następnie inicjowania prettyPhoto w obrazach wewnątrz nich.

$(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

Wszystko, co należy zrobić jest zmiana rel w html gdzie dodać galerię, która wygląda mniej więcej tak to rel = „prettyPhoto [pp_gal]”

w pierwszej galerii utworzonej wewnątrz twój div zmienić rel = "prettyPhoto [pp_gal]" na "prettyPhoto [gallery1]" (na przykład)

i obok "prettyPhoto [gallery2]" i tak dalej.