Форум

lukasss · #1 (**permalink**) 31.07.2017, 19:46

Доброго времени!
Дано:

несколько тегов img:
<img src="img1.jpg" data-some-colorbox="img1-colorbox.jpg">
<img src="img2.jpg" data-some-colorbox="img2-colorbox.jpg">
<img src="img3.jpg" data-some-colorbox="img3-colorbox.jpg">

ссылка:
<a href="#" class="colorbox">Увеличить</a>

Как по нажатию на ссылку запустить colorbox.

Могу запустить одно, примерно так:
// Called directly, without assignment to an element:
$.colorbox({href:"thankyou.html"});

Но как запустить. чтобы они в галереи работали?

Заранее спасибо!

рони · #2 (**permalink**) 31.07.2017, 21:15

lukasss,

<!DOCTYPE HTML>

<html>

<head>
  <title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/i18n/jquery.colorbox-ru.js"></script>

<script>
$(function() {
    $(".colorbox").on("click", function(event) {
        event.preventDefault();
        $("[data-some-colorbox]").colorbox({
            onClosed: $.colorbox.remove,
            rel: true,
            open: true,
            href: function() {
                return $(this).attr("data-some-colorbox")
            }
        })
    })
});
</script>
</head>

<body>
<a href="#" class="colorbox">Увеличить</a>
<img src="img1.jpg" data-some-colorbox="http://embuscadoequilibrio.files.wordpress.com/2009/06/paz-no-mundo.jpg?w=480" >
 <img src="img2.jpg" data-some-colorbox="http://www.hume.vic.gov.au/files/00e10b51-ee99-40ef-a159-9fda00b58c9c/Outreach_Program_LP.jpg">
 <img src="img3.jpg" data-some-colorbox="http://advisor.museumsandheritage.com/wp-content/uploads/2015/06/Hougemont.jpg">
</body>

</html>

lukasss · #3 (**permalink**) 31.07.2017, 21:33

Всё очень, здорово, спасибо. Но с одним минусом: колорбокс вызывется даже если я нажимаю на картинку, а не только на ссылку. Как это исправить?

lukasss · #4 (**permalink**) 31.07.2017, 21:45

Разобрался: просто по нажатию на картинку выполнять:
$.colorbox.remove();

рони · #5 (**permalink**) 31.07.2017, 22:30

Сообщение от lukasss

Разобрался

строка 18 пост №2

Форум

Справочник

Discord чат

Курсы javascript