Галерея для OpenCart 2


Рубрика: Opencart -> Создание сайта -> Блог
Метки: | | | | | |
Просмотров: 6664
Галерея для OpenCart 2

Недавно обратились ко мне знакомые: напиши модуль галереи для Opencart. Я сначала отказал было, мол времени нет, да и модуль-то одноразовый, не сильно востребованный. А потом вдруг осенило: а зачем писать ocmod или vqmod, когда в Opencart  2-й версии уже есть всё готовое, а именно Twitter bootstrap с безграничными возможностями. Пошёл я на http://startbootstrap.com/template-categories/all/  и вот оно, пол-часа и галерея готова. Конечно, это не полноценный модуль галереи, который можно выводить где угодно, а просто информационная страница переделанная под вывод изображений. Зато быстро, без подгрузки дополнительный Js- скриптов, стилей, а, значит, без дополнительной нагрузки. Давайте расскажу.

  Как сделать страницу с галереей изображений в Opencart 2?

Берите любой вариант 2, 3 или 4 колонки и делайте, как я.

 Я скачал 4-х колоночный вариант. Вот этот http://startbootstrap.com/template-overviews/thumbnail-gallery/  Скачиваю и распаковываю архив. Лучше сразу завести отдельный сайт в Openserver или Denwer, или в чём Вы там работаете. Видим файл index.html и три папки js, fonts и css. Создаём для Opencart ещё одну папку image и в ней папку c любым названием, я назвал её gallery, куда и кидаю картинки для будущей галереи.

 Открываю файл index.html  и прописываю свои картинки, добавляю подписи в каждом из таких  блоков

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                </a>
            </div>

Получается такое:

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
            </div>

 Смотрим и видим, что уже почти готовая галерея.

bootstrap галерея для opencart

Ну у Вас будут свои картинки. Не забываем alt и title прописывать. Но это ещё не всё. Давайте приделаем всплывающее модальное окно, чтобы при щелчке по миниатюре выскакивало увеличенное изображение. Для этого после каждого упомянутого блока добавляю код модального окна, а все блоки миниатюр подвязываю к модальным окнам. Наглядней показать код первого блока:

            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_1">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4>
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div>
          
 

Второй блок будет такой же, но своими картинками , а вот эти места:  href="#myModal_1" и div id="myModal_1" изменятся на: :  href="#myModal_2" и div id="myModal_2"

Ну а третий блок будет уже с тройками и так далее. Думаю, принцип ясен. Но не если не хотите, то не заморачивайтесь. Вот берите  мой готовый код. Прописывайте свои картинки, свои TITLE и ALT

ГОТОВЫЙ КОД ДЛЯ ГАЛЕРЕИ

показать

        <div class="row">
             <!-- заголовок -->
            <div class="col-lg-12">
                <h1 class="page-header">моя галерея</h1>
            </div><!-- заголовок -->
            <!-- первая картинка -->
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_1">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4>  <!-- заголовок модального окна -->
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div><!-- первая картинка -->
            <!-- вторая картинка -->
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_2">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4><!-- заголовок модального окна -->
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div><!-- вторая картинка -->
            <!-- 3 картинка -->
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_3">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4><!-- заголовок модального окна -->
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div><!-- 3 картинка -->
            <!-- 4 картинка -->
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_4">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_4" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4><!-- заголовок модального окна -->
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div><!-- 4 картинка -->
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_5">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_5" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4>
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_6">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_6" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4>
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_7">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_7" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4>
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_8">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_8" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4>
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_9">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_9" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4>
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_10">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_10" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4>
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_11">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_11" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4>
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" data-toggle="modal" href="#myModal_12">
                    <img class="img-responsive" src="image/gallery/madchen.jpg" alt="это моя картинка" title="это моя картинка">
                </a>
                <h4>заголовок</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
             <div id="myModal_12" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
               <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">?</button>
                    <h4 class="modal-title">это она</h4>
                   </div>
             <div class="modal-body">
                    <img class="img-responsive" alt="это моя картинка" title="это моя картинка" src="image/gallery/madchen.jpg" />
             </div>
             <div class="modal-footer">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
             </div>
            </div>
            </div>
           </div>
        </div>

Теперь идём в админку Opencart: система – дизайн – макеты.  : жмём плюсик сверху ДОБАВИТЬ. Пишем название GALLERY, магазин – по-умолчанию, путь – GALLERY Жмём сохранить

создание макета под галерею в Opencart

 

Дальше: каталог – статьи. На плюсик ДОБАВИТЬ. Название Ваше, любое.

В редакторе переходим в режим кода. И вставляем код, который я Вам дал и в котором Вы прописали свои картинки и подписи к ним, не забыв, конечно, ALT и TITLE (ведь Вы профи и делаете всё правильно) А на вкладке дизайн выбираете свой макет GALLERY, во вкладке данные можете поставить галочку «отображать снизу»  Сохраняем. Осталось только папку gallery с картинками из папки image закинуть в папку image Вашего сайта на Opencart.

создание галереи в Opencart через стандартный редактор

 Смотрим результат. Да красиво всё. А главное просто и без лишних скриптов. Вы можете ещё порыться на сайте http://startbootstrap.com и подобрать по аналогии что-то для себя.

модуль галереи для Opencart 2

Студия простых и эффективных решений для всех и каждого как всегда на высоте. Из недостатков этого способа выделяю то, что из встроенного в Opencart редактора Summernote Вы не сможете редактировать картинки в визуальном режиме, т.к. он, этот редактор, сам завязан на Bootstrap. Тут уж Вам придётся установить другой редактор, например tinymce, как я рассказал здесь и здесь  

Кстати у CKEditor есть готовые плагины для создания записей с использованием Bootstrap.

Ну, наверно, на этом всё. Комментируйте. И посмотрите для разгрузки ролик, а то нельзя всё время буквы и коды читать, можно мозг повредить. Как же надо было любить Фрэнку Аву Гарднер, чтобы написать такую пронзительную песню. Жаль она его не любила.

 

 

 

Комментариев: 2 RSS
Дмитрий2
2017-03-23 в 19:39:25

Это конечно решение, но оно не удобное и не правильное. Существует же очень много готовых модулей, которые позволяють удобно создавать фотогалереи, например https://opencart2x.ru/moduli/vid/modul-fotogalereya Ведь каждый раз лазить в код, чтобы поменять или добавить картинку - это как минимум неправильно. Используйте модули - упростите себе жизнь cheese

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)