Главная » 2011 » Октябрь » 18 » Галерея изображений через плагин Zoomimage (Javascript)
18.10.2011, 02:12

Галерея изображений через плагин Zoomimage





ДЕМО МАТЕРИАЛА

Установка:

После /head на нужных страницах сайта вставляйте:
Code
<link rel="stylesheet" media="screen" type="text/css" href="/css/zoomimage.css" />  
  <script type="text/javascript" src="/js/eye.js"></script>  
  <script type="text/javascript" src="/js/utils.js"></script>  
  <script type="text/javascript" src="/js/zoomimage.js"></script>  
  <script type="text/javascript" src="/js/layout.js"></script>

Следующий код в то место, где будут располагаться сами картинки:

1) Для первого эффекта:
Code
<a href="Ссылка на большое изображение" title="Seashell" class="example1"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>  
  <a href="Ссылка на большое изображение" title="Seashell" class="example1"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>  
  <a href="Ссылка на большое изображение" title="Seashell" class="example1"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>  
  <a href="Ссылка на большое изображение" title="Seashell" class="example1"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>  
  <a href="Ссылка на большое изображение" title="Seashell" class="example1"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>

2) Для второго эффекта:
Code
<a href="Ссылка на большое изображение" title="Seashell" class="example2"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>  
  <a href="Ссылка на большое изображение" title="Seashell" class="example2"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>  
  <a href="Ссылка на большое изображение" title="Seashell" class="example2"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>  
  <a href="Ссылка на большое изображение" title="Seashell" class="example2"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>  
  <a href="Ссылка на большое изображение" title="Seashell" class="example2"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>

3) Для третьего эффекта:
Code
<a href="Ссылка на большое изображение" title="Seashell" class="example3"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>  
  <a href="Ссылка на большое изображение" title="Seashell" class="example3"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>  
  <a href="Ссылка на большое изображение" title="Seashell" class="example3"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>  
  <a href="Ссылка на большое изображение" title="Seashell" class="example3"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>  
  <a href="Ссылка на большое изображение" title="Seashell" class="example3"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки" /></a>

Осталось лишь залить четыре скрипта из прикреплённого архива в папку js стиль в папку css и все оставшиеся файлы в папку images
Материал взят с сайта infoscript.ru
Теги: Скачать Галерея изображений через плагин Zoomimage
Скачать "Галерея изображений через плагин Zoomimage"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: siteforsites.ru
Категория: JavaScript's | Просмотров: 2071 | Добавил: manikom-auto | Рейтинг: 0.0/0 |
Теги: jQuery, Zoomimage, изображений, ГАЛЕРЕЯ, через, На, плагин
Всего комментариев: 2
0  
1 SlamCheck   (29.10.2011 21:53) [Материал]
Аватар пользователя
Как настроить, чтобы увеличенное изображение было посередине?

0  
2 manikom-auto   (13.11.2011 08:18) [Материал]
Аватар пользователя
Там же написано - вариант 1 вариант 2 вариант 3

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]