Главная » Файлы » Прочие скрипты » jQuery

Интересный плагин Image Zoomer с возможностью увеличения изображения до 10x (Доработано Apocalypse) на jQuery
23.06.14, 08:22:32

Скачать файл




Неплохой плагин для просмотра увеличенного варианта картинки с возможностью увеличения до 10x простым вращением колёсика мышки

Для начала посмотрите ДЕМО

Переходим к установке:
После /head на нужных вам страницах вставляйте:
Код
<style type="text/css">
.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}
</style>

<script type="text/javascript" src="/js/featuredimagezoomer.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){
  $('img[class=zoom]').addimagezoom({
  zoomrange: [1, 10]})
})
</script>


Всё, настройка скрипта закончена. Осталось лишь прописать картинки, которые можно будет увеличивать:
Код
<img class="zoom" border="0" src="Ссылка на картинку" style="width:300px;" />  

<img class="zoom" border="0" src="Ссылка на картинку" style="width:300px;" />


Теперь залейте скрипт из архива в папку js

Как можете увидеть, достаточно лишь приписать к картинке класс zoom и задать её необходимый размер, чтобы плагин начал обрабатывать изображение

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

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: возможностью, до, изображения, (Доработано, увеличения, интересный, 10x, image, плагин, Zoomer
Просмотров: 319 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: