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

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

0 голосов
/ 18 мая 2011

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

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

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

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

Ответы [ 4 ]

6 голосов
/ 18 мая 2011

ОБНОВЛЕНИЕ:

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

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'
        });
    });
});
2 голосов
/ 18 мая 2011

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

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

UPDATE

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

1 голос
/ 09 марта 2012

Это сработало для меня отлично - предпочитал хранить встроенный контент все вместе. Просто убедитесь, что вы используете последнюю версию 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') }
    });
});
0 голосов
/ 01 июня 2011

Просто следуя решению Адама, вы можете фактически предоставить функции в качестве параметров настройки, что означает, что вам не придется использовать 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'
    });
});
...