Перейти к содержанию
igorfelix

[Решено] Всплывающее окно через colorbox

Рекомендуемые сообщения

День добрый, элементарную вещь не могу сделать в карточке товара.

 

нужно при нажатии на ссылку в карточке товара - появление colorbox окошка, в котором отображается скрытое содержание на данной странице.

 

тоесть текст например прячем на странице, а при нажатии на ссылку этот текст отображается в colorbox окошке (pop up)

 

не хочу подключать fancybox , так как можно использовать colorbox

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

<div class="какой-то"> 
<a class="colorbox" href="./index.php?route=information/information/info&information_id=XXX">Название элемента</a>
 
   <script type="text/javascript">
        jQuery.colorbox.settings.maxWidth  = '95%';
        jQuery.colorbox.settings.maxHeight = '95%';
 
        var resizeTimer;
        function resizeColorBox()
        {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                if (jQuery('#cboxOverlay').is(':visible')) {
                    jQuery.colorbox.load(true);
                }
            }, 300);
        }
 
        jQuery(window).resize(resizeColorBox);
        window.addEventListener("orientationchange", resizeColorBox, false);
    </script

 

так например можно вытащить в колорбокс статью обычную.Естественно заменить ID статьи _id=XXX на свои данные (можно посмотреть в админке Каталог-Статьи в конце  адресной строки браузера)

 

 И конечно сменить <div class="какой-то">  на свой класс и обыграть его  в стилях.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<div class="какой-то"> 
<a class="colorbox" href="./index.php?route=information/information/info&information_id=XXX">Название элемента</a>
 
   <script type="text/javascript">
        jQuery.colorbox.settings.maxWidth  = '95%';
        jQuery.colorbox.settings.maxHeight = '95%';
 
        var resizeTimer;
        function resizeColorBox()
        {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                if (jQuery('#cboxOverlay').is(':visible')) {
                    jQuery.colorbox.load(true);
                }
            }, 300);
        }
 
        jQuery(window).resize(resizeColorBox);
        window.addEventListener("orientationchange", resizeColorBox, false);
    </script

 

так например можно вытащить в колорбокс статью обычную.Естественно заменить ID статьи _id=XXX на свои данные (можно посмотреть в админке Каталог-Статьи в конце  адресной строки браузера)

 

 И конечно сменить <div class="какой-то">  на свой класс и обыграть его  в стилях.

 

Том, пасиба, вот только у меня элемент уже на странице, мне не нужно его загружать по ссылке.

про эту вещь я уже узнал недавно, тоже помогло ( подгружает содержимое по ссылке ) 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Что за элемент,который нельзя вот здесь указать ?

<a class="colorbox" href="........">Название элемента</a>

и почему не использовать статьи?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

хм, попробую как вы описали. спасибо за помощь 

 

 

да у меня там флешь элемент. и я его хотел отображать только в colorbox , а он уже на странице. тоесть его надо сначала спрятать, а потом отобразить в popup colorbox.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<div class="какой-то"> 
<a class="colorbox" href="./index.php?route=information/information/info&information_id=XXX">Название элемента</a>
 
   <script type="text/javascript">
        jQuery.colorbox.settings.maxWidth  = '95%';
        jQuery.colorbox.settings.maxHeight = '95%';
 
        var resizeTimer;
        function resizeColorBox()
        {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                if (jQuery('#cboxOverlay').is(':visible')) {
                    jQuery.colorbox.load(true);
                }
            }, 300);
        }
 
        jQuery(window).resize(resizeColorBox);
        window.addEventListener("orientationchange", resizeColorBox, false);
    </script

так например можно вытащить в колорбокс статью обычную.Естественно заменить ID статьи _id=XXX на свои данные (можно посмотреть в админке Каталог-Статьи в конце  адресной строки браузера)

И конечно сменить <div class="какой-то">  на свой класс и обыграть его  в стилях.

 

Статьи всплывают отлично, но вместе с остальными элементами - шапка сайта + модули по сторонам..

Вместо ссылки id статьи указал seo-url статей (./delivery и т.п.), может в этом проблема.. Подскажите как исправить?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Kyuzo, курить надо документацию, код, форум, а не траву.

при использовании

information/information/info
выводится только содержимое статьи.

а полная страница - только при базовом вызове

information/information

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
information/information/info

выводится только содержимое статьи.

 

Да, был не внимателен.. Спасибо!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От sv2109
      300.00 руб
      Скачать/Купить дополнение


      Просмотр картинок товара, быстрый просмотр товаров
      Модуль добавляет возможность на странице категории просматривать все картинки товаров.
      По клике на картинку товара на странице категории открывается окно со всеми картинками товара.
      Модуль умеет работать в 2-х режимах:
      1. В окне просмотра картинок показываются только картинки с возможностью перелистывания (Демо)
      2. В окне просмотра открывается карточка товара с картинками в виде слайдера и зумом, а так же кнопкой купить, опциями итд.
      (Демо)
      vqmod не используется
      Установка
      1. Скопировать все с папки "upload" в корневую папку вашего магазина. Файлы ядра не будут перезаписаны.
      2. Установить модуль в панели управления
      3. При необходимости поменяйте настройки
      Версии движка, на которых тестировался модуль:
      - ocStore v1.5.5.1
      но должен работать на всех 1.5.х версиях
      Версия 1.1
      - изменен код
      - модуль теперь работает не только на странице категорий но у на других страницах
      - добавлена поддержка сео ссылок
      - добавлена поддержка модуля filter pro
      - в режиме показа только картинок размеры окна задаются в админке


      Версия модуля, которая работает на странице товара: Просмотр картинок товара
      Добавил sv2109 Добавлено 26.03.2014 Категория Модули Системные требования Сайт разработчика sv2109.com Старая цена Метод активации Ioncube Loader OpenCart ocStore OpenCart.Pro, ocShop  
    • От sv2109
      Модуль добавляет возможность на странице категории просматривать все картинки товаров.
      По клике на картинку товара на странице категории открывается окно со всеми картинками товара.
      Модуль умеет работать в 2-х режимах:
      1. В окне просмотра картинок показываются только картинки с возможностью перелистывания (Демо)
      2. В окне просмотра открывается карточка товара с картинками в виде слайдера и зумом, а так же кнопкой купить, опциями итд.
      (Демо)
      vqmod не используется
      Установка
      1. Скопировать все с папки "upload" в корневую папку вашего магазина. Файлы ядра не будут перезаписаны.
      2. Установить модуль в панели управления
      3. При необходимости поменяйте настройки
      Версии движка, на которых тестировался модуль:
      - ocStore v1.5.5.1
      но должен работать на всех 1.5.х версиях
      Версия 1.1
      - изменен код
      - модуль теперь работает не только на странице категорий но у на других страницах
      - добавлена поддержка сео ссылок
      - добавлена поддержка модуля filter pro
      - в режиме показа только картинок размеры окна задаются в админке


      Версия модуля, которая работает на странице товара: Просмотр картинок товара
    • От michnoff
      Приветствую! Имеется магазин сантехники на ocstore 1.5.5.1.2. не могу справиться с всплывающим изображением colorbox( например при увеличении изображения в карточке товара). Если сайт отображается в полном размере(мобильной верстки нет), то всплывающее изображение отображается слева и не в полный размер - вот так http://pixs.ru/showimage/Bezimyanni_6691044_22501114.png , а нужно, что бы изображение открывалось по ширине дисплея во весь размер вот так http://pixs.ru/showimage/Bezimyanni_5886507_22501123.png. Это можно как то поправить? Если нужна ссылка на магазин http://shop-grohe.by/
    • От sonson
      Почему он это мне пишет ?
      что случилось и как исправить?
      jquery.colorbox-min.js:4 Uncaught TypeError: Cannot read property 'rel' of undefined
      просто в один прекрасный момент взял и перестал работать colorbox :(
    • От Bloomberg
      Доброго времени суток! Помогите, пожалуйста, разобраться. Хочу сделать в карточке товара (OcStore 1.5.5.1.2 PavTheme StyleShop) всплывающие окна при нажатии на ссылку. В всплывающем окне будет текст например о доставке или оплате или картинка. Как это правильно реализовать?
      Большое спасибо!
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.