Как вставит в страницу, картинку что бы она при клике увеличивалась?

Question

Как вставит в страницу, картинку что бы она при клике увеличивалась?

Денис

20 июля 2019

1

скрипты lightbox увеличение картинки

Добрый день, столкнулся с такой проблемой, нужно вставить в страницу картинку и что бы она при клике увеличивалась

и в категории

пример:

2 ответа

Денис

Решение

23 июля 2019 15:05

1

Большое спасибо за решение проблемы

ответить

Добавить ответ

Владимир Сергеев · Answer 1

Здравствуйте, Денис!

Откройте редактор страницы или категории.
Переведите его в режим HTML и вставьте туда код:

{* Таких фрагментов может быть несколько *}
<a href="ссылка на большое изображение" class="user-lightbox">
    <img src="ссылка на видимое изображение">
</a>

{* скрипт вставлять один раз *}
<script>
$(document).ready(function () {
    var simplelightbox = $('.user-lightbox').simpleLightbox({
    	animationSpeed: 200,
    	swipeTolerance: 10,
    	widthRatio: 0.95,
    	heightRatio: 0.95,
    	enableKeyboard: true,
    	closeText: '<i class="fa fa-times"></i>',
    	navText: ['<i class="fa fa-chevron-left"></i>','<i class="fa fa-chevron-right"></i>'],
    });
});
</script>

{* комментарии*} можете удалить – это для вас подсказки.

Денис · Answer 2

Для тех кому понадобится сделать из одной картинки маленький размер и большой

{* Таких фрагментов может быть несколько *}
<a href="ссылка на большое изображение" class="user-lightbox">
{* изменять размер видимой картинки width="84" height="61" >  *}
    <img src="ссылка на видимое изображение" width="84" height="61" > 
</a>

{* скрипт вставлять один раз *}
<script>
$(document).ready(function () {
    var simplelightbox = $('.user-lightbox').simpleLightbox({
    	animationSpeed: 200,
    	swipeTolerance: 10,
    	widthRatio: 0.95,
    	heightRatio: 0.95,
    	enableKeyboard: true,
    	closeText: '<i class="fa fa-times"></i>',
    	navText: ['<i class="fa fa-chevron-left"></i>','<i class="fa fa-chevron-right"></i>'],
    });
});
</script>