Лого www.SiteHere.ru

Плавное увеличение изображений

Плавное увеличение изображений

В этом уроке мы рассмотрим очень полезную библиотеку Javascript, которая позволяет плавно увеличивать изображения. Например, когда человек смотрит какую-либо вещь в интернет-магазине, то, как правило, он максимально увеличивает изображение, чтобы разглядеть товар, который он хочет приобрести. И только после этого он совершает покупку. Сделать изображение с очень большим разрешением — не самый лучший выход. Потому что в этом случае изображения будут занимать много места. Более простым решением будет создать изображение масштабируемым. Это и можно сделать с помощью этой библиотеки.

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

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

Плавное увеличение изображений

Библиотека, которую мы будем использовать, находится здесь — Zoomer(скачать).

Как сделать плавное увеличение изображений у себя на сайте?

HTML

Подключаем между тегами <head> и </head> две библиотеки и стили для нашего плагина(jQuery, jquery.fs.zoomer.js и jquery.fs.zoomer.css):

1
2
3
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fs.zoomer.css" />
<script src="js/jquery.fs.zoomer.js"></script>

Внимание: jQuery библиотека должна быть подключена первой!!!

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

1
2
3
<div class="zoomable"> 
    <img src="images/priroda.jpg" alt="Красивые горы"/>
</div>

Мы создали блок с классом zoomable и разместили одно изображение с помощью тега <img>. Для того чтобы создать галерею из нескольких изображений, тогда необходимо разместить несколько изображений подряд. Как на примере ниже:

1
2
3
4
5
<div class="zoomable"> 
    <img src="images/priroda.jpg" alt="Красивые горы"/>
    <img src="images/priroda-2.jpg" alt="Закат"/> 
    <img src="images/priroda-0.jpg" alt="УУххх"/>  
</div>

CSS

Обратите внимание на изображение jquery.fs.zoomer-loading.gif, которое находится в папке images. Оно необходимо для того, чтобы показывать индикатор загрузки перед тем как изображение полностью загрузится.

индикатор загрузки

Поэтому в файле jquery.fs.zoomer.css в 22 строке необходимо указать ПРАВИЛЬНЫЙ путь к этому изображению.

Здесь практически ничего задавать не надо. Лишь задаем размер блока, в котором будут находится наши изображения:

задаем размер блока

Вы должны задать здесь размеры блока, которые примерно пропорциональны размерам ваших изображений:

1
2
3
4
5
.zoomable {   
    height: 500px;   
    width: 800px;  
    margin:10px auto;
}

jQuery

Сейчас наша галерея еще не работает. Для того чтобы она начала функционировать с возможностью изменять масштаб изображения, необходимо прописать между тегами <head> и </head>:

1
2
3
4
5
<script>
    $(document).ready(function() {
        $(".zoomable").zoomer();  
    });
</script>

Что мы сделали? В первой строке мы указали, что необходимо выполнить функцию zoomer()(которая находится во второй строке), когда страница загрузиться.

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

Для того чтобы задать произвольный стиль для блока в котором находятся изображения(на примере он серый), необходимо прописать свойство customClass внутри функции zoomer() с указанием нового класса:

1
2
3
4
5
6
7
<script>
    $(document).ready(function() {
        $(".zoomable").zoomer({
            customClass: "custom" // указываем название класса в кавычках
        });  
    });
</script>

Я задал вот такой стиль для класса custom:

1
2
3
4
.custom {
    border:2px dashed #F3696D; /* пунктирная розовая граница */
    background-color:#F3CECF; /* бледно-розовый цвет фона */
}

Блок будет выглядеть следующим образом (пунктирная граница и розовый фон):

пунктирная граница и розовый фон

Еще одним полезным свойством является указание инкремента, с помощью которого происходит масштабирование изображения. Его можно увеличивать и уменьшать, и соответственно масштабирование будет происходить быстро или медленно. Задается он следующим образом:

1
2
3
4
5
6
7
<script>
    $(document).ready(function() {
        $(".zoomable").zoomer({
            increment: 0.0005 
        });  
    });
</script>

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

Вывод

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

Успехов!

С Уважением, Юрий Немец

Плавное увеличение изображений 5.00/5 (100.00%) 1 голос(ов)

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

1 комментарий к записи
  • Andrew

    как сделать большее увеличение картинки?

     

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

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