Главная » Файлы » Прочие скрипты » jQuery
Оригинальная мини-галерея через плагин Thumbnails Preview Slider на jQuery 1.4.4
23.06.14, 13:53:16

Скачать файл



Очень интересная миниатюрная галерея для вашего сайта. Галерея занимает минимум пространства и потому может оказаться просто незаменимой на некоторых сайтах

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

Установка:

После /head на нужных вам страницах вставляйте:
Код
<link rel="stylesheet" type="text/css" href="/css/thumbnail_slider.css" />


Следующий код в то место, где будет мини-галерея:
Код
<div id="demo3" class="demo">
  <ul class="ts_container">
  <li><a href="#">Image 1</a></li>
  <li><a href="#">Image 2</a></li>
  <li><a href="#">Image 3</a></li>
  <li><a href="#">Image 4</a></li>
  <li class="ts_thumbnails"> <!-- animate to slide frame -->
  <div class="ts_preview_wrapper">
  <ul class="ts_preview"><!-- animate left to slide to the right thumb -->
  <li><img src="Ссылка на картинку" alt="Thumb 1" /></li>
  <li><img src="Ссылка на картинку" alt="Thumb 2" /></li>
  <li><img src="Ссылка на картинку" alt="Thumb 3"/></li>
  <li><img src="Ссылка на картинку" alt="Thumb 4" /></li>
  </ul>
  </div>
  <span></span>
  </li>
  </ul>
  </div>


Обратите своё внимание на параметр id="demo3". 3 - это номер эффекта, который будет применяться в галерее (В том же порядке, что и в Демо)

Следующий код вставляйте в самый низ после тега /body:
Код
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
  <script src="/body.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {  
//demo1  
$('#demo1').thumbnailSlider();  
//demo2  
$('#demo2').thumbnailSlider({  
thumb_width : 130,  
thumb_height: 87,  
easing : 'easeOutExpo',//easeInBack  
speed : 600  
});  
//demo3  
$('#demo3').thumbnailSlider({  
thumb_width : 174,  
thumb_height: 260,  
speed : 200  
});  
//demo4  
$('#demo4').thumbnailSlider({  
thumb_width : 174,  
thumb_height: 260,  
speed : 200,  
zoom : true,  
zoomspeed : 10000,  
zoomratio : 1.7  
});  
});  
  </script>


Осталось лишь залить три скрипта из прикреплённого архива в папку js, стиль в папку css и две картинки в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: Через, мини-галерея, на, плагин, JQuery, Оригинальная, preview, Slider, Thumbnails, 1.4.4
Просмотров: 350 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: