ProfiPHPProfiPHP
Категория: jQuery

Увеличение выбранного изображения при нажатии

Опишем самый простой способ увеличения выбранного изображения с помощью библиотеки Jquery.

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

Обязательно перед использованием необходимо подключить библиотеку jQuery.

Для реализации открытия изображения необходимо добавить в таблицу стилей следующие правила:
.resize img{ cursor: pointer }
.popup{ position: fixed; height: 100%; width: 100%; top: 0; left: 0; display: none; text-align: center }
.popup_bg{ background: rgba(0,0,0,0.4); position: fixed; 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 }
И добавить js код:
<script type="text/javascript">
$(document).ready(function(e) {
$(".resize img").click(function(){
var src = $(this).attr('src');
$("body").append("<div class='popup'><div class='popup_bg'></div><img src="+src+" class='popup_img' /></div>");
$(".popup").fadeIn(500);
$('.popup').on('click', function(){
$(".popup").fadeOut(500);
setTimeout(function() {
$(".popup").remove();
}, 500);
});
});
});
</script>
Поскольку нам не нужно, чтобы открывались все изображения на сайте, необходимый блок, где изображения должны открываться, необходимо заключить в блок "resize":
<div class="resize">
...
...
...
</div>
Если вы хотите реализовать на сайте увеличения изображений очень быстро - просто добавьте перед тегом "</body>" следующий код:
<style type="text/css" />
.resize img{ cursor: pointer }
.popup{ position: fixed; height: 100%; width: 100%; top: 0; left: 0; display: none; text-align: center }
.popup_bg{ background: rgba(0,0,0,0.4); position: fixed; 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 }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".resize img").click(function(){
var src = $(this).attr('src');
$("body").append("<div class='popup'><div class='popup_bg'></div><img src="+src+" class='popup_img' /></div>");
$(".popup").fadeIn(500);
$('.popup').on('click', function(){
$(".popup").fadeOut(500);
setTimeout(function() {
$(".popup").remove();
}, 500);
});
});
});
</script>
И не забудьте контент заключить в контейнер "<div class="resize">...</div>".

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

Имя:
Текст комментария: