Скрипт вплытия фотографии в центр при нажатии на неё
Прекрасный скрипт, позволяющий всплывать картинке при нажатии на неё.
В работе скрипта использованы фотографии волков (1024х768), которые Вы сможете скачать себе скопировав всплывшую картинку
Пример работы скрипта Вы смотрите ниже
Посмотреть как работает скрипт в оригинале можно ЗДЕСЬ
Копируем на html страницу Вашего сайта нижеприведённый код.
<html>
<title>всплытие фото при нажатии на неё</title>
<head>
<script type="text/javascript" src="http://../jquery.min.js"></script>
<script type="text/javascript" src="http://../jquery.magnifier.js"></script>
</head>
<body>
<img src="http://../wolf.jpg" class="magnify" data-magnifyby="2.5" style="width:200px; height:150px" />
<img src="http://../wolf_.jpg" class="magnify" data-magnifyby="4" style="width:200px; height:150px" data-magnifyduration="2000" />
</body>
</html>
Рассмотрим по пунктам код и поменяем его для Вашего сайта.
1. src="http://../jquery.min.js" - закачиваем этот скрипт себе на сайт и конечно пишем ссылку, например (http://researcher.ucoz.ru/jquery.min.js)
2. src="http://../jquery.magnifier.js" - закачиваем и этот скрипт себе на сайт с указанием пути к нему.
3. magnify.cur - закачиваем этот курсор, правда в браузере Опера он не работает, а вот в других браузерах прекрасно показывает
4. Открываем скрипт jquery.magnifier.js с помощью программы Macromedia Dreamweaver MX 2004, или с помощью файлового менеджера при работе с сайтом на бесплатном хостинге uCoz. Открываем файловый менеджер, далее скрипт и жмём справа на - изменить содержание файла. На бесплатном хостинге НАРОД просто редактируем в мастерской, прописываем ссылку на курсор ПОЛНОСТЬЮ.
dsettings: {
magnifyby: 3, //default increase factor of enlarged image
duration: 500, //default duration of animation, in millisec
imgopacity: 0.2 //opacify of original image when enlarged image overlays it
},
cursorcss: 'url(http://ваш путь/magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
5. data-magnifyby="2.5" - это левый волк, 2,5 означает, что картинка с волком при всплытии увеличится в 2,5 раза. На правом волке, как видим установлено увеличение в 4 раза. Увеличивайте как Вам хочется.
6. style="width:200px; height:150px"- соответственно ширина и высота картинке показанной на Вашем сайте, здесь тоже можно менять размеры.
7. data-magnifyduration="2000" - время всплытия, анимации картинки. Как видим на первом волке не стоит этот указатель и он всплывает быстро. А вот на втором стоит регулятор анимации "2000", что соответствует всплытию и скрытию Вашей картинки в течении 2 секунд. 1000 - это 1 секунда. 500 - полсекунды. Менее 500 - тогда не нужно прописывать этот регулятор.
8. img src="http://../wolf.jpg" - расположение Вашего изображения, прописываем полный путь.
9. Очень надеюсь, что Вам понравился этот скрипт и время потраченное на написание этой статьи + разжёвывание кода прошло не зря. Работу этого скрипта Вы видете на этом сайте, оригинал работы скрипта можно посмотреть ЗДЕСЬ
| 
