 Динамическая галерея и слайдшоу. Это сверхлегкая JavaScript-галерея и слайдшоу включает в себя большое количество возможностей. Недавно я искал хороший скрипт галереи для проекта своего клиента. Я хотел что-нибудь элегантное, простое и легкое. Но в основном находил решения на основе различных фрэймворков, которые весили более 30-50 Кб. Пока, наконец, не нашел то что искал.
Здесь пример приблизительной разметки для галереи: <div id="gallery">
<div id="imagearea">
<div id="image">
<a href="javascript:slideShow.nav(-1)" id="previmg"></a>
<a href="javascript:slideShow.nav(1)" id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<li value="1"><img src="thumbs/1.jpg" alt="" /></li>
<li value="2"><img src="thumbs/2.jpg" alt="" /></li>
<li value="3"><img src="thumbs/3.jpg" alt="" /></li>
<li value="4"><img src="thumbs/4.jpg" alt="" /></li>
<li value="5"><img src="thumbs/5.jpg" alt="" /></li>
</ul>
</div>
</div>
</div> Этот список - важный элемент галереи. Каждый тег li имеет свойство value, которое определяет имя для полноразмерного изображения. Также Вам необходимо определить переменные для включения JavaScript-слайдшоу. <script type="text/javascript">
var imgid = 'image'; // id of image div //
var imgdir = 'fullsize'; // full-size image directory //
var imgext = '.jpg'; // full-size image extension //
var thumbid = 'thumbs'; // id of the thumbnail container //
var auto = true; // automatic rotation toggle //
var autodelay = 5; // seconds before the image rotates //
</script>
<script type="text/javascript" src="packed.js"></script> Этот скрипт был протестирован в IE6/IE7, FF, Opera и Safari. Смотреть пример галереи Скачать галерею
|
