Галерея на Opencart без использования модулей

В сегодняшней статье я расскажу вам, как установить и настроить галерею изображений или видео на своем сайте под управлением Opencart.

Лично я столкнулся с такой задачей, когда клиент, который торгует кровлей захотел организовать у себя галереи различных типов черепицы. Первое что я сделал — это воспользовался поиском Google и он мне ничего не принес.

Я сразу начал искать удобную галерею на jQuery. Мне припала по душе  — PrettyPhoto.

Вот несколько причин по которой я использую именно ее:

• легкая настройка и управление;
• удобный внешний интерфейс, позволяет организовать вывод изображений в виде сетки, а при просмотре изображения в сплывающем окне появляется удобный просмотрщик с навигацией;
• можно задать тайтл и название (alt) для фотографии;
• возможность поделится в социальных сетях (twitter, facebook).

Из минусов:

• необходимо создавать не только основной файл изображения, но и миниатюру;
• клиент без вашей помощи вряд ли справится с редактированием. Но у меня, как показывает практика только 15% клиентов начинают сами разбираться с редактированием и прочим, а остальные заказывают эту услугу. Так что я не считаю это проблемой. Особенно это не проблема, если вы делаете сайт лично для себя.

Приступаем к настройке

Для начала переходим в папку /catalog/view/theme/default/template/common и находим файл header.tpl. Перед закрывающимся тегом </head>, вписываем следующий код:

<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />

Таким образом мы подключаем сам скрипт галереи к CMS Opencart и обеспечиваем применение стилей. Далее в этой же папке  /catalog/view/theme/default/template/common, находим файл footer.tpl и перед закрывающимся тегом </body>, вставляем вот этот код:

<script type="text/javascript">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Теперь создаем саму структуру галереи, вот как это делал я:

<ul class="gallery clearfix">
    <li>
        <a href="images/fullscreen/k1.jpg" rel="prettyPhoto[gallery2]"><img alt="Пример №1" height="147" src="images/thumbnails/ks1.jpg" width="220" /></a></li>
    <li>
        <a href="images/fullscreen/k2.jpg" rel="prettyPhoto[gallery2]"><img alt="Пример №2" height="147" src="images/thumbnails/ks2.jpg" width="220" /></a></li>
    <li>
        <a href="images/fullscreen/k3.jpg" rel="prettyPhoto[gallery2]"><img alt="Пример №3" height="147" src="images/thumbnails/ks3.jpg" width="220" /></a></li>
    <li>
        <a href="images/fullscreen/k4.jpg" rel="prettyPhoto[gallery2]"><img alt="Пример №4" height="147" src="images/thumbnails/ks4.jpg" width="220" /></a></li>
</ul>

Тут можно будет указать какие файлы будут прокручиваться в галереи 2:

gallery2

Это делается для того чтобы на одной странице задавать несколько галерей и группировать их по группам. Для следующей вы можете указать:

gallery3

После чего я забрасывал этот код в статью на Opencart и создавал отдельные альбомы.

После проделанных действий вам нужно залить сам скрипт, стили и папку для изображений в коневую директорию сайта. Скачать ее вы сможете вот тут.

После загрузки файлов нужно создать нужные вам изображения. Размер для больших фото и для миниатюр выбирайте сами, главное не забудьте вписать его в html структуру которую я приводил выше, как вы видите там я задавал ширину миниатюры в 220px.

Заливаете файлы оригинального размера в папку /images/fullscreen/, а файлы миниатюр в папку /images/thumbnails/.

После этого идем на сайт интернет магазина и обновляем страницу, на которую мы вписывали html структуру.  Для того чтобы элементы выстроились в форме сетки, я для <li> в файле stylesheet.css задал следующий стиль:

.gallery li {
list-style: none;
float: left;
margin-right: 20px;
margin-bottom: 15px;
}

Вот что у меня вышло.

После нажатия на любое из изображений всплывает окно с удобной навигацией.

Для того чтобы вставить видео с youtube нужно использовать структуру:

<a href="http://www.youtube.com/watch?v=kh29_SERH0Y?rel=0" rel="prettyPhoto" title="YouTube видео">Видео с YouTube</a>

где изменить ссылку с youtube на свою, а также, указать название ролика.
Как видите все аккуратно и удобно. Вы кстати можете задать для этой галереи и дополнительные параметры, такие как скорость прокрутки, дизайн и прочее. Все эти описания вы сможете найти в документации к скрипту — PrettyPhoto.

Надеюсь статья вам будет полезной. Если есть вопросы то оставляйте их в комментариях.