Увы, шаблон недоступен для скачивания или покупки, в связи с обращением правообладателя! По всем вопросам обращайтесь к Администратору.
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>
Вот и все, думаю все должно быть понятно. Разумеется сами слайды при необходимости - можно выводить через информер.