Увеличение изображения по клику – Как сделать, чтобы при нажатии на маленькое фото оно увеличивалось бы? — Вопрос от SuperBook

Увеличение картинки при клике

Вы здесь: Главная - JavaScript - JavaScript Скрипты - Увеличение картинки при клике

Увеличение картинки при клике

Описание: Очень простой скрипт на языке JavaScript, который требуется очень часто. Действительно, обычно картинки на сайте обладают небольшим размером, чтобы не увеличивать их до такого размера, когда это смотрится уже, как минимум, некрасиво. Однако, очень часто пользователи хотят увеличить картинку, и вот для их удобства и был сделан этот простой скрипт.

Результат: Кликните на любую фотографию. Если кликните ещё раз, то она вернётся в исходное состояние (P.S. На фото не я, а мой одногруппник).

Фото 1
Фото 1
Фото 2
Фото 2

Код JavaScript (вставлять между тегами <head> и </head>):

<script language = "JavaScript">
var bigsize = "300"; //Размер большой картинки
var smallsize = "150"; //Размер маленькой картинки
function changeSizeImage(im) {
  if(im.height == bigsize) im.height = smallsize;
  else im.height = bigsize;
}
</script>

Код HTML (вставлять между тегами <body> и </body>):

<table align="center">
  <tr>
    <td align="center">
      <img src="foto1.jpg" />
      <br />
      <b>Фото 1</b>
    </td>
    <td align="center">
      <img src="foto2.jpg" />
      <br />
      <b>Фото 2</b>
    </td>
  </tr>
</table>
  • Фото 2 Создано 13.12.2010 13:20:40
  • Фото 2 Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

Увеличение изображения на сайте, увеличение картинки на сайте

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

Предлагаю вам способ увеличения картинки на сайте без использования каких-либо скриптов, а исключительно с помощью html.

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

Увеличение изображения на сайте
1 способ – увеличение изображения на сайте при наведении курсора

Очень простой, ну наипростейший способ, честное слово. Надо добавить следующий код к свойствам картинки:

onmouseover="this.style.width='значение ширины большого изображения px'"

Полностью это будет выглядеть так

<img src="ссылка на изображение" />

<img src="http://vkpluss.ru/wp-content/uploads/2015/02/киска.jpg" alt="увеличение изображения на сайте" />

Вот результат и код для картинки с киской.
При наведении курсора мыши картинка увеличивается.
Надеюсь, вы понимаете, что все это делается в текстовом редакторе.

2 способ – увеличение картинки на сайте при клике мыши

Способ аналогичный, просто onmouseover надо заменить onclick. К свойствам картинки добавляется следующий код:

style="width: 'значение ширины маленького изображения px;
border:2px solid black;" 

Полностью это будет выглядеть так

<img src="ссылка на изображение " />

<img src="http://vkpluss.ru/wp-content/uploads/2015/02/киска.jpg" alt="увеличение картинки на сайте"/>

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

Надеюсь вам не показалось сложным использовать такие способы – с помощью html – сделать увеличение изображения на сайте.

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

Читайте также:

http://vkpluss.ru/skripty/uvelichenie-izobrazheniya-na-sajte.htmlНадеждаСкрипты и кодыувеличение изображения на сайте,увеличение картинки на сайте

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

Надежда Трофимова[email protected]Блог vkpluss.ru

Highslide JS. Увеличение картинки во всплывающем окне при щелчке мышью


Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Пример использования этого варианта посмотрите, кликнув на ссылку «демо-пример» или картинку чуть ниже. Изображение в натуральном размере плавно откроется в новом окне. Его можно перемещать курсором мыши. Внизу можно размещать описание и комментарии к изображению. Клик по перекрестию стрелок внизу справа откроет изображение на весь экран. При втором клике картинка примет первоначальные размеры.


  • Для корректной работы эффекта необходимо включить поддержку JavaScript в вашем браузере!
  • Папка highslide является универсальной для всех эффектов Highslide JS, поэтому её стоит закачать один раз на свой сайт. Не беспокойтесь, много места она не занимает, всего-то 887кб.

Изображение можно перемещать. При клике картинка принимает первоначальные размеры.

Html-код этого эффекта представлен в таблице внизу:



<html>
<head>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css">
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript">
	hs.graphicsDir = 'highslide/graphics/';
	hs.wrapperClassName = 'wide-border';
</script>
</head>
<body>
<div align="center">
<a href="images/002.jpg">
	<img src="images/002.jpg" alt="Кристина Агилера"></a>
<div>Кристина Агилера</div>
</div>
</body>
</html>


         Пропись стилей  (обязательно в head).

         Подключение скриптов (можно располагать как в head так и в body).

         Название картинки.

         Размеры картинки до увеличения.

Изображения с натуральными размерами поместите в папку images вашего сайта.

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Распакуйте архив в отдельную папку. Папка highslide_JS содержит две папки - highslide и images, а так же файл demo.html. Откройте последний в браузере, проверьте, всё должно изумительно работать. Закачайте папку highslide_JS на сервер и после правильного выполнения всех действий с не меньшим успехом всё будет функционировать и на вашем сайте.

Источник урока - сайт //highslide.com/. На этом сайте можно скачать бесплатно архив со многими эффектами. Автор позволяет использовать свои разработки в нескольких вариантах. Вот выдержка из перевода: «Вы хотите использовать Highslide для персонального сайта, сайта школы, фотоальбома Вашей семьи или некоммерческой организации? Тогда вам не нужно разрешение автора, просто используйте Highslide».

Кто не ищет лёгких путей и всегда идёт вперёд, стремится к совершенству, пожалуйста, дерзайте.


Как убрать логотип в верхней левой части изображения?

В комментариях меня просили пояснить как можно удалить логотип «Powered by Highslide JS» во всех вариантах Highslide.

  1. Определите, какой файл ява-скрипта работает в конкретном случае. В нашем варианте, как понятно из кода, принимает участие файл highslide.js;
  2. Откройте папку highslide, в ней найдите и откройте файл highslide.js;
  3. В 17-й строке
    creditsText : 'Powered by <i>Highslide JS</i>',
    удалите участок кода
    Powered by <i>Highslide JS</i>
    В итоге, строка должна выглядеть так:
    creditsText : ' ',
  4. Всё! Логотип исчезнет!

Успехов в освоении материала. До новых встреч. L.M.

Как сделать увеличение картинки по клику в текстовом редакторе

5 февраля 2018

Советы

Итак, у нас есть страница, на ней что то размещено и есть картинка. Необходимо чтобы картинка была небольшого размера но по клику на нее мышкой, открывалась крупная картинка, и не просто открывалась, а красиво всплывала. Сделать это не сложно, в системе управления сайтом TSAdmin это реализовано с помощью класса "colorbox".

 

Обо всем подробнее и по порядку.

 

Предположим что вас уже есть страница и в ней уже размещена картинка. Примерно это может выглядеть так:

 

 

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

 

Переходим в систему управления сайтом. Находим страницу где размещена данная информация. В текстовом редакторе находим где расположена картинка.

 

 

А теперь нужно понять, какая картинка должна открываться по клику, если эта же (т.е. по умолчанию была загружена картинка в большом разрешении, и в текстовом редакторе уменьшен ее размер при установке в текст), то необходимо скопировать ее адрес: 

выделяем картинку в тексте, кликаем в редакторе на иконку "Вставить картинку".

 

 

В открывшемся окне настроек полностью выделяем и копируем весь путь размещения картинки:

 

 

Жмем "Ок".

 

Если по клику должна открываться какая то другая картинка (можно сделать любую), то нужно найти и скопировать путь размещения той картинки.

 

Сейчас нам нужно сделать ссылку, снова выделяем в текстовом редакторе картинку и кликаем на иконку "Вставить ссылку".

 

 

В открывшемся окна в поле ссылки, вставляем скопированный путь размещения картинки, которая будет открываться по клику.

 

 

Отлично! Тут же, в этом же окне настроек, переходим во вкладку "Дополнительно".

 

 

Здесь, нам нужно поле "Класс CSS".

 

 

В нем указываем "colorbox", вот так:

 

 

Когда все прописано, жмем "Ок".

 

Жмем "Сохранить" чтобы сохранить все внесенные изменения на странице.

 

 

Сейчас, на сайте, при клике на эту картинку, она будет крупно всплывать поверх всего сайта.

 

 

Пример того, как всплывает картинка можно посмотреть тут:

 


Свежие публикации данной категории

11 просмотров этой страницы

zag4-6 самых простых способов увеличения изображения (HTML и CSS)

zag4-6 самых простых способов увеличения изображения (HTML и CSS)

Увеличить    изображение:   6   простых  способов  (HTML и CSS)

JavaScript

Кодировка без использования стиля (чистый HTML)

Способ 1

                  Простейший код переход от малого размера к размеру оригинала (не больше) через ссылку. Увеличенное изображение открывается в новом окне. Скрипт будет выглядит так: &ltbody&gt &lta href="31.jpg"&gt&ltIMG height=70 width=100 src="31.jpg" &gt&lt/a&gt &lt/body&gt Недостаток - могут возникнуть проблемы с возвращением на исходную страницу (см. комментарий к способу 3).

Способ 2

      Щелчок по фото - изображение увеличивается. При уходе курсора - возврат. Переход от малого размера к ЛЮБОМУ размеру (без стиля). Возможность задать любой увеличенный размер. Простой и короткий код. В коде только один адрес фото. &ltimg src="31.jpg" &gt Пояснения: width: 100px - задает размер малого фото width: 800px - задает размер большого фото возврат к малому фото - уход курсора вне фото

Способ 3

      При 1-ом щелчке увеличение и появление лупы. При 2-ом щелчке еще увеличение (до размера оригинала). При дальнейших щелчках пересменка увеличенных изображений. Усовершенствованный аналог Способа 1, но устраняет трудности, которые могут возникнуть с возвращением к исходному окну. Благодаря target="_blank" увеличенный рисунок открывается в новом окне. Последний параметр довольно важен, поскольку зачастую из-за неопытности пользователя может возникнуть следующая ситуация: открыв страницу с картинкой, он не знает как вернутся назад и поэтому просто закрывает вкладку, а значит полностью покидает сайт. Последний параметр подстраховывает его от такого случая, поскольку остается открыта начальная страница. Достаточно закрыть новое окно или просто щелкнуть по исходному окну. &lta target="_blank" href="31.jpg"&gt &ltimg src="31.jpg"&gt&lt/a&gt

Способ 4

      При наведении курсора - увеличение, при уводе курсора - возврат к исходному размеру. Увеличение до ЛЮБОГО размера. С помощью width задаются размеры: исходный рисунок, увеличенный рисунок и рисунок после ухода курсора. &ltimg src="31big.jpg" width=100 onmouseout="this.style.width=100"&gt&lt/td&gt
Увеличение за счет чистого стиля

Способ 5           

       Простейший переход от малого размера к ЛЮБОМУ размеру за счет стиля. Увеличение изображения - щелчок по фото. Возврат - щелчок вне фото. Кодировка &ltstyle&gt #img {width: 100px; cursor:pointer;} #img :focus {width: 1200;} &lt/style&gt &lt/head&gt &ltbody&gt &ltimg src="31.jpg" tabindex="1"&gt Пояснения. Здесь width задает размер исходного и увеличенного изображения. Обозначение ":focus" позволяет менять стиль элемента в зависимости от действий пользователя. Свойство focus активизируется при щелчке мыши. Для возврата к исходному размеру нужно щелкнуть вне изображения. Изображению присваивается идентификатор ("img"), которому в стиле задаются определенные свойства (после знака #img).

Способ 6

      Еще один простейший переход от малого размера к ЛЮБОМУ размеру с использование стиля. При наведении курсора - увеличение, при уводе курсора - возврат к исходному размеру. Аналог способа 4. &ltstyle&gt #big {cursor: pointer; width: 100px;} #big:hover {width: 1100px} &lt/style&gt &ltimg src="31.jpg"&gt Пояснения. Здесь width задает размер исходного и увеличенного изображения. Обозначение ":hover" позволяет менять стиль элемента в зависимости от действий пользователя. Свойство hover активизируется в том случае, если на элемент наведен курсор мыши.

home (ОГЛАВЛЕНИЕ)

o


Увеличение только одной картинки при клике

Вы здесь: Главная - JavaScript - JavaScript Скрипты - Увеличение только одной картинки при клике

Увеличение только одной картинки при клике

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

Результат: Кликните на любую фотографию. Если кликните ещё раз, то она вернётся в исходное состояние. Причём, одновременно увеличенной может быть только одна фотография.

Фото 1
Фото 1
Фото 2
Фото 2

Код JavaScript (вставлять между тегами <head> и </head>):

<script language = "JavaScript">
  var bigsize = "300"; //Размер большой картинки
  var smallsize = "150"; //Размер маленькой картинки
  var active_img = 0;
  function changeSizeOneImage(im) {
    if (active_img == im) {
      active_img.height = smallsize;
      active_img = 0;
      return;
    }
    if (active_img != 0) active_img.height = smallsize;
    active_img = im;
    im.height = bigsize;
  }
</script>

Код HTML (вставлять между тегами <body> и </body>):

<table align="center">
  <tr>
    <td align="center">
      <img src="foto1.jpg" />
      <br />
      <b>Фото 1</b>
    </td>
    <td align="center">
      <img src="foto2.jpg" />
      <br />
      <b>Фото 2</b>
    </td>
  </tr>
</table>
  • Фото 2 Создано 12.09.2011 10:41:04
  • Фото 2 Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href="https://myrusakov.ru" target="_blank"><img src="https://myrusakov.ru/images/button.gif" alt="Как создать свой сайт" /></a>

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:
    <a href="https://myrusakov.ru" target="_blank">Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL="https://myrusakov.ru"]Как создать свой сайт[/URL]

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

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

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

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

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

Итак структура HTML документа будет следующей.

  1. <!--Контейнер в котором мы будем отображать большую картинку-->
  2. <div><img src=""></div>
  3.  
  4. <!--Контейнер с миниатюрами-->
  5. <div>
  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. });

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

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