Лого www.SiteHere.ru

jQuery увеличение картинки

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

Взгляните на реальный пример jQuery увеличения картинки:

Посмотреть примерСкачать

Вот как выглядит это увеличение:

jQuery увеличение картинки - Реальный пример

Как установить jQuery увеличение картинки

HTML часть

Подключаем библиотеку jQuery и плагин okzoom.js (здесь, либо берем из примера) перед закрывающим тегом </body>:

HTML КОД
1
2
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/okzoom.js"></script>

Сейчас нужно разместить изображение, которое будем увеличивать. Я к Новому Году рисовал в Photoshop оленей и Санта Клауса. Вот с этим изображением я и буду экспериментировать. Вставляем где-то между тегами <body> и </body> наше изображение, но задавая ему высоту меньше чем у оригинала:

HTML КОД
1
<img id="example" height="200" src="demo.jpg">

Я задал 200 пикселей высоту, хотя оригинальная высота 280. Это сделано специально, потому что при увеличении будет показываться оригинальное изображение. Также нужно задать уникальный идентификатор изображения, которое мы будем увеличивать. В моём случае это id="example". Осталось последнее действие.

jQuery часть

Затем перед закрывающим тегом </body> вставляем следующий код:

HTML&JS КОД
1
2
3
4
5
6
7
8
9
10
<script>
    $(function(){
        $('#example').okzoom({
            width: 200,
            height: 200,
            border: "1px solid black",
            shadow: "0 0 5px #000"
        });
    });
</script>

Хочу сделать небольшие пояснения:

  • #example — это и есть тот идентификатор, который мы писали у тега <img>.
  • width — ширина лупы в пикселях.
  • height — высота лупы в пикселях.
  • border — цвет и вид границы лупы.
  • shadow — тень от лупы.

Вывод

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

Успехов!

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

Из чего состоит любой сайт? HTML
+
CSS
+
JS
Технологии не поддаются обучению?
5 комментариев к записи
  • ЯНЕЛЕНА

    Вот ещё бы это всё было респонсив 😮 , тогда другое дело

     
  • Константин

    Спасибо Юра, как всегда полезный урок! 😉

     
    • Юрий

      Спасибо, Константин!

       
  • Егор

    Здравствуйте, Юрий, а если несколько изображений увеличивать и применять один идентификатор #example для всех картинок, то это будет ошибкой по мнению W3C валидатора. На одной странице допускается только 1 уникальный ID
    Если нужно подключать увеличение для нескольких картинок, то нужно в скрипте создать массив.

    var mass = [»,’-1′,’-2′];
    for(i=0; i<3;i++)
    $(function(){
    $('#example'+mass[i]).okzoom({
    width: 200,
    height: 200,
    border: "1px solid black",
    shadow: "0 0 5px #000"
    });
    });
    И как видно из скрипта, теперь мы без проблем можем подключать 3 картинки, но обязательно с идентификаторами
    id=example-1
    id=example-2
    id=example-3
    Можно хоть сколько картинок подключать, меняя в функции <3

     
    • Егор

      Ошибочка,
      идентификаторы в именно данном случае будут
      example
      example-1
      example-2
      Можно функцию переписать что-бы не использовать массив, но это не в тему.
      🙂

       

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

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