Вы пришли к нам на портал что бы скачать\посмотреть
Красивый плагин для увеличения Ваших фото, если возникнут вопросы по данному файлу
Красивый плагин для увеличения Ваших фото, вы всегда можете задать свой вопрос на нашем
форуме.
С уважением, администрация isucoz.com.
Скачать Красивый плагин для увеличения Ваших фото
Пример Скачать архив Для этого нам понадобится:
jQuery
В начале документа, между тегами <head></head> нам необходимо разместить следующий код:
Code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
$("img.jqzoom").jqueryzoom({
xzoom: 200, //ширина окна просмотра зума (200 по умолчанию)
yzoom: 200, //высота окна просмотра зума (200 по умолчанию)
offset: 10 //отступ от картинки (10 по умолчанию)
//position: "right" //позиция окна зума ("right" - по умолчанию)
});
});
</script>
В нем мы подключаем фреймворк, потом подключаем функцию самого зума и в конце задаем основные настройки. Объяснение настроек доступно в комментариях кода.
CSS
Code
<link rel="stylesheet" href="style/jqzoom.css" type="text/css" media="screen" />
Присоединяем таблицу стилей (также между тегами <head></head>). Здесь можно дать волю фантазии и экспериментировать.
HTML
HTML код для оформления фото выглядит следующим образом:
Code
<span class="tozoom"><img src="images/shoe1_small.jpg" class="jqzoom" alt="images/shoe1_big.jpg"></span>
<span class="tozoom"><img src="images/shoe2_small.jpg" class="jqzoom" alt="images/shoe2_big.jpg"></span>
<span class="tozoom"><img src="images/shoe3_small.jpg" class="jqzoom" alt="images/shoe3_big.jpg"></span>
Как Вы видите, каждое фото мы заворачиваем в слой с классом "tozoom". Для каждого фото мы добавляем класс "jqzoom". И в атрибуте alt мы прописываем путь к увеличенному фото.
Кому понравилось ставим +!
У вас есть сайт, но ты незнаешь какой у тебя тИЦ и ПР? Будь в курсе событий, поставь счетчик тИЦ и ПР на свой сайт!
Счетчик тИЦ и ПР.