Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


RGB

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
Надіслати
Поділитися на інших сайтах

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

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

Надіслати
Поділитися на інших сайтах

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

dyth.png

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

uS3v.png

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

Надіслати
Поділитися на інших сайтах

  • 1 month later...

RGB,

Добрый день!

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

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

Надіслати
Поділитися на інших сайтах


Кстати, RGB

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

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

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

Надіслати
Поділитися на інших сайтах


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

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

Надіслати
Поділитися на інших сайтах

  • 2 months later...

Кстати, RGB

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

 

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

  • +1 1
Надіслати
Поділитися на інших сайтах

Кстати, RGB

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

 

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

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

Надіслати
Поділитися на інших сайтах


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

Надіслати
Поділитися на інших сайтах


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

  • +1 1
Надіслати
Поділитися на інших сайтах

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

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

Надіслати
Поділитися на інших сайтах

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

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

Надіслати
Поділитися на інших сайтах

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

Надіслати
Поділитися на інших сайтах

  • 4 weeks later...

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
Надіслати
Поділитися на інших сайтах

  • 6 months later...

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

<?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
Надіслати
Поділитися на інших сайтах


 

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

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

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

Надіслати
Поділитися на інших сайтах

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

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

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

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

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

Надіслати
Поділитися на інших сайтах


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

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

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

Надіслати
Поділитися на інших сайтах


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

Надіслати
Поділитися на інших сайтах

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

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

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.