.jpg)
Сегодня мы разберем каким образом реализована поддержка JS библиотек в фреймворке Yii и создадим страницы с подробным описанием игр. Прежде всего, пару слов о том, как будут использоваться JS библиотеки в данном примере. Для каждой игры есть несколько заранее подготовленных скриншотов, которые нам нужно показать на страницы с подробным описанием игры. Сами картинки находятся на сайте партнерки, а в нашей базе данных сохранены ссылки на них, но это не принципиально. Для нас главное правильно создать теги img. Разместить на странице игры полноразмерные скриншоты не получится, т. к. они слишком большие, поэтому мы покажем их миниатюры. А при клике на любую из миниатюр будет открываться галерея с полноразмерными скриншотами. Для создания галереи используем библиотеку jQuery и плагин jQuery Lightbox. jQuery идет в комплекте с фреймворком, а Lightbox нужно скачать. Теперь разберём принцип подключения. В принципе, мы можем подключить любой JS файл в макете (layout), но такой подход не всегда будет удачным. Например, в нашем случае, подключать JS файлы нужно только на страницах с подробным описанием игр, для всех остальных страниц они не нужны, поэтому придется либо определять в шаблоне тип запрашиваемой страницы, либо использовать отдельные шаблоны для каждой из страниц. Ни один из этих вариантов удобным назвать нельзя. Кроме того, наша страница может состоять из нескольких блоков, которые создаются с помощью компонентов (подробнее о них мы поговорим в следующий раз). Каждый из них может требовать для своей работы какие-нибудь JS или CSS файлы. При этом мы должны убедиться, что ни один файл не подключен дважды. Создание таких проверок выльется в довольно объемный кусок кода, но фреймворк позволяет легко решить эти проблемы. Он предоставляет нам объект CClientScript, который содержит все необходимые методы для работы со статическими файлами. В нашем случае необходимо. 1) Скачать плагин jQuery Lightbox и сохранить его в папке js/. Получится такая структура папок:
js/ lightbox/ css/ js/ images/ index. php
2) Настроить плагин. Для этого создаём файл js/init_lightbox.
js