По-видимому, я просто полон вопросов Colorbox сегодня. (http://www.jacklmoore.com/colorbox/)
Плагин предназначен для использования в ссылках, используя атрибут rel для группировки/галереи.
Я использую LI и хочу сгруппировать их. Я попытался использовать data-rel= "group-a" и подал плагин → rel: $ (this).data('rel'), но это не похоже на это...
Любые другие идеи? Еще раз спасибо, я действительно очень ценю это.
Во-первых, причина, по которой он не группируется, заключается в том, что вы привязываете colorbox к показу, используя прямые ссылки HTML на действие click. Это индивидуально, когда вы запускаете один экземпляр, используя $.colorbox({}), определяющий HTML. То, что вы хотите сделать, это привязать его ко всем элементам, с которыми вы хотите работать, и использовать параметры для указания необходимых ему параметров. Другая вещь, о которой следует помнить, - это группировка, работающая с классами, поэтому вам нужно убедиться, что ваши элементы имеют имя класса, в котором вы группируетесь.
Код:
$(document).ready(function () {
$('.inline').colorbox({
href: function() { return '#'+$(this).data('modal')},
rel: function() { return $(this).data('rel')},
inline: true,
width: "70%"
});
});
Обновленная скрипка: http://jsfiddle.net/kDK3s/1/
Поскольку вы работаете с контентом на странице, вы можете использовать href вместе со встроенной опцией, чтобы указать, что используемое содержимое поступает с текущей страницы. Вы также можете использовать функцию для любого из параметров доступа к элементу и возврата ваших данных. Вы увидите, что href исходит из модальности данных, но имеет знак хеша, добавленный в функцию, и rel использует тот же метод, чтобы получить значение rel данных для группировки в соответствии с именем класса.
Обновление. Кроме того, если вы хотите, чтобы в заголовке не было указано "изображения", вы можете избавиться от него, используя текущую опцию "current:", и вы можете дополнительно указать заголовок, используя "title:" something "" который вы также можете извлечь из атрибута данных, если хотите.
Обновленная скрипка для этого: http://jsfiddle.net/kDK3s/2/
Редактировать: я нажал кнопку POST слишком рано, прежде чем заканчивать объяснение. Я также обновил ссылку на скрипку, чтобы указать на правильную версию с REL, поступающей из ваших данных. К сожалению.