Image-lightbox плагин как правильно настроить?

Question

[Novamoscow]

Еще плохо знаю JQ и JS. Прошу помощи.
Задача простая, открыть картинку при клике на полный экран. (плюс хочу при нажатии на одну картинку, открыть галлерею из нескольких)

Нашел для этого дела вот такой вот плагин.
https://osvaldas.info/image-lightbox-responsive-to...

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

Можно вас попросить помочь с написание простого примера (увеличение одной картинки при клике)

Вот такой пример HTML кода из документации
<img src="picture.jpg" id="imagelightbox" />

Пример CSS

#imagelightbox
{
    position: fixed;
    z-index: 9999;
 
    -ms-touch-action: none;
    touch-action: none;
}

И пример самого JS

<script>
    $( function()
    {
        $( 'a' ).imageLightbox();
    });
</script>

Answer 1

[Карен Мнацаканян]

Правильный пример

<a href="picture.jpg">
<img src="picture.jpg" />
</a>
<script>
    $( function()
    {
        $( 'a' ).imageLightbox();
    });
</script>

Comments

[Novamoscow]

Можно добавить только одну картинку ? Например изменив ей размер. а когда нажмешь она уже откроется в полном размере

[Карен Мнацаканян]

Novamoscow: сколько хотите столько и можно добавить , в тег img ставьте маленькая картинка а в href большая

[Novamoscow]

Карен Мнацаканян: не сработал код, картинка открывается в новом окне, не используя плагин =(

[Саша]

Novamoscow: возможно не инициализировался.
сам плагин подключили перед js файлом в котором объявляете его?

[Novamoscow]

Саша: вроде бы все впорядке ( у вас работает то что выше написанно ?

[Саша]

Novamoscow: закиньте код на codepen.io/pen и будем вместе смотреть

[Novamoscow]

Саша: codepen.io/novamoscow/pen/yMPdmZ а как сам плагин подключить и картинку саму залить ?

[Саша]

Novamoscow:
- подключить библиотеку
joxi.ru/brRnW3LU9XJWr1
joxi.ru/4AkE4Vvcz3yzmq

а картинку на любой хостинг и прямую ссылку на изображение в код

[Novamoscow]

Саша: все подключил через свой хостинг codepen.io/novamoscow/pen/yMPdmZ

[Саша]

Novamoscow: скиньте пожалуйста ссылку на источник плагина лайтбокса

[Саша]

Novamoscow: мой вам совет, используйте другой плагин))

Answer 2

[Саша]

Например этот лайтбокс лучше и проще - magnific-popup

Comments

[Novamoscow]

Использовал этот плагин, все завелось после проб и ошибок. У меня такая штука случилась, когда писал плагин обернутый в $(document).ready(function(), то он не работал, как только убрал, все понеслось. Почему так ?

[Саша]

Novamoscow: нужно видеть код ДО и ПОСЛЕ
скорее всего синтаксическая ошибка была.
я большинство плагинов подключаю как раз в $(document).ready(function(){

[Novamoscow]

Саша: а для чего эта запись нужно?

[Саша]

Novamoscow: условие срабатывающие когда браузер закончил загрузку ДОМ