Чтобы увидеть пример работы скрипта наведите мышью на рисунок и нажмите на него левой кнопкой
Данный скрипт работает при помощи двух файлов, которые нужно загрузить в корень сайта (jquery.magnifier.js и magnify.cur). 1. Вставляете код, что ниже на странице, где должна быть картинка между <HEAD> и </HEAD> Code <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.magnifier.js"> </script>
2. Следующий код необходимо вставить в то место, где будет располагаться Ваша картинка:
Code <img src="ocean.gif" class="magnify" style="width:100px; height:56px" /> - загружаете картинку и указываете путь к ней (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 - продолжительность анимации (скорость появления)
Купить файлы jquery.magnifier.js и magnify.cur Вы можете оплатив 1$ на кошелек Z754925905866 в примечании пишите: Покупка скрипта 2 от "Ваш почтовый ящик"
|