Jump to content
Sign in to follow this  
RGB

Интересный способ работы с colorbox

Recommended Posts

Спешу поделиться классным способом работы со всплывающими окнами :-)

Очевидно, что всплывающие окна (с увеличенными картинками и другой информацией) - это хорошо и гораздо лучше открытия в новом окне, особенно когда там не много информации, которую лучше показать посетителю сразу на той странице, где он находится.

Многие из вас наверное заметили, что каждая статья в Opencart, помимо своего основного адреса, может быть открыта по такому адресу:

/index.php?route=information/information/info&information_id=1

При этом открывается именно содержимое статьи, т.е. без шапки сайта, без футера и т.п., чистый html из статьи.

Очень удобно открывать такие вещи через colorbox, допустим информацию про доставку, чтобы посетитель, зайдя на страничку товара, не открывал лишних вкладок, а просто клацал левой кнопкой по ссылке, ведущей на статью, которая появляется во всплывающем окошке.

Но при этом у такого способа есть серьезный недостаток, как и вообще у самого colorbox - если посетитель клацает средней кнопкой (или правой - открыть новую вкладку), то вместо красивого всплывающего окошка появится голая новая вкладка с тем контентом, который должен был загружаться в colorbox (но который туда не попадает, ибо colorbox в таком случае вообще не инициируется). Попробуйте сами открыть так фотку товара у себя на странице товара. И если с картинками еще ситуация терпимая, то при открытии статьи по вышеуказанному способу, откроется голая страница, ничем не напоминающая сайт магазина, с одним лишь текстом статьи.

Решается эта проблема через изящный костыль способ, хотя не валидно (не по спецификации html). Что нужно сделать для этого?

В параметрах инициализации ссылок на colorbox дописать:
href:function(){ return $(this).attr('to'); },

А в коде страницы в том месте, где идет ссылка на то, что мы хотим показать во всплывающем окне, сделать вот так (любители валидного html, не бросайте в меня помидорами):
<a to="index.php?route=information/information/info&information_id=1" href="Статья_1" class="" title="">Текст ссылки</a>

Что это все значит: как видите, у элемента a появился новый параметр to, которого нет в спецификации хтмл и который по сути будет адресом того содержимого, которое мы хотим открыть во всплывающем окне. При этом у ссылки все так же остается правильный адрес href, по которому пойдут поисковики и те пользователи, которые захотят открыть содержимое через среднюю кнопку или через контекстное меню, короче через создание новой вкладки.

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

 

UPD: А чтобы проходить валидацию, можно использовать data-to вместо to

  • +1 6

Share this post


Link to post
Share on other sites

А что поменялось то от этого?

Share this post


Link to post
Share on other sites

При попытке открытия статей, подгружаемых через colorbox в popup-окно, в новой вкладке - открывается не голый html-код одной лишь статьи, а полноценная страничка магазина с этой статьей (собственно вы сами указываете, что открывать).

Можно было бы запретить пользователю нажатие средней кнопки или вызов контекстного меню, чтобы избежать такой ситуации, но ИМХО в юзабилити нет ничего хуже, чем лишать пользователя привычных инструментов просмотра сайтов в сети.

Share this post


Link to post
Share on other sites

Короче говоря, в такой ситуации до предложенного варианта открывшаяся статья выглядела бы вот так:

dyth.png

А после внесения изменений - уже так:

uS3v.png

Есть разница? :-)

Share this post


Link to post
Share on other sites

RGB,

Добрый день!

Подскажите, а где находится "В параметрах инициализации ссылок на colorbox дописать:"... , т.е. какой файл ковырять?

хочу сделать галерею фото, Ваше решение похоже то, что мне надо.

Share this post


Link to post
Share on other sites

Кстати, RGB

у Вас по этой ссылке http://rozetka.com.ua/contacts/ открывается карта проезда в новом окне. Как-то не красиво. Почему бы не сделать вплывающее окно?

Наподобие как при просмотре товара - кликаешь, а фотка увеличивается.

А главный вопрос - как это сделать (как в html ссылку на рисунок написать чтоб работало), напишите плиз) если не сложно

Share this post


Link to post
Share on other sites

Зависит от того, что вы делали со своим магазином :-) Я вот чтобы не путаться, создал отдельный класс для таких ссылок, которые имеют эту хитрую конструкцию, и назвал его showArticle, а в файле\catalog\view\javascript\common.js в самом начале добавил:

$(document).ready(function(){$(".showArticle").colorbox({href:function(){ return $(this).attr('to'); },fixed: true, width:"650px", height:"500px"});});

Соответственно теперь у меня все такие ссылки выглядят в коде:

<a href="site.com" to="index.php?route=information/information/info&information_id=1" class="showArticle" title="">

Вот только как это можно применить к галерее фото я с трудом представляю, но вам виднее :-)

Share this post


Link to post
Share on other sites

Понял :-) , спасибо за подсказку!

Попробую ковырнуть, об успехах отпишусь)

Share this post


Link to post
Share on other sites

Во спасибо. Такая нужная и незадокументированая фича.

Share this post


Link to post
Share on other sites

Кстати, RGB

у Вас по этой ссылке http://rozetka.com.ua/contacts/ открывается карта проезда в новом окне. Как-то не красиво. Почему бы не сделать вплывающее окно?

 

Только сейчас заметил эту часть вашего комментария. Спасибо, мне очень приятно, что вы меня посчитали владельцем розетки :-D

  • +1 1

Share this post


Link to post
Share on other sites

Кстати, RGB

у Вас по этой ссылке http://rozetka.com.ua/contacts/ открывается карта проезда в новом окне. Как-то не красиво. Почему бы не сделать вплывающее окно?

 

Только сейчас заметил эту часть вашего комментария. Спасибо, мне очень приятно, что вы меня посчитали владельцем розетки :)

да посчитал, почему бы и нет :-)

Share this post


Link to post
Share on other sites

Кстати, насчет всплывающего окна, наподобие как открывается окно с фоткой товара - если кто из заходящих в тему знает "секрет" - поделитесь, как правильно прописать класс ссылки, чтоб заключенный в ссылку код показывался во всплывающем окне при клике. Решения пока не успел найти. А было бы полезно. Например,  галерея фото, видео отзывы (выкладываем миниатюрные фото, при клике всплывает окошко с увеличенным фото или встроенным видео).

Share this post


Link to post
Share on other sites

Можно указать тип содержимого - хтмл, и вписать туда вообще что душе угодно, хоть видео с ютуба, хоть целую новую страницу. Посмотрите тут примеры

  • +1 1

Share this post


Link to post
Share on other sites

А можно сделать адиптивный поп-ап, размеры которого меняются под размер страницы? Как на fancybox http://fancyapps.com/fancybox/demo/ ?

В доках и примерах не нашел.

Share this post


Link to post
Share on other sites

А нужен ли он на мобильных устройствах? Ведь там и так экран маленький, и использование поп-апа с увеличенным изображением на responsive-шаблонах ничего не даст. Я видел такое решение с его отключением на маленьких экранах.

Ну а если все таки без ресайза никак, то на гитхабе есть обсуждение этой темы 

Share this post


Link to post
Share on other sites

Дело даже не в мобильных устройствах. Я например поставил большую картинку товара  на карточку товара- 1400*1000.  У пользователей с нормальными мониторами FullHD все будет хорошо. А у пользователей ноутбуков - картинка уедет за пределы окна и появятся полосы прокрутки. 

Share this post


Link to post
Share on other sites

Пожалейте пользователей с медленным инетом :) 

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

Share this post


Link to post
Share on other sites

Pashast, нашел классное решение, причем срабатывает даже при смене ориентации по сенсору :-)

    <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>
  • +1 1

Share this post


Link to post
Share on other sites

Еще один способ всплывающего окна: 

<?php echo 'Размерная сетка: ' ?><a class="colorbox" rel="{handler: 'iframe', size: {x: 700, y: 550}}" href="<?php echo '/index.php?route=information/information/info&information_id=№статьи' ?>"><?php echo 'Таблица' ?></a>
  • +1 1

Share this post


Link to post
Share on other sites

 

Еще один способ всплывающего окна: 

<?php echo 'Размерная сетка: ' ?><a class="colorbox" rel="{handler: 'iframe', size: {x: 700, y: 550}}" href="<?php echo '/index.php?route=information/information/info&information_id=№статьи' ?>"><?php echo 'Таблица' ?></a>

Да, можно выводить и через фрейм, но этот способ не отобразит окно в нужных размерах, а растянет его на весь экран, если использовать функцию для ресайза из моего прошлого сообщения

Share this post


Link to post
Share on other sites

Подскажите как можно вывести всплывающую картинку в статье?

Я методом тыка нашел такой способ: 

<a class="colorbox" href="/image/data/картинка.jpg"><img alt="" src="/image/data/Vlabi/картинка.jpg" style="height: 100px; width: 100px;" /></a> 

Этот способ открывает только конкретную картинку а вот листать картинки если их несколько нельзя. 

Может еще как-то можно, что с перелистыванием?

Share this post


Link to post
Share on other sites

откройте product.tpl и посмотрите, как реализован вывод фоток к товару, если их несколько, то есть и перелистывание

Share this post


Link to post
Share on other sites

нашёл вот такой код: 

<?php if ($thumb || $images) { ?>
				<div class="left">
					<div class="ifsalemove"></div>				
					<?php $zoomHow = $this->config->get('zoom_status');	if ($zoomHow == 1) {?>	
                        <?php if ($thumb) { ?>
                            <div class="image">
                        		<div id="wrap">
                        			<a href="<?php echo $popup; ?>" class="cloud-zoom" id="zoomFull" rel="position: 'inside' ,showTitle: false, adjustX:0, adjustY:0" style="position: relative; display: block;">
                        				<img src="<?php echo $thumb; ?>" id="image" style="display: block;" />
                        			</a>
                        		</div>	
																
                        		<div class="cloud_zoom_about"><?php echo $cloud_zoom_about; ?></div> 
                        		<div class="cloud_zoom_lupe"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox" id="zoomFullLight" ><i class="icon-zoom-in"></i></a></div> 
                        	</div>
                        <?php } ?>
                        <?php if ($images) { ?>
						    <div class="image-additional">
								<a href="<?php echo $popup; ?>" itemprop="image" title="<?php echo $heading_title; ?>"  class="cloud-zoom-gallery"  rel="useZoom: 'zoomFull', smallImage: '<?php echo $thumb; ?>' "><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
						        <?php foreach ($images as $image) { ?>
						        	<a href="<?php echo $image['popup']; ?>" itemprop="image" title="<?php echo $heading_title; ?>"  class="cloud-zoom-gallery"  rel="useZoom: 'zoomFull', smallImage: '<?php echo $image['thumb']; ?>' "><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>
						        <?php } ?>			
                            </div>
							<a href="<?php echo $popup; ?>" class="colorbox cboxElement" rel="colorbox"></a>
							<?php foreach ($images as $image) { ?>
								<a href="<?php echo $image['popup']; ?>" class="colorbox cboxElement" rel="colorbox"></a>
							<?php } ?>
                        <?php } ?>   

Я думаю это он - наверно. И как его подкинуть в статьи?

Share this post


Link to post
Share on other sites

да уж, cloudzoom  в статьи вам точно не нужен

окей, откройте демку колорбокса http://www.jacklmoore.com/colorbox/example1/

и посмотрите на пример группировки фото

<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p>
<p><a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></p>
<p><a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></p>

у ссылок на эти три фотки указан один класс group1, вот этого и достаточно для того, чтобы можно было фотки по этим ссылкам проматывать

Share this post


Link to post
Share on other sites

да уж, cloudzoom  в статьи вам точно не нужен

окей, откройте демку колорбокса http://www.jacklmoore.com/colorbox/example1/

и посмотрите на пример группировки фото

<p><a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></p

у ссылок на эти три фотки указан один класс group1, вот этого и достаточно для того, чтобы можно было фотки по этим ссылкам проматывать

Не сработало!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By comers
      Привет!
      Стоит задача показывать корзину в шапке, если товар добавлен в нее или скрывать, если она пустая. Добавление класса к #cart после php-проверки не вариант, т.к. надо корзину показывать сразу после первого клика на кнопку Купить. Единственный правильный способ - дописать ajax, который добавляет товар в корзину, а именно в cart.tpl. Я пробовал добавить в common.js в функцию
      'add': function(product_id, quantity) { после 
      success: function(json) {  команду 
       
      $('#cart').addClass('block');  но она не срабатывает. Что я делаю не так?
       
    • By colaweb
      Сделаю анимацию для вашего магазина или сайта.
      Большой опыт работы.
       
      Примеры
      Анимация главной страницы
      «Эффект полета» картинки в корзину при клике на кнопку "купить"
       
      Мой портфолио на форуме
      https://opencartforum.com/profile/12157-colaweb/content/?type=downloads_file
    • By colaweb
      Скачать/Купить дополнение


      Анимация для вашего магазина или сайта
      Сделаю анимацию для вашего магазина или сайта.
      Большой опыт работы.
       
      Примеры
      Анимация главной страницы
      «Эффект полета» картинки в корзину при клике на кнопку "купить"
       
      Мой портфолио на форуме
      https://opencartforum.com/profile/12157-colaweb/content/?type=downloads_file
      Добавил colaweb Добавлено 19.02.2018 Категория Услуги  
    • By Kingfrelance
      Добрый день 
      вот сайт
      http://088.cafe
      Кнопка добавить в корзину не работает в консоли ошибка
      jquery-2.1.1.min.js:4 POST http://088.cafe/ajax.php?do=addcart 404 (Not Found) Работает кнопка только в модуле рекомендуемые, это на главной - где вкусная пицца .. но ошибка в консоли все равно есть.
    • By Dragon
      jQuery async load
      Скачать/Купить дополнение Модуль позволяет переместить javascript-скрипты из шапки в подвал сайта и подгружать их асинхронно, тем самым ускорить отрисовку страницы, увеличить баллы в Google Pagespeed и повысить ранжирование в поисковой выдаче.

      Важно: модуль распространяется по принципу – одна лицензия на один домен.
       
      С его помощью можно добиться 100/100 баллов в Google PageSpeed Insights. Но только если вы выполнили все рекомендации Google PageSpeed Insights, кроме пункта "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы". В противном случае результат может быть всего на пару процентов лучше. 
      Демо: https://matuvi.com/oc2/async/


       
      Внимание. На демо помимо самого модуля оптимизированы изображения и включен кэш (не входит в модуль). 

      Протестировано на версиях OpenCart/ocStore 2.0.1.1, 2.1.0.2 и 2.3.0.2.3 на стандартных шаблонах со стандартным набором модулей.
      Автор модуля не гарантирует стабильную работу со сторонними плагинами и шаблонами.

      Теоретически модуль будет работать и на других версиях и сборках (пока кроме 3+).
      Если самостоятельно модуль установить не удалось: пишите в тему поддержки - поможем настроить.
      Добавил Dragon Добавлено 22.01.2018 Категория Кэширование, сжатие, ускорение Системные требования Сайт разработчика https://matuvi.com/ Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика  
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.