Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.07.2017, 19:46
Интересующийся
Отправить личное сообщение для lukasss Посмотреть профиль Найти все сообщения от lukasss
 
Регистрация: 06.01.2012
Сообщений: 25

Как запустить галерею 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"});

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

Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2017, 21:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 31.07.2017 в 22:29.
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2017, 21:33
Интересующийся
Отправить личное сообщение для lukasss Посмотреть профиль Найти все сообщения от lukasss
 
Регистрация: 06.01.2012
Сообщений: 25

Всё очень, здорово, спасибо. Но с одним минусом: колорбокс вызывется даже если я нажимаю на картинку, а не только на ссылку. Как это исправить?
Ответить с цитированием
  #4 (permalink)  
Старый 31.07.2017, 21:45
Интересующийся
Отправить личное сообщение для lukasss Посмотреть профиль Найти все сообщения от lukasss
 
Регистрация: 06.01.2012
Сообщений: 25

Разобрался: просто по нажатию на картинку выполнять:
$.colorbox.remove();
Ответить с цитированием
  #5 (permalink)  
Старый 31.07.2017, 22:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от lukasss
Разобрался
строка 18 пост №2
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запустить два action на ajax Янковиц Элементы интерфейса 1 20.06.2017 22:16
Как сделать для разных атрибутов id тега img? Ola Events/DOM/Window 8 09.04.2017 15:46
Ajax. Как сделать загрузку изображений, отображение, удаление как на Авито wowtschuk AJAX и COMET 1 07.03.2017 01:34
Как программно запустить поиск (CTRL+F) unkis Общие вопросы Javascript 1 14.07.2010 13:09
Как запустить скрипт после отработки другого скрипта? roman2 Общие вопросы Javascript 2 10.08.2009 01:23