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

[RGB]

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

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

Многие из вас наверное заметили, что каждая статья в 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

[zcell]

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

[RGB]

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

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

[RGB]

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

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

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

[Victor74]

RGB,

Добрый день!

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

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

[Victor74]

Кстати, RGB

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

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

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

[RGB]

Зависит от того, что вы делали со своим магазином :-) Я вот чтобы не путаться, создал отдельный класс для таких ссылок, которые имеют эту хитрую конструкцию, и назвал его 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="">

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

[Victor74]

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

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

[pashast]

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

[RGB]

Кстати, RGB

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

 

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

[Victor74]

Кстати, RGB

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

 

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

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

[Victor74]

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

[RGB]

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

[pashast]

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

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

[RGB]

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

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

[pashast]

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

[RGB]

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

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

[RGB]

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>

[nadim]

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

<?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>

[RGB]

 

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

<?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>

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

[nadim]

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

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

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

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

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

[RGB]

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

[nadim]

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

<?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 } ?>   

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

[RGB]

да уж, 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, вот этого и достаточно для того, чтобы можно было фотки по этим ссылкам проматывать

[nadim]

да уж, 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, вот этого и достаточно для того, чтобы можно было фотки по этим ссылкам проматывать

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