Увеличение изображения по клику
Статья устарела! Более интересное решение тут!
UPD от 04.05.2016 Если у вас нет желания разбираться с кодом, то приглашаю к тестированию моего плагина Litezoom!
Изображения на сайтах встречаются довольно часто и при этом они бывают больших размеров, но дизайн сайта далеко не всегда позволяет разместить её в полном формате. Поэтому нужно придумать способ, который бы позволял увеличивать их. Способов множество, но мне нравится на jquery.
Итак, предположим у нас есть страничка:
/* Блок в котором мы будем отображать большую картинку */ <div id="img_big_block" style="display: none;"><img src="zoo2394.jpg" width="800px"></div> /* Блок с картинкой */ <div class="img_block"> <img src="zoo2394.jpg"> </div>
Наведем красоту и пропишем стили для нашей картинки:
.img_block { padding: 5px 5px 5px 5px; } /* Стиль картинки на странице */ .img_block img { width:300px; border: 2px solid #ccc; } /* Стиль картинки на странице при наведении */ .img_block img:hover { width:300px; border: 2px solid #D4DEE8; cursor: pointer; } /* Скрытый контейнер */ #img_big_block { position: absolute; display: none; left: 50%; margin-left: -350px; z-index: 999; top: 100px; border: 1px solid #D4DEE8; }
Осталось написать скрипт, отвечающий за увеличение картинки:
$(document).ready(function() { // Обрабатывает клик на картинке $('.img_block img').click(function() { // Получаем адрес картинки var imgAddr = $(this).attr("src"); // Задаем свойство SRC картинке, которая в скрытом диве. $('#img_big_block img').attr({src: imgAddr}); // Показываем скрытый контейнер $('#img_big_block').fadeIn('slow'); }); // Обрабатывает клик по большой картинке $('#img_big_block').click(function() { $(this).fadeOut(); }); });
Вот что у нас получилось
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”VeJmmO” default_tab=”result” user=”AmateR”]See the Pen <a href=’http://codepen.io/AmateR/pen/VeJmmO/’>VeJmmO</a> by Aleksei (<a href=’http://codepen.io/AmateR’>@AmateR</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Пример полностью:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // Обрабатывает клик на картинке $('.img_block img').click(function() { // Получаем адрес картинки var imgAddr = $(this).attr("src"); // Задаем свойство SRC картинке, которая в скрытом диве. $('#img_big_block img').attr({src: imgAddr}); // Показываем скрытый контейнер $('#img_big_block').fadeIn('slow'); }); // Обрабатывает клик по большой картинке $('#img_big_block').click(function() { $(this).fadeOut(); }); }); </script> <style type="text/css"> .img_block { padding: 5px 5px 5px 5px; } /* Отображение миниатюр */ .img_block img { width:300px; border: 2px solid #ccc; } /* Выделение миниатюры при наведении */ .img_block img:hover { width:300px; border: 2px solid #D4DEE8; cursor: pointer; } /* Скрытый контейнер с большим изображением */ #img_big_block { position: absolute; display: none; left: 50%; margin-left: -350px; z-index: 999; top: 100px; border: 1px solid #D4DEE8; } </style> </head> <!-- Блок в котором мы будем отображать большую картинку --> <div id="img_big_block"><img src="" width="800px"></div> <!-- Блок с миниатюрами --> <div class="img_block"> <img src="zoo2394.jpg"> </div> </html>