Урок 63 Увеличение картинки на вашем сайте

03.09.201627603

 
 
 
Всем привет на prosmo3.ru. Продолжаем улучшать наши блоги для заработка. Думаю ни для кого не секрет, что поведенческие факторы на сайте играют огромную роль. Конечно не все понимают каким образом и через какое время они начинают влиять, но факт остается фактом. Чтобы улучшить эти факторы нам необходимо улучшить юзабилити сайта: добавить видео, улучшить дизайн, сделать его привлекательным и простым. Сделать правильную обработку картинок на сайте. Многие хотели бы узнать ответ о том, как сделать на сайте картинку при нажатии на которую она увеличивалась. Этот увеличение реализовано у меня на сайте. Согласитесь достаточно приятно, что можно увеличить картинки, посмотреть всю красоту во весь экран.
как увеличить картинку

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

  • Например, можно увеличить ее при наведении кнопки мыши
  • Вторым вариантом может быть увеличение при нажатии

Конечно, если вы пользуетесь WordPress, то самым простым и легким вариантом будет поиск шаблона с нужной нам функцией, поверьте в интернете сейчас огромное количество таких. Так что в 95 процентах случаев вы найдете именно шаблон с увеличением картинки. Но что делать если вам нравится именно эта тема и вы хотели бы сделать увеличение картинки только на ней. Или вы вообще пишете на листке html свой первый сайт, в чем я конечно сильно сомневаюсь.

Подключаем ява скрипты для увеличения картинки

Итоговым результатом будет увеличенная картинка, по типу всплывающего окна. Ладно, все это философия, чтобы произвести увеличение картинки нам необходимо подключить библиотеку jQuery. Не помню но вроде в каком то уроке я писал про эту библиотеку, но если вы забыли - напомню. Чтобы подключить библиотеку необходимо в <head> сайта вставить два кода.

Следует понимать что библиотек jQuery достаточно много и в разных случаях подключаются разные библиотеки

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.magnifier.js"></script>

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

вставить медиафайл

Если же вы пишите свой сайт на голом html, то для вставки картинки вам потребуется этот код

<img src="images/pic.jpg" align="left">

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

  • class="magnify"
  • width:180px; height:140px

Ваш итоговый код картинки будет выглядеть таким образом:

<img src="images/pic.jpg" class="magnify" width:180px; height:140px align="left">

Можно еще почитать о том как заработать на рекламе. Или сколько зарабатывает психолог, думаю это достаточно интересно!

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

Следующий урок: Как сделать кнопку наверх на сайте.

Предыдущий урок: Обзор Яндекс метрики.