13.08.2015 Установка Sass 21.04.2015 Смена цвета SVG изображения на странице 21.04.2015 Смена цвета SVG изображения на странице 08.04.2014 JQuery - селектор по тексту без учета регистра 10.04.2013 jQuery редактирование таблиц 13.12.2012 jScrollPane 2 - прокрутка контента вниз (autoReinitialise и scrollToBottom) 12.12.2012 jQuery 1.7 метод on - замена bind, live, delegate 16.03.2012 Мгновенный поиск результатов на JQUERY
#130

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

Как сделать увеличение изображения по клику в jQuery.

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

Естественно нам потребуется jQuery.

СМОТРЕТЬ ДЕМО

Итак структура HTML документа будет следующей.
  1. <!--Контейнер в котором мы будем отображать большую картинку-->
  2. <div id="img_container"><img src="" width="700px"></div>
  3.  
  4. <!--Контейнер с миниатюрами-->
  5. <div class="in">
  6.       <img src="http://sudo.in/sites/default/files/alien.jpg">
  7. </div>


CSS код.
  1. .in {
  2.           padding: 5px 5px 5px 5px;
  3.         }
  4. /* Отображение миниатюр */
  5.         .in img {
  6.           width:300px;
  7.           border: 5px solid #ccc;
  8.         }
  9. /* Выделение миниатюры при наведении */
  10.         .in img:hover {
  11.           width:300px;
  12.           border: 5px solid red;
  13.           cursor: pointer;
  14.         }
  15. /* Скрытый контейнер с большим изображением */
  16.         #img_container {
  17.           position: absolute;
  18.           display: none;
  19.           left: 50%;
  20.           margin-left: -350px;
  21.           z-index: 999;
  22.           top: 100px;
  23.         }
  24. /* Бордюр изображения */
  25.         #img_container img {
  26.           border: 2px solid red;
  27.         }


Ну и наконец JS, который нам потребуется:
  1. $(document).ready(function() {	
  2.  
  3. // При клике на миниатюру
  4.        $('.in img').click(function()
  5.        {
  6. // Берем свойство SRC миниатюры
  7. // (можно картинку положить в ссылку и брать значение href
  8. // для того, чтобы не грузить большие картинки изначально
  9. // а загружать сначало миниатюры и только при клике открывать
  10. //  большое изображение, что будет целесообразнее).
  11.             var imgSrc = $(this).attr("src");
  12. // Задаем свойство SRC картинке, которая в скрытом диве.
  13.             $('#img_container img').attr({src: imgSrc});
  14. // Показываем скрытый контейнер
  15.             $('#img_container').fadeIn('slow');
  16.        });
  17. // По клику на большое изображение, скрываем его
  18.        $('#img_container').click(function()
  19.        {
  20.             $(this).fadeOut();
  21.        });
  22.  
  23. });

29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Увеличение изображения по клику jQuery 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 Замена стандартного ALERT с помощью JQUERY 29.02.2012 JQUERY: как вести логи действий пользователя 29.02.2012 JQUERY: раскрывающийся список
О сайте