TinySlider - простая jQuery галерея с автопрокруткой для uCoz

9103 просмотров Alan_Writer 03.08.2015

Скачать 📥 Демо ▶️

TinySlider - простая, но отличная галерея изображений на jQuery. Скрипт галереи весит всего 5.6кб, при этом имеет вполне приличный функционал. Есть возможность включить или выключить авто-прокрутку, настроить скорость смены слайдов, добавить ссылки к слайдам. Имеются кнопки перелистывания влево и вправо. Количество добавляемых слайдов - не ограничено.

Установка

1. Скачайте архив. Создайте в корне файлового менеджера папку tinyslider, и в нее залейте все содержимое архива.

2. Теперь нужно прописать пути к файлу скрипта и стилей, а также скрипт вызова с настройками. Ставим это все перед </body>:
Код
<link rel="stylesheet" href="/tinyslider/style.css"/>
<script type="text/javascript" src="/tinyslider/script.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('sliwrap').style.display='block';
  var slideshow=new TINY.slideshow("slideshow");
  window.onload=function(){
  slideshow.left="slideleft";
  slideshow.right="slideright";
  slideshow.auto=true; // авто-прокрутка вкл (true) или выкл (false)
  slideshow.speed=6; // скорость авто-прокрутки
  slideshow.link="linkhover"; // отображение иконки ссылки
  slideshow.info="information"; // отображение описания
  slideshow.thumbs="slider"; // отображение миниатюр
  slideshow.scrollSpeed=4; // скорость перелистывания миниатюр
  slideshow.spacing=5; // отступ между миниатюрами
  slideshow.active="red"; // цвет рамки активной миниатюры
  slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
** Чтоб было понятно, настройки (то что можно менять или удалять) я специально подписал.

3. Теперь в нужное место вставляете сам блок галереи со слайдами.
Код
<ul id="slideshow">
<!-- слайд 1 -->
<li>
<h3>Заголовок слайда</h3>
<span>ссылка на полное изображение</span>
<p>Описание слайда</p>
<a href="ссылка, если нужно"><img src=" ссылка на уменьшенное изображение" alt=""/></a>
</li>
<!-- слайд 2 -->
<li>
<h3>Заголовок слайда</h3>
<span>ссылка на полное изображение</span>
<p>Описание слайда</p>
<a href="ссылка, если нужно"><img src=" ссылка на уменьшенное изображение" alt=""/></a>
</li>
<!-- слайд 3 -->
<li>
<h3>Заголовок слайда</h3>
<span>ссылка на полное изображение</span>
<p>Описание слайда</p>
<a href="ссылка, если нужно"><img src=" ссылка на уменьшенное изображение" alt=""/></a>
</li>
<!-- и тд... -->
</ul>
<div id="sliwrap">
<div id="fullsize">
<div id="imgprev" class="imgnav" title="Предыдущая картинка"></div>
<div id="imglink"></div>
<div id="imgnext" class="imgnav" title="Следующая картинка"></div>
<div id="image"></div>
<div id="information">
<h3></h3>
<p></p>
</div>
</div>
<div id="thumbnails">
<div id="slideleft" title="Листать влево"></div>
<div id="slidearea">
<div id="slider"></div>
</div>
<div id="slideright" title="Листать вправо"></div>
</div>
</div>

Вот и все, думаю все должно быть понятно. Разумеется сами слайды при необходимости - можно выводить через информер.

Теги: jQuery, автопрокрутка, галерея, для uCoz, TinySlider, Слайдер
3 Комментария
avatar
3
Там на слайдере....Portal!
avatar
1
Скрипт работает отлично.Только вот при его подключение другие скрипты перестают работать, что может быть???
avatar
2
Ну бывает такое что разные скрипты конфликтуют. А может ты просто ставишь неправильно.