Меню сайта
Категории сайта
Мини-чат
Наш опрос
Сколько Вы зарабатываете?
Всего ответов: 4912
Облако тегов
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0


Нас посетили:
Мини-профиль
Поиск
Календарь
Статистика
Архив
Реклама
Узнай айпи
Главная » 2009 » Июнь » 6 » Скрипты для uCoz » Красивый плагин для увеличения Ваших фото
Красивый плагин для увеличения Ваших фото
Вы пришли к нам на портал что бы скачать\посмотреть Красивый плагин для увеличения Ваших фото, если возникнут вопросы по данному файлу Красивый плагин для увеличения Ваших фото, вы всегда можете задать свой вопрос на нашем форуме.
С уважением, администрация 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 мы прописываем путь к увеличенному фото.

Кому понравилось ставим +!


У вас есть сайт, но ты незнаешь какой у тебя тИЦ и ПР? Будь в курсе событий, поставь счетчик тИЦ и ПР на свой сайт! Счетчик тИЦ и ПР.
Добавил: Simpsonnn | Комментариев: 4 | Просмотров: 2563 | Добавлено: 06-Июн-2009

0  
4 gorf   (09-Июн-2009 04:15:13) [Материал]
gorf+)
0  
3 Joker251   (07-Июн-2009 13:07:14) [Материал]
Прикольно!!!
0  
2 naruto-inform-site   (06-Июн-2009 21:50:33) [Материал]
ccccууууууупппппппппеееееееррррррр лови +
0  
1 B-look   (06-Июн-2009 14:07:14) [Материал]
Прикольно, мне понравилось держал+
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]