Скрипт перемещения и увеличения картинки на сайте
Этот скрипт предназначен для красивого пользования фотографиями и картинками на Вашем сайте.
Пример работы скрипта Вы лицезреете ниже
Копируем на html страницу Вашего сайта нижеприведённый код.
<html>
<head>
<style type="text/css">
.pancontainer{
position:relative;
overflow:hidden;
width:300px;
height:300px;
border:1px solid black;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="imagepanner.js"> </script>
</head>
<body>
<div class="pancontainer" data-orient="center" style="width:400px; height:300px;">
<img src="http://moefoto.jpg" style="width:700px; height:525px" />
</div>
</body>
</html>
Рассмотрим по пунктам код и поменяем его для Вашего сайта.
1. src="jquery.min.js" - закачиваем этот скрипт себе на сайт и конечно пишем ссылку, например (http://researcher.ucoz.ru/jquery.min.js)
2. src="imagepanner.js" - закачиваем и этот скрипт себе на сайт с указанием пути к нему.
3. плюс - закачиваем эту картинку, название СТРОГО!!! -
magnify.gif
4. минус - и эту картинку скачиваем тоже, название СТРОГО!!! - magnify2.gif
5. data-orient="center" - вместо левого верхнего угла (left), мы с вами, начинаем просмотр фотографии с центра.
6. data-canzoom="yes" - соглашение на увеличение и уменьшение картинки, размер порога изменений можно настроить непосредственно открыв скрипт imagepanner.js с помощью программы Macromedia Dreamweaver MX 2004 или с помощью файлового менеджера при работе с сайтом на бесплатном хостинге uCoz. Открываем файловый менеджер, далее скрипт и жмём справа на - изменить содержание файла.
7. style="width:400px; height:300px;" - размер окна, в котором будет происходить просмотр изображения, можно изменить по желанию и потребностям.
8. img src="http://moefoto.jpg" - расположение Вашего изображения
9. style="width:700px; height:520px" - непосредственно размер просматриваемой картинки, его можно установить независимо от истинного размера изображения.
Работу этого скрипта Вы видете на этом сайте, оригинал работы скрипта можно посмотреть ЗДЕСЬ
| 
