Jump to content
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.


  • Similar Content

    • 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 Не проверялось Обращение к серверу разработчика  
    • By Dragon
      Модуль позволяет переместить 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+).
      Если самостоятельно модуль установить не удалось: пишите в тему поддержки - поможем настроить.
    • By Aky
      Как передать POST параметр через ajax в файл controller модуля OpenCart ?
       
      Есть модуль "latest"  Файл контроллера latest.php, нужно передать туда параметр width через Ajax/Jquery  
       
      Как обратится к этому файлу? 
       
      Как работать с Ajax знаю, как параметры передать знаю, как принять знаю, но как обратится к нужному файлу в OpenCart?
       
      При попытках обращения по "url:' скрипт выдает ошибку  "404 (not found)"
       
      Пробовал вот так:
      url: 'index.php?route=extension/module/latest',  url: 'index.php?route=module/latest',  url: '/catalog/controller/extension/module/latest',   
      Если перейти на прямую по ссылки: "/catalog/controller/extension/module/latest.php"  выдает ошибку HTTP ERROR 500
    • By Techno1og
      Обнаружили на страницах сайта множество ссылок дублирующих друг друга, эти ссылки располагаются в разных блоках, виджетах и разделах сайта.
       
      Например в  блоке с новостями: ссылка дублируется аж 3 раза: ссылка на статью, ссылка с изображения, ссылка на кнопке подробнее. Есть дублирующие ссылки в главном слайдере, дубли в миниатюрах каждого слайда, Дубли в кнопках вида «далее», «подробнее» - даже во внутренних ссылках нельзя использовать не точные анкоры, анкор должен соответствовать теме URL , поэтому такие кнопки лучше завернуть в JS.   Категории товаров.  Принято считать, что сквозные элементы сайта, в частности меню, поисковиками не учитываются, либо учитываются очень слабо, т.к. присутствуют на каждой странице. Тем не менее имеют место быть различные варианты. Возьмем для примера 4 крупных интернет-магазина:  www.mvideo.ru, www.eldorado.ru и www.dns-shop.ru, www.tehnosila.ru. На сайте М.Видео абсолютно всё меню навигации с категориями и подкатегориями закрыто в тег noindex. Аналогичная картина на сайте Эльдорадо. Закрывать меню в noindex имеет смысл только чтобы не учитывать его текстовую составляющую, чтобы меню не попадало в сниппет на поисковой выдаче, чтобы не мешало определению релевантной страницы. Если запустит Краулер и посмотреть как он определить релевантные страницы, то можно увидеть что некоторые стр. определяются не верно. Так же есть повторяющиеся ссылки в Footer , микроразметке, и т.д, и прочих элементах...  
      судя по отчету ScreaminFrog - google видит все  внутренние ссылки, воспринимает, и распределяет вес с учетом всех внутренних факторов. Ссылки нужно закрыть, но по умолчанию такого решения в Opencart не предлагается, поэтому ищем альтернативные способы, изучаем правила закрытия ссылок:
       
      Внутренние ссылки не должны содержать атрибута rel=”nofollow”. В противном случае вес со страницы будет утекать, то есть будет попросту испаряться. Атрибут rel=”nofollow” необходимо использовать в редких случаях случаях, когда ссылка ведет на неиндексируемую страницу. Ссылки всегда должны вести на индексируемые страницы сайта, иначе будет повторяться история, описанная в пункте №1 выше. Даже при формировании внутренних ссылок при перелинковке следует использовать уникальные анкоры. Внутренние ссылки всегда должны быть прямыми и идти строго на целевые страницы. Это значит, что переход по ссылке должен отдавать ответ 200 OK. Я не говорю о том, что битые ссылки недопустимы, это очевидно, а я говорю о том, что ссылки должны идти без промежуточных 301-редиректов (а если там еще и не 301, а 302-редирект, то совсем беда). Не редко, когда меняют структуру, либо по вине верстальщика  
      отследить на глаз многие мелочи трудно, и чтобы потом не удивляться - советую использовать краулер. (XENU или родной Screaming Frog)
       
      Нашел следующие методы закрытия внешних и внутренних ссылок на jQuery AJAX:
      (взяты со стороннего ресурса; там где проводили эксперимент пишут, что все способы  рабочие)
       
      Вариант №1 —
      <a href="#" class="link" data-link="http://goo.gl">ссылка</a> Скрипт, который будет обрабатывать ссылку и открывать ее:
      <script>$('a.link').click(function(){window.open($(this).data("link"));return false;});</script> В этом варианте вам не надо будет производить никаких дополнительных доработок стилей в css, наша ссылка будет выглядеть как и все остальные «нормальные» ссылки.
      Вариант №2 —
      Код ссылки на странице:
      <a href="#" class="link" rel="http://goo.gl">ссылка</a> Скрипт, который будет обрабатывать ссылку и открывать ее:
      <script>$('a.link').click(function(){window.open($(this).attr("rel"));return false;});</script> Вариант №3 —
      Код ссылки на странице:
      <span class="hidden-link" data-link="http://goo.gl">ссылка</span> Скрипт, который будет обрабатывать ссылку и открывать ее:
      <script>$('.hidden-link').click(function(){window.open($(this).data('link'));return false;});</script> как пишет автор данный вариант100% не вызовет никаких подозрений у поисковика, так как даже структурно в коде нет ссылки, а просто кусок текста (он же анкор) выделен спаном <span>, что довольно часто используется при разметке документов.
      Однако и отображаться такая «ссылка» будет как обычный текст на странице. Придется пошаманить с css, чтобы имитировать ссылку. Например, добавить в свой css:
      span.hidden-link { color: #00ff00; /*-цвет ссылки-*/ text-decoration: underline; /*-подчеркивание-*/ cursor: pointer; /*-указатель в виде пальца-*/ } Вариант №4 — Еще один вариант скрытия ссылки
      <span class="hidden-link" data-link="http://goo.gl">ссылка</span> Скрипт, который будет обрабатывать ссылку и открывать ее:
      <script>$('.hidden-link').replaceWith(function(){return'<a href="'+$(this).data('link')+'">'+$(this).text()+'</a>';})</script> Отличие этого способа от предыдущего в том, что js-скрипт меняет на странице html-код «якобы» ссылки на нормальную ссылку после полной загрузки документа. Поэтому никаких правок в css вносить не придется, а ссылка будет открываться как и обычная.
      Способ так же прошел проверку экспериментом — ссылка не индексируется и не видится поисковыми роботами и, соответстенно, не учитывается.
       
      Вариант №5 — Универсальный вариант скрытия любого контента, например, картинок
      ..... Предыдущий вариант не работает в том случае, если в анкоре ссылки стоит картинка. А такие варианты довольно часто встречаются: счётчики, информеры, партнёрские баннеры. Поэтому предлагаю использовать вместо метода .text () метод .html (), он будет более универсальным.
      Код элемента, в данном случае ссылки, на странице, будет такой:
      <span class="hidden-link" data-link="http://goo.gl">внешняя ссылка</span> * — Чтобы закрыть картинку, в коде, указанном выше, необходимо заменить «внешняя ссылка» на код <img src="...">.
      Скрипт, который будет обрабатывать ссылку или любой другой элемент:
      <script>$('.hidden-link').replaceWith(function(){return'<a href="'+$(this).data('link')+'">'+$(this).html()+'</a>';})</script> Как вы понимаете, отличие данного способа от всех других в том, что в скрипт можно «спрятать» не только ссылку, но и картинку со ссылкой или еще что-нибудь. Все проверено — все работает
       
      6.  Вариант №6 —  как пишут в коментариях самый лучший.
      $('.hidden-link').replaceWith (function (){return'<a href="'+$(this).data ('link')+'" title="'+$(this).text ()+'">'+$(this).html ()+'</a>';})  
      Интересно кто какие варианты использует и на что нужно обратить внимание еще.
       
       
  • 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.