В этом уроке мы поговорим о создании простой фотогалереи для нашего сайта.

Фотогалерею мы сделаем без категорий, поэтому мы обойдемся уже знакомым нам функционалом лент. За одно мы разберемся с автоматической генерацией уменьшенных копий изображений и попытаемся установить лайтбокс для более удобного просмотра изображений.

Итак, приступим.

Зайдем в административную часть нашего сайта и авторизуемся под пользователем "root".

Добавим новую ленту, аналогично тому, как мы её добавляли при создании ленты новостей.

Заполним форму добавления следующим образом:

  • Название: Галерея
  • Идентификатор ленты: gallery
  • Название элемента ленты: Название*
  • Файл/Картинка: Картинка*
  • Постраничность: 0
  • Сортировка по полю: Свой порядок сортировки
  • Направление сортировки: Прямое
  • Шаблон списка: gallery/list

Остальные поля оставим пустыми.

Теперь перейдем по ссылке "элементы" нашей галереи и добавим несколько фото:

несколько фото в галерее

Административная часть и тестовое наполнение готовы. Теперь займемся внешним видом галереи.

Создадим файл application/modules/default/views/scripts/bands/gallery/list.phtml:

Copy Source | Copy HTML
  1.             <div class="gallery">
  2.  
  3. <?php foreach ($this->items as $item):?>
  4.                 <a href="<?php echo $this->z_Preview($item->file,array('w'=>600))?>" title="<?php echo $item->title?>">
  5.                     <img src="<?php echo $this->z_Preview($item->file,array('w'=>160,'h'=>120))?>" />
  6.                 </a>
  7. <?php endforeach;?>
  8.  
  9.             </div>

И чтобы наша галерея выглядела более красиво, добавим новые стили в наш css файл шаблона:

Copy Source | Copy HTML
  1. .gallery a {
  2.     text-decoration: none;
  3. }
  4. .gallery a img {
  5.     padding: 11px;
  6. }

На этом создание галереи завершено.

Но обратим внимание на код создания превью: <?php echo $this->z_Preview($item->file,array('w'=>160,'h'=>120))?>

Тут мы пользуемся помощником представления z_Preview, первым атрибутом которого идет наш файл(точнее его идентификатор) а вторым массив с параметрами превью.

Ну и на последок немного облагородим нашу галерею, подключив лайтбокс(lightbox). Скачаем его и распакуем его файлы в корень нашего сайта.

Теперь изменим наш шаблон application/modules/default/views/scripts/bands/gallery/list.phtml, добавив в его начало следующий код:

Copy Source | Copy HTML
  1.  
  2. <?=$this->headLink()->appendStylesheet( '/css/jquery.lightbox-0.5.css' )?>
  3. <?=$this->headScript()->appendFile('/js/jquery.lightbox-0.5.js')?>
  4. <script type="text/javascript">
  5. $(function() {
  6.     $('.gallery a').lightBox({
  7.             imageLoading: '/images/lightbox-ico-loading.gif',
  8.             imageBtnPrev: '/images/lightbox-btn-prev.gif',
  9.             imageBtnNext: '/images/lightbox-btn-next.gif',
  10.             imageBtnClose: '/images/lightbox-btn-close.gif',
  11.             imageBlank: '/images/lightbox-blank.gif'
  12.     });
  13. });
  14. </script>

Теперь наша галерея совсем модная, с увеличивающимися картинками:

внешний вид галереи

внешний вид галереи

На этом наш урок завершен.