В сегодняшней статье я расскажу вам, как установить и настроить галерею изображений или видео на своем сайте под управлением 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.
Надеюсь статья вам будет полезной. Если есть вопросы то оставляйте их в комментариях.
Большое спасибо за статью. Я уже голову сломал с галереей на этом движке. Создать галерею получилось, все заработало, единственное, что осталось непонятным — как группировать галереи?
«Тут можно будет указать какие файлы будут прокручиваться в галереи 2:
gallery2
Это делается для того чтобы на одной странице задавать несколько галерей и группировать их по группам. Для следующей вы можете указать:
gallery3
После чего я забрасывал этот код в статью на Opencart и создавал отдельные альбомы.»
Пробовал вписывать в строке gallery3, но фото выводятся в той же галерее. Не могли бы Вы пояснить этот момент? Просто сейчас приходится для каждой галереи создавать отдельную статью.
Я тоже делал альбомы с помощью различных статей. В этой галереи фотографии группируются именно во всплывающем окне. Если вы установите в одной статье структуру:
Галерея 1
Список изображений с gallery1
Галерея 2
Список изображений с gallery2
В таком случае при нажатии на изображения первой категории, вы в списке перелистывания будете видеть только файлы из Галереи 1, и также при выборе второй.
Если необходимо создать полноценные отдеьлные альбомы, то выход только через отдельные статьи.
поясните,пожалуйста куда вставлять этот код:
<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>каким образом его добавлять в статью?
Добрый день, Татьяна. Вы наверняка имели ввиду саму структуру галереи, которую я приводил выше. Это обычный html, вставляется в любую статью или категорию, единственное при вставке нужно отключить визуальный редактор, делается при нажатии в его панели кнопки «Источник». Редактировать также нужно без редактора.
Подскажите у меня не перелистывается картинки, что я сделал не так?
И папку галерея я ставил в корень сайта, но что то не то….
Сергей, проверьте пути к картинкам, думаю вопрос решиться.
Здравствуйте Сергей.
Спасибо за статью. Я как и многие тоже перелазил весь инет, истратил кучу времени, а в результате галерейка без возможности на одной странице дать название каждой из них. Плюс ко всему сайт мультиязычный.
А с помощью этой статьи, для меня лично с легкость решились все эти задачи.
Спасибо автору еще раз.
У меня отображаются фото как поломанные, но кликая на них отображаются норм. В чем проблема?
Александр, проверьте правильно ли указан путь к миниатюрам галереи.
А если у меня в каталоге /catalog/view/theme/default/template/common нет файла footer.php есть только footer.tpl версия opencart 1.5.6?
Алексей, у меня ошибка речь идет именно о footer.tpl.
Не приближается картинка… ни в одном браузере — просто выкидывает на новую страницу с картинкой… что можно сделать?
для opencart 2.2.0.0 актуально ?
Спасибо! отличная идея, отладила всё, работает, пути все ок, но вот что-то кнопки не отображаются, только одна, «твитнуть» и иногда «фейсбук» догружается! что делать, почему так может быть?
и еще миниатюрки почему-то мутные, нет резкости.. Version 1.5.4.1 OcStore
всё, разобралась. Кнопки не отображались, потому что что-то в скриптах или стилях не ладилось, не нашла, что, а скачала заново этот же комплект, что и у Сергея.
А картинки мутные, потому что в папке Tumbnails очень-очень маленькие исходные фото и при растяжении они мутнеют от растяжки.
Спасибо, Сергей, Вы меня вдохновили, удачных проектов!