Помогите с созданием отдельной галереи для нескольких ссылок на одной странице в лайтбоксе - PullRequest
Новая
       7

Помогите с созданием отдельной галереи для нескольких ссылок на одной странице в лайтбоксе

0 голосов
/ 09 марта 2011

Я пытаюсь сделать галерею изображений открытой по ссылке в лайтбоксе, у меня есть основы, и у меня есть одна ссылка, которая открывает галерею изображений, но у меня есть 6 различных ссылок на странице, которую я хочучтобы открыть разные галереи изображений для каждого из них, при настройке он не отображает галерею, только одно изображение.Есть ли способ продублировать это:

HTML 

 <div id='gallery'>
        <a href="images/big-image1.jpg">
            <img src="images/thumbnail-image1.jpg"/>
        </a>
        <a href="images/big-image2.jpg" ></a>
        <a href="images/big-image3.jpg" ></a>
        <a href="images/big-image4.jpg" ></a>
    </div>

JS 

$(document).ready(function() {
    $('#gallery a').lightBox();
});

для каждой установки и работают ли они?Нужно ли присваивать им разные имена div, чтобы они работали?

Спасибо, Джессика

1 Ответ

0 голосов
/ 10 марта 2011

Если у вас есть шесть разных div, вам нужно будет шесть раз вызвать плагин jQuery Lightbox: 

$(document).ready(function() {
  $('#gallery1 a').lightBox();
  $('#gallery2 a').lightBox();
  $('#gallery3 a').lightBox();
  $('#gallery4 a').lightBox();
  $('#gallery5 a').lightBox();
  $('#gallery6 a').lightBox();
});

Другим вариантом было бы просто иметь один div, и у каждого изображения есть атрибут rel тега, чтобы сгруппировать их в галереи:

HTML 

<div id="gallery">

 <!-- gallery 1 -->
 <a href="full-image-1.jpg" rel="group1"><img src="thumb-1.jpg"></a>
 <a href="full-image-2.jpg" rel="group1"><img src="thumb-2.jpg"></a>
 <a href="full-image-3.jpg" rel="group1"><img src="thumb-3.jpg"></a>

 <!-- gallery 2 -->
 <a href="full-image-4.jpg" rel="group2"><img src="thumb-4.jpg"></a>
 <a href="full-image-5.jpg" rel="group2"><img src="thumb-5.jpg"></a>
 <a href="full-image-6.jpg" rel="group2"><img src="thumb-6.jpg"></a>

 <!-- gallery 3 -->
 <a href="full-image-7.jpg" rel="group3"><img src="thumb-7.jpg"></a>
 <a href="full-image-8.jpg" rel="group3"><img src="thumb-8.jpg"></a>
 <a href="full-image-9.jpg" rel="group3"><img src="thumb-9.jpg"></a>

 <!-- etc -->

</div>

затем используйте этот скрипт (вам все равно придется запустить его шесть раз): 

$("#gallery a[rel=group1]").lightBox();
$("#gallery a[rel=group2]").lightBox();
$("#gallery a[rel=group3]").lightBox();
// etc
...