KorniloFF-ScriptS ©

Здравствуйте, Гость!
Путь страницы:   Стартовая > Javascripts > Бесплатные скрипты > Увеличение изображения Перейти в защищенную версию
Page
Menu

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

Отличный и, при этом, не сложный скрипт для работы с изображениями на сайте. Возможна работа как с миниатюрами (thumbs), созданными на сервере, так и с миниатюрами, показанными броузером при помощи стилей CSS.

При клике на изображение - оно увеличивается до максимального размера (либо подгружает оригинальное изображение с сервера) одной из своих сторон, входящего в экран. Таким образом, изображение всегда не выходит за границы экрана. При необходимости увеличить изображение до его полного пиксельного размера - присутствует ссылка Полный размер, показывающая полноразмерное изображение в новой вкладке.

Навигация между изображениями осуществляется стрелками клавиатуры. Выход из режима увеличения изображения - кликом вне изображения или клавишей Esc на клавиатуре.

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

Инструкция по подключению скрипта к сайту

  1. Скачать скрипт увеличения изображений и загрузить его к себе на хостинг. Далее предполагаем, что абсолютный путь к файлу будет /js/addons/Img.js. Если у вас он окажется другим, то нужно будет заменить его на свой в коде, приведенном ниже.
  2. Присвоить изображениям, нуждающимся в увеличении класс class="toBig".
  3. Все, скрипт будет работать после перезагрузки страницы сайта с очисткой кеша броузера (ctrl+R).

Пример работы скрипта:







Если вы хотите увидеть в скрипте дополнительный функционал - пишите в Обратную связь сайта, я постараюсь его реализовать.

HTML + Javascript код:
Комментарии к теме (0)

Комментариев пока нет.

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