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

Галерея на 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;
}

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

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

gall2

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

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

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

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

16 комментариев

  1. Большое спасибо за статью. Я уже голову сломал с галереей на этом движке. Создать галерею получилось, все заработало, единственное, что осталось непонятным — как группировать галереи?
    «Тут можно будет указать какие файлы будут прокручиваться в галереи 2:
    gallery2
    Это делается для того чтобы на одной странице задавать несколько галерей и группировать их по группам. Для следующей вы можете указать:
    gallery3
    После чего я забрасывал этот код в статью на Opencart и создавал отдельные альбомы.»
    Пробовал вписывать в строке gallery3, но фото выводятся в той же галерее. Не могли бы Вы пояснить этот момент? Просто сейчас приходится для каждой галереи создавать отдельную статью.

  2. Я тоже делал альбомы с помощью различных статей. В этой галереи фотографии группируются именно во всплывающем окне. Если вы установите в одной статье структуру:

    Галерея 1

    Список изображений с gallery1

    Галерея 2

    Список изображений с gallery2

    В таком случае при нажатии на изображения первой категории, вы в списке перелистывания будете видеть только файлы из Галереи 1, и также при выборе второй.
    Если необходимо создать полноценные отдеьлные альбомы, то выход только через отдельные статьи.

  3. поясните,пожалуйста куда вставлять этот код:

        
            <a href="images/fullscreen/k1.jpg" rel="nofollow"></a>
        
            <a href="images/fullscreen/k2.jpg" rel="nofollow"></a>
        
            <a href="images/fullscreen/k3.jpg" rel="nofollow"></a>
        
            <a href="images/fullscreen/k4.jpg" rel="nofollow"></a>
    

    каким образом его добавлять в статью?

  4. Добрый день, Татьяна. Вы наверняка имели ввиду саму структуру галереи, которую я приводил выше. Это обычный html, вставляется в любую статью или категорию, единственное при вставке нужно отключить визуальный редактор, делается при нажатии в его панели кнопки «Источник». Редактировать также нужно без редактора.

  5. Подскажите у меня не перелистывается картинки, что я сделал не так?
    И папку галерея я ставил в корень сайта, но что то не то….

  6. Сергей, проверьте пути к картинкам, думаю вопрос решиться.

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

  8. У меня отображаются фото как поломанные, но кликая на них отображаются норм. В чем проблема?

  9. Александр, проверьте правильно ли указан путь к миниатюрам галереи.

  10. А если у меня в каталоге /catalog/view/theme/default/template/common нет файла footer.php есть только footer.tpl версия opencart 1.5.6?

  11. Алексей, у меня ошибка речь идет именно о footer.tpl.

  12. Не приближается картинка… ни в одном браузере — просто выкидывает на новую страницу с картинкой… что можно сделать?

  13. для opencart 2.2.0.0 актуально ?

  14. Спасибо! отличная идея, отладила всё, работает, пути все ок, но вот что-то кнопки не отображаются, только одна, «твитнуть» и иногда «фейсбук» догружается! что делать, почему так может быть?

  15. и еще миниатюрки почему-то мутные, нет резкости.. Version 1.5.4.1 OcStore

  16. всё, разобралась. Кнопки не отображались, потому что что-то в скриптах или стилях не ладилось, не нашла, что, а скачала заново этот же комплект, что и у Сергея.
    А картинки мутные, потому что в папке Tumbnails очень-очень маленькие исходные фото и при растяжении они мутнеют от растяжки.
    Спасибо, Сергей, Вы меня вдохновили, удачных проектов!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *