Главная » Файлы » Прочие скрипты » jQuery

Галерея изображений через плагин Zoomimage на jQuery
23.06.14, 11:38:58

Скачать файл




Очередной оригинальный плагин для увеличения изображений из серии lightbox

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах сайта вставляйте:
Код
<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) Для первого эффекта:
Код
<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) Для второго эффекта:
Код
<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) Для третьего эффекта:
Код
<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

Материал подготовленApocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: изображений, галерея, Через, на, плагин, JQuery, ZoomImage
Просмотров: 244 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: