Создание работы Плагина JQuery LightBox с несколькими галереями

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

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

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


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

Каково обходное решение для этого?

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

7
задан Bill the Lizard 28 March 2011 в 12:20
поделиться

7 ответов

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

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">

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

8
ответ дан 6 December 2019 в 08:43
поделиться

Это означает, что obj реализует IDisposible и будет правильно удален после с помощью блока . Это функционально то же самое, что:

{
  //Assumes SomeObject implements IDisposable
  SomeObject obj = new SomeObject();
  try
  {
    // Do more stuff here.       
  }
  finally
  { 
    if (obj != null)
    {
      ((IDisposable)obj).Dispose();
    }
  }
}
-121--3832536-

Отлить его до длинной.

-121--4690971-

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

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

0
ответ дан 6 December 2019 в 08:43
поделиться

Для иллюстрации важности специализации шаблонов функций рассмотрим функцию шаблона std:: swap . По умолчанию std:: swap (x, y) по существу делает:

T temp = x;
x = y;
y = temp;

, но это может быть неэффективно, поскольку предполагает создание дополнительной копии x и может выполнять дополнительное копирование в присвоениях. Это особенно плохо, если x велик (например, если это std:: vector с множеством элементов). Кроме того, каждая из вышеперечисленных строк может завершиться сбоем и вызвать исключения, потенциально оставляя x и y в плохом, несогласованном состоянии.

Для решения этой проблемы многие классы предоставляют собственные методы swap (включая std:: vector ), которые вместо этого обменивают указатели на свои внутренние данные. Это более эффективно и может быть гарантировано никогда не потерпеть неудачу.

Но теперь у вас есть случай, когда вы можете использовать std:: swap (x, y) для некоторых типов, но вам нужно вызвать x.swap (y) для других типов. Это сбивает с толку, и это плохо для шаблонов, поскольку они не смогут поменять местами два объекта общим, согласованным способом.

Но std:: swap может быть специализированным для вызова x.swap (y) при вызове определенных типов. Это означает, что вы можете использовать std:: swap везде и (надеюсь) ожидать, что он будет хорошо себя вести.

-121--4244632-

Конечно, использование имен столбцов повышает читаемость и упрощает обслуживание. Но использование имен столбцов имеет флипсайд. Как известно, SQL допускает несколько имен столбцов с одинаковыми именами, нет гарантии, что имя столбца, введенное в методе получения resultSet, действительно указывает на имя столбца, к которому вы хотите получить доступ. В теории, использование индексных чисел вместо имен столбцов является предпочтительным, но это снижает читаемость...

Спасибо

-121--1048785-

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

<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' предлагает больше гибкости.

4
ответ дан 6 December 2019 в 08:43
поделиться

В качестве альтернативы вы можете сделать что-то вроде этого, чтобы автоматически подключать любые ссылки лайтбокса [ вставьте здесь имя галереи ], например стандартные функции 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(); });

});
1
ответ дан 6 December 2019 в 08:43
поделиться

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

Вот код (Примечание: я изменил переменную $ на 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" />

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

6
ответ дан 6 December 2019 в 08:43
поделиться

Все, что вам нужно, это лайтбокс 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>

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

1
ответ дан 6 December 2019 в 08:43
поделиться

Вот как я заставил базовый лайтбокс 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 отдельные галереи.

0
ответ дан 6 December 2019 в 08:43
поделиться
Другие вопросы по тегам:

Похожие вопросы: