Я пытаюсь сделать этот плагин jQuery => работа http://leandrovieira.com/projects/jquery/lightbox/ с несколькими галереями на той же странице.
Проблема, каждый раз я нажимаю на изображение из определенной галереи, я получаю все изображения из всех галерей на той же странице. Скажем, у меня есть 2 галереи 6 фотографий каждый. Если я нажму на рис. из галереи 1, то я буду видеть рисунки из галереи 2 также.
Я попробовал что-то вроде этого, чтобы заставить его работать, но никакой успех:
К сожалению, это не работает!!!
Каково обходное решение для этого?
Еще раз то, что я пытаюсь выполнить, должно смочь просмотреть изображения в их надлежащей галерее. Я не хочу, чтобы все рисунки рассматривались как одну галерею.
С очень немногими изменениями я сделал эту работу с несколькими галереями на одной странице.
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">
Я изменил стиль из идентификатора в класс.
Это означает, что 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 будет уникальным для каждой галереи на странице.
Надеюсь, это приведет вас на правильный путь; в противном случае существуют десятки других подключаемых модулей, которые можно использовать.
Для иллюстрации важности специализации шаблонов функций рассмотрим функцию шаблона 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
везде и (надеюсь) ожидать, что он будет хорошо себя вести.
Конечно, использование имен столбцов повышает читаемость и упрощает обслуживание. Но использование имен столбцов имеет флипсайд. Как известно, 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' предлагает больше гибкости.
В качестве альтернативы вы можете сделать что-то вроде этого, чтобы автоматически подключать любые ссылки лайтбокса [ вставьте здесь имя галереи ], например стандартные функции 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(); });
});
Это патч для ответа Бена, для тех, кто хочет использовать несколько галерей или просто добавить эффект лайтбокса к изображению, используйте его внутри своего тега ...
Вот код (Примечание: я изменил переменную $
на 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" />
Надеюсь, это поможет!
Все, что вам нужно, это лайтбокс 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», указав желаемое имя группы галереи, и оно буду работать как по волшебству. Не нужно кодировать ничего лишнего
Вот как я заставил базовый лайтбокс 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 отдельные галереи.