Как использовать цветовую панель плагина лайтбокса?

Я хочу показать содержимое скрытого div в световом окне при загрузке страницы.

Как это сделать с помощью цветового поля?

Что я не понимаю:

Нужно ли мне использовать их файлы CSS? Какие, где это?

Как сделать, чтобы лайтбокс появлялся при загрузке страницы?

Я пробовал это, но не повезло:

$(document).ready(function(){
    $("#div_id_i_want_to_show").colorbox({width:"50%", inline:true});
});

jquery lightbox colorbox
person Greg    schedule 07.08.2009    source источник

Ответы (5)


arrow_upward
8
arrow_downward

Ответ jyoseph был на правильном пути. Мне также пришлось сделать div видимым, прежде чем он появится (иначе он просто показывает черный экран). а затем мне пришлось скрыть div после того, как пользователь закроет световой короб.

Примечание. Мне также пришлось отредактировать файл css, чтобы он указывал на каталог, в который я помещал свои изображения.

Вот мой окончательный код:

$(document).ready(function(){
    $('#div_id_i_want_to_show').show();
    $.colorbox({'href':'#div_id_i_want_to_show', 'inline':true, 'width':'600px', 'height':'600px'});
    $(document).bind('cbox_closed', function(){
            $('#div_id_i_want_to_show').hide();
    });
});
person Greg    schedule 08.08.2009
comment
Вы можете отказаться от показа и скрытия, поместив div, который вы хотите показать, #div_id_i_want_to_show внутри скрытого div. - person mcassano; 05.10.2010

arrow_upward
5
arrow_downward

Вам нужно использовать CSS-файл ColorBox из любой темы, которую вы хотите. В загрузку включено 5. См. папки Пример1, Пример2, Пример3, Пример4, Пример5. У каждого будет файл css и папка с изображениями. Вы также можете создать свою собственную тему, если хотите.

Чтобы открыть ColorBox при загрузке страницы, вам нужно использовать публичный метод: $.colorbox()

Рабочий пример: http://jsbin.com/uficu

В этом примере у меня есть html: <div id="content">Hello from JSBin</div>

И общедоступный метод: $.colorbox({href:'#content', open:true, inline:true})

Ознакомьтесь с документацией: http://colorpowered.com/colorbox/

person jyoseph    schedule 08.08.2009

arrow_upward
0
arrow_downward

Попробуйте открытый вариант Олли.

$(".el").colorbox({open:true})
person johnnymire    schedule 28.11.2009

arrow_upward
0
arrow_downward

Вот уловка. Для этого не нужно добавлять javascript (или перехватывать событие закрытия colorbox).

jquery.colorbox перемещает ваш встроенный контент в структуру, которую он создает из корня html> body перед его отображением, и перемещает его обратно, когда он закрыт. Это странное поведение, IMO, но воспользуйтесь этим и примените свое «правило скрытия» соответствующим образом.

<style>
 #div_id_i_want_to_show { display: block; ...your other style rules... }
 #divParent #div_id_i_want_to_show { display: none; }
<style>
<div id='parent'><div id='div_id_i_want_to_show'>...

В качестве альтернативы, инвертируйте правила и поместите «правило раскрытия», которое зависит от элемента, определенного в цветовой рамке.

<style>
 #div_id_i_want_to_show { display: none; ...your other style rules... }
 .colorbox #div_id_i_want_to_show { display: block; }
<style>
<div id='div_id_i_want_to_show'>...

Да, еще один вариант — сохранить ваш #div_id_i_want_to_show внутри оболочки .hiddenDiv.

<style>
 #div_id_i_want_to_show { ...your style rules... }
 .hiddenDiv { display: none; }
<style>
<div class='.hiddenDiv'><div id='div_id_i_want_to_show'>...
person Shannon    schedule 22.11.2010

arrow_upward
0
arrow_downward

При нажатии какой-либо кнопки emailPopup

<div class="emailUse">
    <a class="emailPopup" href="#emailPopup_content">Mail Me</a>
</div>

Вы хотите открыть всплывающее окно с идентификатором emailPopup_contentusing colorbox

<div style='display: none'>
    <div id='emailPopup_content'>
    Hi user,
    Thank you!
    </div>
</div>

Все, что вам нужно сделать, это написать jQuery как:

$(document).ready(function() {
    $('.emailPopup').colorbox({inline:true, width:"380px",height:"410px"});
});

Объяснение: скрытый div jQuery emailPopup_content отображается во всплывающем окне, как указано в разделе href

НЕ ЗАБУДЬТЕ включить:

<head>
    <link rel="stylesheet" href="colorbox.css">
    <script src="jquery.min.js"></script>
    <script src="jquery.colorbox-min.js"></script>
</head>

http://www.jacklmoore.com/colorbox/jquery.colorbox.js http://www.jacklmoore.com/colorbox/example4/colorbox.css

person KNU    schedule 29.09.2015