Opencart - Галерея Без Использования Модулей

Тема в разделе "Шаблоны, дизайн и оформление магазина", создана пользователем admin, 11 сен 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    1.590
    Симпатии:
    22.940
    Репутация:
    124
    В сегодняшней статье я расскажу вам, как установить и настроить галерею изображений или видео на своем сайте под управлением 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.jpg После нажатия на любое из изображений всплывает окно с удобной навигацией.

    gall2.jpg

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

    Код:
    <a href="http://www.youtube.com/watch?v=GKSRyLdjsPA" rel="prettyPhoto" title="YouTube видео">Видео с YouTube</a>
    где изменить ссылку с youtube на свою, а также, указать название ролика.
    Как видите все аккуратно и удобно. Вы кстати можете задать для этой галереи и дополнительные параметры, такие как скорость прокрутки, дизайн и прочее. Все эти описания вы сможете найти в документации к скрипту — PrettyPhoto.

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

    Вложения:

    • gallery.zip
      Размер файла:
      1,4 МБ
      Просмотров:
      4
    Skyer нравится это.