Как отобразить несколько div в Colorbox в виде слайд-шоу?

Скажем, у меня есть список div, идентифицированных классом, например, '.myclass'

Внутри каждого div будет некоторый HTML-контент, а не изображение. Как мне открыть colorbox(), чтобы при нажатии на стрелки они пролистывали div?

Я просмотрел следующий пост с той же проблемой, но его решение не дает мне ни малейшего представления о том, как он заработал: Повторяющийся вопрос

Является ли colorbox правильным плагином для этого?


jquery lightbox colorbox
person jaffa    schedule 18.05.2011    source источник
comment
Я превратил свой комментарий в правильную реализацию. Я знаю, что вы уже приняли ответ, но я предлагаю вам изменить свою реализацию.... См. Мое обновление сообщения.   -  person Adam Terlson    schedule 18.05.2011

Ответы (4)


arrow_upward
2
arrow_downward

Вот лучшее, что я мог получить. Мне пришлось сгруппировать его с помощью «rel» и вызвать colorBox один раз для каждого div, который вы хотели сгруппировать.

http://jsfiddle.net/briguy37/rc5m7/

ОБНОВЛЕНИЕ

Я обновил базовую скрипку выше до решения Адама. Он прекрасно использует .each и .find, чтобы разрешить итерацию по элементам div с одним и тем же className, а не по уникальному идентификатору. Вы можете увидеть мое исходное решение здесь: http://jsfiddle.net/rc5m7/13/

person Briguy37    schedule 18.05.2011
comment
@ Адам Терлсон Согласен, +1 к вашему ответу. Обновил мою базовую скрипку до вашего решения. Другие по-прежнему могут увидеть мое исходное решение на странице jsfiddle.net/rc5m7/13. - person Briguy37; 18.05.2011

arrow_upward
6
arrow_downward

ОБНОВИТЬ:

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

http://jsfiddle.net/rc5m7/14/

HTML:

<div class="colorbox">Div #1
    <div style="display:none">
            Data#1 inside div.  This is just a test.
    </div>
</div>

<div class="colorbox">Div #2
    <div style="display:none">
            Data#2 inside div.  This is just a test.
    </div>
</div>

JS:

$(document).ready(function() {
    $('div.colorbox').each(function() {
        $(this).colorbox({
            html: $(this).find('div').html(),
            rel: 'group_1'
        });
    });
});
person Adam Terlson    schedule 18.05.2011
comment
Я пробовал их пример, но он показывает, что используется только один div. Если я попытаюсь заменить встроенный html несколькими элементами Div и атрибутом класса, это не сработает. Он по-прежнему отображает все элементы div, а не слайд-шоу. Любые идеи? - person jaffa; 18.05.2011
comment
Вы пробовали иметь более одного div с классом example8? - person Adam Terlson; 18.05.2011

arrow_upward
1
arrow_downward

Это сработало для меня отлично - я предпочитал хранить встроенный контент вместе. Просто убедитесь, что вы используете последнюю версию Colorbox (в настоящее время 1.3.19).

<a class="info_link" rel="help_msg1" href="#">Need help 1?</a>
<a class="info_link" rel="help_msg2" href="#">Need help 2?</a>

<div style="display: none;">
    <div id='help_msg1'>
        Help message 1 goes here
    </div>
    <div id='help_msg2'>
        Help message 2 goes here
    </div>
</div>

И JS выглядит так:

$(document).ready(function() {
    $(".info_link").colorbox({    
      width:"50%",
      inline: true,
      href: function () { return '#'+$(this).attr('rel') }
    });
});
person Liudas Vasaris    schedule 09.03.2012

arrow_upward
0
arrow_downward

Просто следуя решению Адама, вы можете указать функции в качестве параметров настроек, что означает, что вам не нужно будет использовать each(), который иногда может быть немного энергоемким.

HTML:

<div class="colorbox">Div #1
    <div style="display:none">
            Data#1 inside div.  This is just a test.
    </div>
</div>

<div class="colorbox">Div #2
    <div style="display:none">
            Data#2 inside div.  This is just a test.
    </div>
</div>

JS:

$(document).ready(function() {
    $('div.colorbox').colorbox({
        html: function() { return $(this).find('div').html(); },
        rel: 'group_1'
    });
});
person Wil    schedule 31.05.2011