Как по событию click запустить lightbox функцию?

Question

[Cheizer]

Хочу по клику на элемент запускать библиотеку ilightbox, чтобы открыть изображение с её помощью.
Вот как делаю:

$(document).ready(function(){
		
  $(".ilightbox").click(function() {
    //тут я еще хочу кое что сделать

        $(this).iLightBox({
           skin: 'metro-white',
           maxScale: 2,
        });
     });

});

<a href="/big-images.jpg" class="ilightbox">
 <img src="/images.jpg" alt="">
</a>
<a href="/big-images.jpg" class="ilightbox">
 <img src="/images.jpg" alt="">
</a>

Пробовал bind click, тоже не работает, THIS работает если обернуть в each функцией, но each это не click.

Как по click функции с this вместо селектора, запускать библиотеки типа lightbox?
Даже поднял на codepen https://codepen.io/Cheizer/pen/dJVpJr

Answer 1

[Дмитрий Щеголихин]

Дело в том что при клике на ссылку срабатывает стандартное поведение - собственно клик по ссылке. Чтобы избежать его и заставить навешивать свое - нужно предотвратить стандартное поведение, например использовать e.preventDefault();

$(".ilightbox").click(function(e) {
      e.preventDefault();
            
      // будет работать!
    });

Рабочий пример https://codepen.io/gdemad/pen/EowmaG

PS: Но нужно иметь ввиду что при каждом клике на элемент каждый раз будет навешиваться функционал iLightBox на один и тот же элемент, а это не очень правильно. Тут уже с архитектурным решением что-то нужно думать/менять.

Comments

[Cheizer]

Ураааа! Спасибо, действительно так просто оказалось :) Благодарю! Низкий поклон. Мне это нужно было для того что бы и для мобилки клик работал хорошо, с вашей помощью теперь работает это :)

$(document).on('touchstart click', '.ilightbox', function (e) {
e.preventDefault();
$(this).iLightBox();
});

Answer 2

[Станислав]

Я обычно не парюсь, тупо по необходимости создаю элемент script и подгружаю библиотеку. К примеру с plupload, он по сути нужен только тогда когда кто то хочет загрузить файл, ну вот и подключаю скрипт тогда когда это необходимо.

Решение напрашивается само, кликнул -> создал script с нужным src и выставил его перед /body, вот собственно и все и никаких релоадов и прочего не нужно

Comments

[Cheizer]

честно говоря не понял :( у меня динамичный контент, много рисунков, и как их просмотреть ilightbox но не так как обычно, по классу, мол все рисунки с классом ilightbox просматривай с помощью библиотеки.
$('.ilightbox').iLightBox();
так работает это понятно,
но мне нужно через click функцию тоже самое

$(".ilightbox").click(function() {
        $(this).iLightBox({
           skin: 'metro-white',
           maxScale: 2,
        });
     });

Вот так не работает :(

[Станислав]

Роман Кузнецов, я с библиотекой не знаком, но всего скорее там должны быть стандартные функции reload/refresh, думаю их и нужно использовать. Просто не очень понятно что именно надо, ведь $('.ilightbox').iLightBox(); и так инициализирует клик по картинке

[Cheizer]

Станислав, библиотека любая не работает через клик, суть не в ней, суть в том что я хочу запустить ее по клику, это нужно для того что бы сделать дополнительные действия. да хоть alert запустить, но на данный момент мне нужно через клик функцию это сделать что бы на мобильном клик работал хорошо,

$(document).on('touchstart click', '.ilightbox', function () {
$(this).iLightBox();
});

но вот не работает так :(