1 927 Детали имеют значение. В особенности, если Вы что-то продаете. Как сделать так, чтобы пользователь имел возможность рассмотреть изображение на сайте в максимальном приближении? Этот вопрос легко решается с помощью удобного плагина. После установки достаточно навести курсор с увеличительным стеклом на фрагмент изображения, и у Вас появится возможность увидеть каждый сантиметр сфотографированного предмета. Для этого нам понадобится jQuery.
Ссылка ниже демонстрирует, как это выглядит.
Увеличение картинки - jQuery плагин
Установка jQuery
Как и в любой работе со скриптами, всё начинается с HTML. В первую очередь необходимо выполнить подключение библиотеки jQuery и плагина okzoom.js. Код прописывается перед тем, как закрывается тэг </body>:
|
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/okzoom.js"></script> |
Теперь выберите нужное изображение — с ним и будем экспериментировать. Изображение следует разместить в произвольном месте в рамках тега <body>. Здесь есть важная деталь — необходимо задать высоту меньше, чем у оригинального изображения.
|
1 |
<img id="example" height="200" src="demo.jpg"> |
Это необходимо для того, чтобы дать картинке резерв — именно при увеличении будет отображаться ее реальный размер. К примеру, если реальное изображение у вас 600 пикселей, установите 500. Изображение на странице должно быть уменьшено. Здесь же необходимо прописать конкретный id. Пусть будет “example12”.
И наконец переходим к jQuery.
Теперь, в самом конце до </body> прописываем код:
|
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> |
Итак, example12 — это id, который располагается в теге img. Далее идут параметр увеличительного стекла: ширина (width), высота (height) — эти параметры указаны в пикселях. Border — цвет и вид границы лупы, а shadow — тень.
Очевидно, что чаще всего подобный плагин используется в интернет-магазинах, однако он вполне применим и в других сферах.
