Как вы можете добавить несколько галерей в галерею лайтбоксов poptrox?

Question

У меня на вашем веб-сайте есть галерея poptrox. Однако каждый миниатюра открывает полное изображение этого миниатюры, и когда вы нажимаете кнопку «Далее/предыдущий», он перемещается к изображению следующего миниатюры.

Возможно ли, чтобы каждый эскиз содержал собственную галерею, и когда вы нажимаете на нее, изображение в полноэкранном режиме является частью галереи. Таким образом, когда вы нажимаете следующий/предыдущий, он прокручивает свою уникальную коллекцию изображений.

Я использовал это, чтобы настроить его https://github.com/n33/jquery.poptrox.

Любая помощь будет потрясающей!

Answer 1

По данным сайта вы создали галерею как

<div id="gallery"> 
    <a href="path/to/image1.jpg"><img src="path/to/image1_thumbnail.jpg" /></a> 
    <a href="path/to/image2.jpg"><img src="path/to/image2_thumbnail.jpg" /></a> 
    <a href="path/to/image3.jpg"><img src="path/to/image3_thumbnail.jpg" /></a> 
    <a href="path/to/image4.jpg"><img src="path/to/image4_thumbnail.jpg" /></a> 
    <a href="path/to/image5.jpg"><img src="path/to/image5_thumbnail.jpg" /></a> 
    <a href="path/to/image6.jpg"><img src="path/to/image6_thumbnail.jpg" /></a> 
</div> 

и у вас есть вызов JQuery как

var foo = $('#gallery'); 
foo.poptrox(); 

так что вам просто нужно добавить еще одну галерею как

<div id="gallery1"> 
    <a href="path/to/image1.jpg"><img src="path/to/image1_thumbnail.jpg" /></a> 
    <a href="path/to/image2.jpg"><img src="path/to/image2_thumbnail.jpg" /></a> 
    <a href="path/to/image3.jpg"><img src="path/to/image3_thumbnail.jpg" /></a> 
    <a href="path/to/image4.jpg"><img src="path/to/image4_thumbnail.jpg" /></a> 
    <a href="path/to/image5.jpg"><img src="path/to/image5_thumbnail.jpg" /></a> 
    <a href="path/to/image6.jpg"><img src="path/to/image6_thumbnail.jpg" /></a> 
</div> 

<div id="gallery2"> 
    <a href="path/to/image1.jpg"><img src="path/to/image1_thumbnail.jpg" /></a> 
    <a href="path/to/image2.jpg"><img src="path/to/image2_thumbnail.jpg" /></a> 
    <a href="path/to/image3.jpg"><img src="path/to/image3_thumbnail.jpg" /></a> 
    <a href="path/to/image4.jpg"><img src="path/to/image4_thumbnail.jpg" /></a> 
    <a href="path/to/image5.jpg"><img src="path/to/image5_thumbnail.jpg" /></a> 
    <a href="path/to/image6.jpg"><img src="path/to/image6_thumbnail.jpg" /></a> 
</div> 

и добавить еще один jQuery

var foo = $('#gallery1'); 
foo1.poptrox(); 
var foo2 = $('#gallery2'); 
foo1.poptrox(); 

Я надеюсь, что это помогает, и если вы размещаете вы пробовали, я могу видеть, как лучше помочь