Как запустить галерею Colorbox на основе атрибутов изображений
Доброго времени!
Дано: несколько тегов 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"}); Но как запустить. чтобы они в галереи работали? Заранее спасибо! |
colorbox ссылка из атрибута
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>
|
Всё очень, здорово, спасибо. Но с одним минусом: колорбокс вызывется даже если я нажимаю на картинку, а не только на ссылку. Как это исправить?
|
Разобрался: просто по нажатию на картинку выполнять:
$.colorbox.remove(); |
Цитата:
|
| Часовой пояс GMT +3, время: 03:12. |