Увеличение картинки на сайте +

Увеличение картинки при наведении курсора или при нажатии клавиши мыши, функция очень полезная и достаточно распространенная на многих ресурсах Интернета. Которые работают на самых разных SMS (система управления сайтом). Причем это не только интернет-магазины и сайты размещающие большое количество изображений но и обычные web-страницы и конечно блоги WordPress.

Плюсы увеличения картинки на сайте очевидны. Это ощутимая экономия места и в тоже время, посетитель имеет возможность смотреть изображение в полном размере. Т.е удобно, эффектно и поэтому так популярно. К тому же внедрить эту функцию у себя на блоге совсем не сложно, даже не вдаваясь в «дебри программирования». Средств и способов для увеличения картинки на сайте, вполне достаточно. Начиная от самого простого, сделать ссылку с маленькой картинки на большую и заканчивая всевозможными скриптами и плагинами.

Увеличение картинки при нажатии клавиши мыши – html код
Самый простой способ — загрузить на сайт изображение разных размеров. Одно маленькое, другое большое. Первое будет отображаться на странице, а при нажатии мыши на нем, будет открываться второе. Реализуется это с помощью специального кода, который вставляется в нужном месте.

<div align=”center”><a title=”заголовок” href=”url 2″ target=”_blank”><img src=”url 1″ /></a></div>
Где: Заголовок — это текст, который будет появляться при наведении курсора. Вписываем сюда название картинки или какой либо призыв к действию. Например – нажмите для увеличения; Url 1 – абсолютная ссылка на маленькое изображение, а url 2 – на большое.

cooltext1140508352

На блоге WordPress увеличение картинки при нажатии можно сделать еще проще. Загружаем большое изображение, а затем в настройках уменьшаем его до нужных размеров. Главное чтобы в строке Ссылка стояло Ссылка на изображение, а если нужно чтобы оно открывалось в новом окне, переходим во вкладку Дополнительно и в самом низу ставим галочку в чекбокс Открывать в новом окне. После чего нажимаем кнопку Обновить. Вот пожалуй и все.

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

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

<div align=”center”><img src=”url 1″ border=”0″onmouseover=”this.src=’url 2′;” onMouseOut=”this.src=’url 1′;” /></div>

Уже неплохо, но было бы еще лучше, чтобы при наведении мыши происходило плавное увеличение картинки. Реализовать это поможет очень простой скрипт.

Увеличение картинки при наведении курсора – скрипт
Сначала, скачиваем архив с исходниками ссылка к себе на компьютер и распаковываем его. Там три файла — imagesize.css, imagesize.js и shablon. Первые два загружаем в корневую папку своего сайта (на WordPress это public_html), а третий необходимо открыть. Это шаблон. Он содержит код который мы будем вставлять в то место, где необходимо разместить картинку. Только прежде, немного отредактируем его — укажем путь к нашей картинке. Относительный, если она находятся в той же папке что и файлы скрипта или абсолютный, когда картинка находится в другой директории.

<link rel=”stylesheet” href=”/imagesize.css” type=”text/css” />
<script type=”text/javascript” src=”/imagesize.js”></script>
<div>
<img class=”expando” border=”0″ src=”/ИМЯ ВАШЕГО РИСУНКА.jpg” width=”150″ height=”110″>
</div>
Теперь копируем этот код, вставляем (в режиме html) в нужное место и смотрим результат.

Хорошо получилось, хотя все же есть один маленький, неприятный момент – картинка, увеличиваясь в размерах, приводит в движение находящийся рядом контент. Кому-то это даже покажется забавным, но далеко не всем. Конечно, если постараться, можно найти скрипты которые легко решают эту проблему. Более того, сейчас популярно когда увеличении картинки происходит на фоне различных эффектов. Как например, модальные окна (изображение, при нажатии открывается на затемненном фоне, в отдельном окне). Замечательно, но все это требует редактирования файлов темы WordPress. А этим заниматься любят не все. По неопытности или просто лень… И чтобы не говорили про использование плагинов, но именно они позволяют легко расширять возможности наших web-ресурсов не имея специальных знаний и навыков программирования.

Увеличение картинки при нажатии – плагин Auto Highslide
Архив плагина скачиваем здесь ссылка . Установка стандартная, любым удобным способом ссылка. Каких либо дополнительных действий не предусмотрено. Сразу после активации плагин готов приступить к работе (к увеличению картинки при нажатии левой клавиши мыши). Настраивать мы будем лишь параметры отображения картинки (что мы и так делаем при каждой загрузке медиафайла). Приступим.

Загружаем картинку и прежде чем вставить в запись, переходим к настройкам Параметры отображения файла. В строке Ссылка, в выпадающем меню выбираем Медиафайл – чтобы изображение увеличивалось при нажатии (если поставить Нет, картинка останется неизменной). Далее выбираем Размер. Плагин будет увеличивать изображение до максимального, нам нужно определиться какого размера она будет до увеличения.

Параметры файла

Работу этого плагина можно увидеть здесь, на блоге To-En. Т.е из рассмотренных способов увеличения картинки на сайте, я воспользовался последним – с помощью плагина Auto Highslide. Изображения увеличиваются или возвращаются в исходный размер при нажатии левой клавиши мыши. При этом, увеличенную картинку можно перемещать по всему экрану.

Вы можете оставить комментарий, или поставить трэкбек со своего сайта.

Написать ответ

"АБЫРВАЛГ!", сказал линукс после руссификации.
Купить в рассрочку

Получить кредит просто! Заполни форму и получи кредит не выходя из дома под 1.99% месяц
Мы свяжемся с вами в течении часа в рабочее время




×
Купить в рассрочку

Получить кредит просто! Заполни форму и получи кредит не выходя из дома под 1.99% месяц
Мы свяжемся с вами в течении часа в рабочее время




×
Adblock
detector