X
Юрий Немец

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 — тень от лупы.


Вывод

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


Успехов!

Категории: jQuery