Как при нажатии открывать изображение в окошке?

Question

[Сергей Панов]

Доброго времени суток, друзья. Установил Slick слайдер у себя, настройки такие:

<script type="text/javascript">
        $('.sl').slick({
          slidesToShow: 3,
          slidesToScroll: 1,
          autoplay: true,
          prevArrow: '<div class="prevg"><img src="../img/icon/arrow_prew.png"></div>',
          nextArrow: '<div class="nextarr"><img src="../img/icon/arrow_next.png"></div>',
          autoplaySpeed: 2000,
        });
        </script>

Создал область со слайдами, где есть изображения. Но они не кникабельны. Как сделать, чтобы картинки в слайде открывали в модальном окне ?

Заранее большое спасибо!

Answer 1

[Владимир Проскурин]

Установить плагин просмотра картинок в модальном окне, типа fancybox или что полегче.

Answer 2

[Максим]

Здравствуйте!
Можно сделать это, как модальное окно с затемнением фона. Что-то типо этого:
HTML:

<p id="test">
			<img src="1.jpg" alt="Image" title="Image" width="200" id="img">
		</p>

JS(jQuery):

$(document).ready(function () {
        $("#img").on("click" , function (event) {
			var ready = 0
            $(event.target).parent().css("text-align", "center");
            $(event.target).animate ({
                width: $(event.target).width() * 5,
                height: $(event.target).height() * 5,
            } , 3000);
			var ready = 1
			if (ready == 1) {
				$('body').css("background", "#616161")
			}
        });
    });