jQuery Colorbox - альтернатива использованию атрибута rel?

0

По-видимому, я просто полон вопросов Colorbox сегодня. (http://www.jacklmoore.com/colorbox/)

Плагин предназначен для использования в ссылках, используя атрибут rel для группировки/галереи.

Я использую LI и хочу сгруппировать их. Я попытался использовать data-rel= "group-a" и подал плагин → rel: $ (this).data('rel'), но это не похоже на это...

Любые другие идеи? Еще раз спасибо, я действительно очень ценю это.

  • 0
    Отличный плагин, чтобы узнать. Я использую его в качестве основного всплывающего / модального окна из-за его способности загружать так много типов. Тем не менее, что вы загружаете из LI? Скрипка или пример кода?
  • 0
    Попробуйте эту скрипку, jsfiddle.net/HXNfF
Показать ещё 1 комментарий
Теги:
plugins
colorbox

1 ответ

3
Лучший ответ

Во-первых, причина, по которой он не группируется, заключается в том, что вы привязываете 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, поступающей из ваших данных. К сожалению.

  • 0
    Невероятный. Это как раз то, что мне нужно, спасибо большое! Я надеюсь, что это будет полезно и другим, которые ищут это в будущем.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню