Чтобы увидеть пример работы скрипта зайдите на сайт по ссылке, наведите мышью на рисунок и нажмите на него левой кнопкой. Данный скрипт работает при помощи двух файлов, которые нужно загрузить в корень сайта (jquery.magnifier.js и magnify.cur). 1. Вставляете код, что ниже на странице, где должна быть картинка между <HEAD> и </HEAD>
- загружаете картинку и указываете путь к ней (ocean.gif) - width="100" height="56" - размер картинки в уменьшенном виде (увеличенная картинка должна настраиваться в файле jquery.magnifier.js).
3. Остается только загрузить готовые файлы jquery.magnifier.js и magnify.cur в корень сайта и скрипт работает!
Увеличение картинки, а также скорость настраивается в файле jquery.magnifier.js в коде:
Code
dsettings: { magnifyby: 3, //default increase factor of enlarged image duration: 500, //default duration of animation, in millisec mgopacity: 0.2 //opacify of original image when enlarged image overlays it }, cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
- где 3 - во сколько раз увеличивается картинка от заданного (в нашем примере это 100х56) - 500 - продолжительность анимации (скорость появления)
+12 DizeL22.07.2010 12:32:49
Этот скрипт стоит у меня тут 1 баг скрипта: иногда картинку увеличивает намного больше ее размеров
Цитировать |
Редактировать |
Удалить
4
The_FactioN
19.10.2010 15:44:11
а где мне скачать jquery файлик?
Цитировать |
Редактировать |
Удалить
