Как сделать что бы при клике на большую картинку открылся просмотр на весь экран?

Question

[Fredd Monty]

Всем привет,
Как сделать что бы при клике на большую картинку открылся просмотр картинок на весь экран?
Использую этот пример:
https://github.com/sachinchoolur/lightslider

Кто как делает?

В гугле ничего не нашел :(

Спасибо!
Хорошего всем дня!

Answer 1

[Алексей Черемисин]

Вот так например - jsfiddle.net/4m0z2grw/1

$('#lightSlider').lightSlider({
    gallery: true,
    item: 1,
    loop: true,
    slideMargin: 0,
    thumbItem: 9
});

$('#lightSlider img').click(function(){
	$('#fullimage').html("<img src='"+$(this).attr("src")+"'>").show();
	$("#myslider").hide();
});

$('#fullimage').click(function(){
	$("#myslider").show();
	$(this).hide();
});

Вот, обновил пример.

Comments

[Fredd Monty]

мм.. нет, не понял о чем вы.

[Алексей Черемисин]

При клике на картинку у вас будет отрабатываться код alert() из моего примера (этот код нужно включить сразу за инициализацией слайдера). Вам нужно в разметке страницы сделать невидимый div, который будет подменяться на img + src картинки и показываться. Вроде бы все просто.

[Алексей Черемисин]

ну, естественно все зависит от вашего html-кода страницы, и вместо alert нужно вставить например

$("#mydivforfullimage").html("<img src='"+$(this).attr("src")+"'>");
$("#mydivforfullimage").show();

[Алексей Черемисин]

Stas Fedorko: Обновил пример, обратите внимание на div fullimage и на его css.