Увеличение изображения по клику

Статья устарела! Более интересное решение тут!

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(&quot;src&quot;);
    // Задаем свойство 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>

 

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *