Как использовать плагин лайтбокса? - PullRequest
Новая
       9

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

9 голосов
/ 08 августа 2009

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

Как я могу сделать это с color box ?

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

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

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

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

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

Ответы [ 5 ]

8 голосов
/ 08 августа 2009

ответ Джозефа был на правильном пути. Я также должен был сделать 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();
    });
});
5 голосов
/ 08 августа 2009

Вам нужно использовать файл ColorBox css из любой темы, которую вы хотите. Есть 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/

0 голосов
/ 29 сентября 2015

При нажатии на какую-то кнопку emailPopup

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

Вы хотите открыть всплывающее окно с идентификатором emailPopup_content, используя 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"});
});

Объяснение: jQuery скрытый div 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

0 голосов
/ 22 ноября 2010

Вот трюк. Для этого не нужно добавлять 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'>...

С другой стороны, инвертируйте правила и поместите «раскрывающее правило», которое зависит от элемента, определенного в colorbox. 

<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'>...
0 голосов
/ 28 ноября 2009

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

$(".el").colorbox({open:true})
...