Еще одна красивая галерея на jQuery - Pirobox. Работает во всех нормальных браузерах и в любимых всеми IE6-7.
Шаг 1.
Также между тэгами <head></head> вызываем скрипт с некоторыми параметрами:
<script type="text/javascript">
$(document).ready(function(){
$('.thumbs').piroBox({
<!-- Это настройки -->
border: '10',
borderColor: '#fff',
mySpeed: 700,
bg_alpha: 0.5,
cap_op_start : 0.5,
cap_op_end: 0.8,
pathLoader : '#000 url(css/ajax-loader.gif) center center no-repeat;',
gallery : '.gallery li a',
gallery_li : '.gallery li',
single : '.single a',
next_class : '.next_in ',
previous_class : '.previous_in '
});
});
</script>
Что мы здесь можем настроить:
border: рамка у фото.
borderColor: цвет рамки.
mySpeed: скорость анимации, мс
bg_alpha: прозрачность фона, которым заливается все пространство под открывшейся фотографией. Цвет фона задается в css
cap_op_start: прозрачность подписи фото до наведения курсора на фото
cap_op_end:: прозрачность подписи фото после наведения на курсора на фото
pathLoader: Css стиль загрузчика. Здесь мы помещаем gif-анимацию, которую посетитель будет видеть во время загрузки фото по центру
gallery: и gallery_li: 2 настройки, отвечают за то, внутри какого объекта будем определять фотографии в галерею
single: указываем класс объекта, который будет определяться как одиночное изображение. (в нашем случае все изображения, находящиеся внутри объекта с классом single и внутри <a>будут считаться изображениями..
next_class: указываем класс объекта, который у нас служит кнопкой вперед
previous_class: указываем класс объекта, который у нас служит кнопкой назад
Шаг2. HTML
Для группы изображений (галереи) в div-блоке с классом gallery_in в списке указываем миниатюру фотографии в теге <img>, миниатюра в свою очередь обернута в ссылку на полноразмерное изображение - <a href="images/1.jpg">
<div class="gallery_in">
<ul>
<li>
<a href="images/1.jpg" title="Название картинки" ><img src="images/1_s.jpg" alt="demo" width="200" height="139" /></a>
</li>
<li>
<a href="images/2.jpg" title="Название картинки" ><img src="images/2_s.jpg" alt="demo" width="200" height="139" /></a>
</li>
<li>
<a href="images/3.jpg" title="Название картинки"><img src="images/3_s.jpg" alt="demo" width="200" height="139" /></a>
</li>
<li>
<a href="images/4.jpg" title="Название картинки" ><img src="images/4_s.jpg" alt="demo" width="200" height="139" /></a>
</li>
</ul>
</div>
Для одиночных изображений каждое фото нужно поместить в cледующую конструкцию:
<div class="single_box">
<span class="single">
<a href="images/9.jpg" title="Название картинки">
<img src="images/9_s.jpg" alt="demo" width="200" height="139" /></a>
</span>
</div>
В демке показана галерея в двух вариантах - расположение кнопок на фотографии и за пределами фотографии по краям экрана. Особо больших различий в реализации нет, все это описывается в css. В самой функции $('.thumbs').piroBox (если скачаете или посмотрите исходный код примера), увидите лишь различие в последних пяти параметрах скрипта, описанного в первом шаге, там просто прописаны другие классы.
CSS рассматривать не будет, т.к. половина кода описывает стиль страницы примера, а вторую часть автор скрипта трогать не разрешает, за исключением 2 строк:
.bg_thumbs{
background:#fff;
/*::::: цвет фона, о котором говорилось в шаге 1 (в приложенном архиве это строка 61) ::::::::*/
/*далее остальной код */
}
.unloader, .img_box
{ background:#000}
/*::::: цвет подложки под фото, его мы видим когда контейнер под фото разворачивается и когда мы переходим на следующую фотографию ::::::::*/
Как видите реализация несложная. Если Вы хотите под одной миниатюрой спрятать набор изображений, слегка подправьте HTML:
<div class="gallery_in">
<ul>
<li>
<a href="images/1.jpg" title="Название картинки" ><img src="images/1_s.jpg" alt="demo" width="200" height="139" /></a>
</li>
<li>
<a href="images/2.jpg" title="Название картинки" ></a>
</li>
<li>
<a href="images/3.jpg" title="Название картинки"></a>
</li>
<li>
<a href="images/4.jpg" title="Название картинки" ></a>
</li>
</ul>
</div>
Как видите, здесь мы просто оставили одну миниатюру . Ну и придется подправить css-код, иначе рядом с миниатюрой будет несколько пустых квадратов.
На сегодня это все. Спасибо за внимание.