Заставить плагин JQuery LightBox работать с несколькими галереями

Я пытаюсь сделать этот плагин jquery => http://leandrovieira.com/projects/jquery/lightbox/ работа с несколькими галереями на одной странице.

Проблема в том, что каждый раз, когда я нажимаю на изображение из определенной галереи, я получаю все изображения из всех галерей на одной странице. Допустим, у меня есть 2 галереи по 6 фотографий в каждой. Если я нажму на изображение из галереи 1, я также увижу изображения из галереи 2.

Я пробовал что-то вроде этого, чтобы заставить его работать, но безуспешно:

<script type="text/javascript">
    $(function(){
      $('div.gallery-6').each(function() {
        $(this).find('a.lightbox').lightBox();
      });
    });
</script>

К сожалению не работает!!!

Каков обходной путь для этого?

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


javascript wordpress jquery lightbox
person lpdahito    schedule 12.01.2010    source источник
comment
поместите HTML, который вы пытаетесь сопоставить с селекторами (я думаю, что это проблема селектора)   -  person Dan Beam    schedule 12.01.2010
comment
кроме того, $( 'div.gallery-6 a.lightbox' ).lightBox( ); - это то же самое, что и то, что вы делаете с меньшим количеством кода (почти уверен, что это то же самое)   -  person Dan Beam    schedule 12.01.2010
comment
это не так... так как я хочу, чтобы плагин рассматривал мои галереи как две разные галереи. Допустим, одна галерея содержит определенный набор изображений, а другая — другой набор изображений. Когда вы просматриваете первую галерею, вы не должны видеть другие.   -  person lpdahito    schedule 13.01.2010

Ответы (9)


arrow_upward
8
arrow_downward

С очень небольшими изменениями я сделал эту работу с несколькими галереями на одной странице.

JQuery

$(function() {
  $('#gallery1 a').lightBox();
  $('#gallery2 a').lightBox();
  ...
  $('#galleryN a').lightBox();   
});

HTML

<div class="gallery" id="gallery1">
<div class="gallery" id="gallery2">
...
<div class="gallery" id="galleryN">

Я изменил стиль с идентификатора на класс.

person Cadoo    schedule 12.01.2010
comment
Я только что попробовал это решение... Оно отлично работает, спасибо. Но почему в таком случае мой предыдущий код не работал? Я имею в виду, что двойной вызов функции лайтбокса аналогичен поиску элемента, в моем случае div галереи, а затем в каждом div галереи найдите элементы a и вызов функции лайтбокса... Мне не нужно было бы указывать галерее идентификатор причины я вызываю метод each() в div галереи. - person lpdahito; 13.01.2010
comment
также $('.gallery').each(function(i) { $('#gallery'+i).lightbox(); }); - person Matt; 28.11.2011

arrow_upward
6
arrow_downward

Это патч для ответа Бена, для тех, кто хочет использовать несколько галерей или просто добавить эффект лайтбокса к изображению, используйте его внутри тега <head>...</head>

Вот код (Примечание: я изменил переменную $ на jQuery, у меня так лучше работает):

<script type="text/javascript">
    jQuery(function() {
        var boxen = [];
        //find all links w/ rel="lightbox[gallery_name]" or just rel="lightbox" it works both ways
        jQuery('a[rel*=lightbox]').each(function() {
        //push only unique lightbox[gallery_name] into boxen array
        if (jQuery.inArray(jQuery(this).attr('rel'),boxen)) boxen.push(jQuery(this).attr('rel'));
    });
    //for each unique lightbox group, apply the lightBox
    jQuery(boxen).each(function(i,val) { jQuery('a[rel='+val+']').lightBox(); });
    });
</script>

Это пример смешивания всех возможных вариантов использования, все они могут работать в одном и том же html, здесь у нас есть две галереи и третья без имени, просто ссылка на «лайтбокс»:

<a href="images/image1.jpg" rel="lightbox[gallery1]"><img border="0" height="50" src="images/image1_thumbnail.jpg" width="50" />
<a href="images/image2.jpg" rel="lightbox[gallery1]"><img border="0" height="50" src="images/image2_thumbnail.jpg" width="50" />
<a href="images/image3.jpg" rel="lightbox[gallery2]"><img border="0" height="50" src="images/image3_thumbnail.jpg" width="50" />
<a href="images/image4.jpg" rel="lightbox[gallery2]"><img border="0" height="50" src="images/image4_thumbnail.jpg" width="50" />
<a href="images/image5.jpg" rel="lightbox"><img border="0" height="50" src="images/image5_thumbnail.jpg" width="50" />

Надеюсь, это поможет!

person Daniel Avellaneda    schedule 11.05.2010

arrow_upward
4
arrow_downward

Я делаю это так:

<script type="text/javascript">
    $(function(){
        $('.lightboxGallery').each(function(){
            $('.lightbox', this).lightBox();
        });
    });
</script>

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

<div id="gallery1" class="lightboxGallery">
    <a href="image1.jpg" class="lightbox">Image 1</a><br />
    <a href="image2.jpg" class="lightbox">Image 2</a><br />
    <a href="image3.jpg" class="lightbox">Image 3</a><br />
</div>
<div id="gallery2" class="lightboxGallery">
  <a href="image4.jpg" class="lightbox">Image 4</a><br />
  <a href="image5.jpg" class="lightbox">Image 5</a><br />
  <a href="image6.jpg" class="lightbox">Image 6</a><br />
</div>

Вместо этого вы можете использовать селектор «a», но я считаю, что использование «.lightbox» обеспечивает большую гибкость.

person Community    schedule 04.02.2010
comment
Это лучшее решение на сегодняшний день. Спасибо, отлично работает, если использовать тег вместо добавления .lightbox к каждой ссылке. - person Klikerko; 05.01.2012

arrow_upward
1
arrow_downward

В качестве альтернативы вы можете сделать что-то подобное, чтобы автоматически подключать любые ссылки на лайтбокс[вставьте сюда название галереи], как стандартные функции lightbox.js:

$(function() {
  var boxen = [];

  //find all links w/ rel=lightbox[...
  $('a[rel*=lightbox\\[]').each(function() {

    //push only unique lightbox[gallery_name] into boxen array
    if ($.inArray($(this).attr('rel'),boxen)) boxen.push($(this).attr('rel'));

  });

  //for each unique lightbox group, apply the lightBox
  $(boxen).each(function(i,val) { $('a[rel='+val+']').lightBox(); });

});
person Ben    schedule 22.02.2010

arrow_upward
1
arrow_downward

Все, что вам нужно, это лайтбокс 2, который вы можете получить по ссылке ниже.

http://www.huddletogether.com/projects/lightbox2/

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Вы можете установить разные наборы галерей, используя «lightbox[roadtrip]», просто переименуйте «roadtrip» в желаемое имя группы галерей, и все будет работать как по волшебству. Не нужно кодировать ничего лишнего

person Honshi    schedule 01.07.2010

arrow_upward
1
arrow_downward

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

    jQuery('.lightbox').each(function(){
            jQuery('a', this).lightBox();
    });

Это предполагает структуру HTML:

<div class="lightbox">
  <div class="wrapper">
    <a href="asdasd.jpg"><img src="asdasd.jpg"></a>
    <a href="asdasd2.jpg"><img src="asdasd2.jpg"></a>
  </div>
</div>

Я думаю, что класс-оболочка не нужен, но мой код включил его по другим причинам.

person Jon Daley    schedule 30.05.2012

arrow_upward
0
arrow_downward

Не могу сказать, что раньше работал с этим конкретным плагином, но обычно вы добавляете rel=lightbox[foo] к элементу ссылки. Foo будет уникальным для каждой галереи на странице.

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

person Mark Hurd    schedule 12.01.2010
comment
Лайтбокс jQuery позволяет вам использовать любой селектор, который вы хотите привязать к элементу. так что вам больше не нужно обязать помещать rel=lightbox[Optional_slide_show] на свои элементы (как в оригинальной версии). однако вы можете имитировать это поведение с помощью селектора $( '[rel*="lightbox"]' ) jQuery. - person Dan Beam; 13.01.2010

arrow_upward
0
arrow_downward

Вот как я сделал базовый лайтбокс jquery, связанный в исходном вопросе, с несколькими галереями. Никаких взломов и прочего. Работает безупречно.

Я дал каждому лайтбоксу отдельное имя:

<script type="text/javascript" charset="utf-8">
$(function() {
    $('a[@rel*=lightboxG1]').lightBox();
    $('a[@rel*=lightboxG2]').lightBox();
});
</script>

Тогда мой HTML выглядит так:

<a href="images/image-1.jpg" rel="lightboxG1">image #1</a>
<a href="images/image-2.jpg" rel="lightboxG1">image #2</a>
<a href="images/image-3.jpg" rel="lightboxG1">image #3</a>

<a href="images/image-1.jpg" rel="lightboxG2">image #1</a>
<a href="images/image-2.jpg" rel="lightboxG2">image #2</a>
<a href="images/image-3.jpg" rel="lightboxG2">image #3</a>

И вуаля, у меня есть 2 отдельные галереи.

person AntoNB    schedule 12.08.2010

arrow_upward
0
arrow_downward

Вы также можете сделать это вообще без JavaScript с атрибутами данных.

<div id="gallery-1">
    <a href="images/image-1.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 1"><img src="images/image-1.jpg"></a>
    <a href="images/image-2.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 2"><img src="images/image-2.jpg"></a>
    <a href="images/image-3.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 3"><img src="images/image-3.jpg"></a>
</div>
<div id="gallery-2">
    <a href="images/image-4.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 1"><img src="images/image-4.jpg"></a>
    <a href="images/image-5.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 2"><img src="images/image-5.jpg"></a>
    <a href="images/image-6.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 3"><img src="images/image-6.jpg"></a>
</div>
<div id="gallery-3">
    <a href="images/image-7.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 1"><img src="images/image-7.jpg"></a>
    <a href="images/image-8.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 2"><img src="images/image-8.jpg"></a>
    <a href="images/image-9.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 3"><img src="images/image-9.jpg"></a>
</div>
<div id="gallery-4">
    <a href="images/image-10.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 1"><img src="images/image-10.jpg"></a>
    <a href="images/image-11.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 2"><img src="images/image-11.jpg"></a>
    <a href="images/image-12.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 3"><img src="images/image-12.jpg"></a>
</div>

Это работает также, если изображения перепутаны на странице.

<div id="gallery">
    <a href="images/image-1.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 1"><img src="images/image-1.jpg"></a>
    <a href="images/image-4.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 1"><img src="images/image-4.jpg"></a>
    <a href="images/image-2.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 2"><img src="images/image-2.jpg"></a>
    <a href="images/image-9.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 3"><img src="images/image-9.jpg"></a>
    <a href="images/image-3.jpg" data-lightbox="gallery-1" data-title="Gallery 1 Image 3"><img src="images/image-3.jpg"></a>
    <a href="images/image-8.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 2"><img src="images/image-8.jpg"></a>
    <a href="images/image-5.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 2"><img src="images/image-5.jpg"></a>
    <a href="images/image-12.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 3"><img src="images/image-12.jpg"></a>
    <a href="images/image-10.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 1"><img src="images/image-10.jpg"></a>
    <a href="images/image-6.jpg" data-lightbox="gallery-2" data-title="Gallery 2 Image 3"><img src="images/image-6.jpg"></a>
    <a href="images/image-7.jpg" data-lightbox="gallery-3" data-title="Gallery 3 Image 1"><img src="images/image-7.jpg"></a>
    <a href="images/image-11.jpg" data-lightbox="gallery-4" data-title="Gallery 4 Image 2"><img src="images/image-11.jpg"></a>
</div>
person Silvère Héraudeau    schedule 13.09.2016