Pirobox - галерея на jQuery

Еще одна красивая галерея на jQuery - Pirobox. Работает во всех нормальных браузерах и в любимых всеми IE6-7.

Шаг 0.

Эта версия скрипта работает с jquery 1.2.6 (c версией jquery 1.3.1  работает pirobox 1.1, т.к. на момент подготовки урока эта версия находилась на стадии бета, урок подготовлен для версии 1.0. Скачать версию 1.1 можно на сайте разработчика. ), поэтому как обычно подключаем между тэгами <head></head> jquery, плагин pirobox и таблицу стилей pirobox.css

Шаг 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-код, иначе рядом с миниатюрой будет несколько пустых квадратов.

На сегодня это все. Спасибо за внимание.

/*

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.pirolab.it
Перевел: Евгений Стыценков
Урок создан: 27 Мая 2009
Просмотров: 88969
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^