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

Замечательная галерея через плагин lightbox Gallery Mootools на jQuery
23.06.14, 08:53:37

Скачать файл




Просто обалденная галерея с великолепными визуальными эффектами. Нельзя передать словами - это нужно видеть

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

Установка:

Нас страницах, где будет использован данный плагин, после /head вставляйте:
Код
<script type="text/javascript" src="/js/mootools-for-gallery.js"> </script>  
<script type="text/javascript" src="/js/UvumiGallery-compressed.js"> </script>  
<link rel="stylesheet" type="text/css" media="screen" href="/css/uvumi-gallery.css" />  
<style type="text/css">  
body,html{  
background-color:#333;  
margin:0;  
padding:0;  
font-family:Trebuchet MS, Helvetica, sans-serif;  
}  

#gallery{  
margin:20px auto;  
height:500px;  
width:860px;  
position:relative;  
color:#aaa;  
padding:20px;  
overflow:hidden;  
border:1px solid #888;  
background-color:#000;  
}  
</style>  
<script type="text/javascript">  
new UvumiGallery({container:'gallery'});  
</script>


Всё, плагин подключен. Галерея прописывается следующим образом:
Код
<div id="gallery">  
  <a href="Ссылка на полное изображение"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки"/></a>  
  <a href="Ссылка на полное изображение"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки"/></a>  
  <a href="Ссылка на полное изображение"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки"/></a>  
  <a href="Ссылка на полное изображение"><img src="Ссылка на уменьшенное изображение" alt="Описание картинки"/></a>  
</div>


Как видете, достаточно лишь обрамить набор изображений в дивы с id="gallery", чтобы плагин начал их обрабатывать

Теперь залейте три папки со всем содержимым (!не меняя структуры!) из прикреплённого архива в корень вашего сайта

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