slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна4 / 5
 
Автор: Администратор
Просмотров: 26157
Теги: javascript, img, jQuery

В этой статье мы расскажем о том, как сделать модальное окно с увеличенным изображением.

Порой появляется необходимость сделать увеличение изображения при нажатии на него во всплывающем окне. В итоге получаем увеличенную картинку с затемненным фоном.

Сделать такое очень просто, используя jQuery библиотеку. Нам понадобятся три файла - index.html, файл стилей в папке css с названием template.css, и файл скриптов popup_img.js. А ещё три изображения в папке images

Для начала напишем HTML-разметку страницы, не забываем подключить файл стилей и библиотеку jQuery:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Страница</title>
	<link rel="stylesheet" href="/../12/css/template.css" type="text/css" />
	<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>
	<script type="text/javascript" src="/js/popup_img.js"></script>
</head>
<body>
	<img src="/images/image1.jpg" class="image" alt="Пейзаж" />
	<img src="/images/image2.jpg" class="image" alt="Пейзаж" />
	<img src="/images/image3.jpg" class="image" alt="Пейзаж" />
</body>
</html>

Так же добавляем наши изображения на страницу. У каждого изображения добавляем класс image, при помощи которого мы в будущем будем обращаться в скрипте к изображениям.

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

$(document).ready(function() { // Ждём загрузки страницы
	
	$(".image").click(function(){	// Событие клика на маленькое изображение
	  	var img = $(this);	// Получаем изображение, на которое кликнули
		var src = img.attr('src'); // Достаем из этого изображения путь до картинки
		$("body").append("<div class='popup'>"+ //Добавляем в тело документа разметку всплывающего окна
						 "<div class='popup_bg'></div>"+ // Блок, который будет служить фоном затемненным
						 "<img src='"+src+"' class='popup_img' />"+ // Само увеличенное фото
						 "</div>"); 
		$(".popup").fadeIn(800); // Медленно выводим изображение
		$(".popup_bg").click(function(){	// Событие клика на затемненный фон	   
			$(".popup").fadeOut(800);	// Медленно убираем всплывающее окно
			setTimeout(function() {	// Выставляем таймер
			  $(".popup").remove(); // Удаляем разметку всплывающего окна
			}, 800);
		});
	});
	
});

Здесь всё описывают комментарии. Следующий шаг - добавить стили, для них я не буду описывать комментарии, подразумевается, что CSS вы знаете хорошо.

body {
	margin:0;
}

.image {
	margin:30px; 
	float:left;
	cursor:pointer;
	max-height:100px;
}

.popup {
	position: absolute;
	height:100%;
	width:100%;
	top:0;
	left:0;
	display:none;
	text-align:center;
}

.popup_bg {
	background:rgba(0,0,0,0.4);
	position:absolute;
	z-index:1;
	height:100%;
	width:100%;
}


.popup_img {
	position: relative;
	margin:0 auto;
	z-index:2;
	max-height:94%;
	max-width:94%;
	margin:1% 0 0 0;
}

Результат работы смотрите на демо-странице:

demo

Исходники примера можете скачать по ссылке ниже:

download

Комментарии   

+5 # Булат 24.07.2016 22:25
Спасибо, ваш материал мне очень пригодился!
Ответить | Ответить с цитатой | Цитировать
+1 # Andrew_x 07.11.2016 18:59
Спасибо, все работает. Только затемненный фон и увеличенная картинка открываются не в том месте страницы, где миниатюра, а в самом верху страницы. Т.е. если миниатюра располагается внизу страницы, на 2-м, 3-м экране, то при нажатии на нее, фон с увеличенной - открываются вверху на 1-м экране, что не сразу и заметно, если не прокрутить вверх.
Это как-то можно исправить?
Ответить | Ответить с цитатой | Цитировать
+3 # Alexander 31.01.2017 20:15
Цитирую Andrew_x:
Спасибо, все работает. Только затемненный фон и увеличенная картинка открываются не в том месте страницы, где миниатюра, а в самом верху страницы. Т.е. если миниатюра располагается внизу страницы, на 2-м, 3-м экране, то при нажатии на нее, фон с увеличенной - открываются вверху на 1-м экране, что не сразу и заметно, если не прокрутить вверх.
Это как-то можно исправить?

Нужно position: relative; поменять на fixed у popup_bg и popup_img и выравнять изображение через margin в popup_img
Ответить | Ответить с цитатой | Цитировать
+1 # Константин 05.03.2017 17:53
Отличный скрипт! Спасибо!!!

Только высота изображений изначальная (перед кликом) уменьшилась в раза 3... Буду благодарен за помощь.
Ответить | Ответить с цитатой | Цитировать
0 # zero648 08.05.2017 23:56
У меня тоже картинки поначалу сломались, вылечил убрав из файла .css класс .image
Ответить | Ответить с цитатой | Цитировать
0 # zero648 08.05.2017 23:52
Все работает, только вот, если страница со скроллом и картинки внизу, то как бы результат не видно, картинки выводятся вверху страницы.
Лечение: в файле .css в свойствах класса .popup нужно заменить position:absolute; на position: fixed;
Ответить | Ответить с цитатой | Цитировать
0 # Sergio 14.05.2017 18:38
скрипт на скрытие изображения и возврат к нормальной странице не работают почему то, когда щёлкаешь по затемнённому фону, картинка так и остаётся висеть, пока страницу не перезагрузишь
Ответить | Ответить с цитатой | Цитировать
0 # Администратор 15.05.2017 18:30
Цитирую Sergio:
скрипт на скрытие изображения и возврат к нормальной странице не работают почему то, когда щёлкаешь по затемнённому фону, картинка так и остаётся висеть, пока страницу не перезагрузишь


не работает в демке? Какой браузер? Если не работает в вашем коде - что-то сделали не так
Ответить | Ответить с цитатой | Цитировать
+1 # Weltmeister 24.05.2017 17:49
Скрипт рабочий, подтверждаю. Спасибо, пригодился. Но есть пара вопросов:
1. А крестик закрытия подскажите как приделать?
2. Как сделать закрытие при клике по самой картинке? Сейчас закрывается только при клике по фону.
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
  • JesseBLamurb
    3.00
  • Lambadacit
    3.00
  • LiStudio16
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Как подключить на свой сайт jQuery

Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.

Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее
Ajax-форма обратной связи на JQuery

В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.

Теги:

javascript, form, jQuery, ajax, onclick

Комментариев: 0 Подробнее
Простейшие табы(вкладки) контента на jQuery

В этой статье мы реализуем вкладки с любым содержимым при помощи библиотеки jQuery.

Теги:

javascript, jQuery, tabs, tab

Комментариев: 0 Подробнее

Последнее с форума

форма на DataLife Engine 1 день 9 ч. назад
synt аватар
Здравствуйте! Подскажите модуль или решение для создания сложных форм с капчей и возможностью задава...
Перейти в тему
Frontend Разработчик, Москва 1 мес. 3 нед. назад
porohinaio@mail.ru аватар
INMYROOM это контентный проект про интерьеры и маркетплейс дизайнерской мебели с посещаемостью более...
Перейти в тему
anzhelika_bell аватар
Обязанности: Верстка web-интерфейсов по готовым макетам, исправление дефектов верстки. Требования: ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.