Перейти к содержанию
Форум поддержки пользователей VamShop
VamShop Смотреть Скачать Купить

3. Видеогалерея-слайдер для сайта

PAGAR

Автор PAGAR,
в Javascript, jQuery, Ajax

 Share Подписчики 0

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

PAGAR

PAGAR 0

Опубликовано
Опубликовано

Пример галереи можно посмотреть здесь http://taburetka.net/index.php/cat/c36_gotovye-shkafy-kupe.html сразу над списком товаров.

Теперь о том ка разместить.
Вписываем данный скрипт внутри тега <head> (в VamShop добавляем в  /includes/header.php если это для описания товара и в /templates/шаблон/module/product_listing/выбраный шаблон для списка товаров если нужно разместить как у меня в описании категории заключив в {literal} {/literal}):
<script type= "text/javascript">/*<![CDATA[*/
$(function(){
	var div = $('div.sc_menu'),
		ul = $('ul.sc_menu'),
		ulPadding = 15;
	var divWidth = div.width();

	div.css({overflow: 'hidden'});

	var lastLi = ul.find('li:last-child');
	div.mousemove(function(e){
		var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	
		var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
		div.scrollLeft(left);
	});
});
/*]]>*/</script>

 

 

так же должен быть подключен jquery.fancybox (в VamShop для описания товара он уже подключен для описания категории нужно добавлять как описанно выше).
 
вставляем в нужное место (где будет слайдер с видеорядом) HTML код:
<div class="sc_menu">
	<ul class="sc_menu">
	    <li><a class="zoom" href="http://www.youtube.com/embed/ХХХХХХХХХХХ?autoplay=1 width=640; height=360; iframe=true;"><img class="thumbs" src="ссылка на превью" alt=" "/><span>подпись к превью</span></a></li>
		<li><a class="zoom" href="http://www.youtube.com/embed/ХХХХХХХХХХХ?autoplay=1 width=640; height=360; iframe=true;"><img class="thumbs" src="ссылка на превью" alt=" "/><span>подпись к превью</span></a></li>
	    <li><a class="zoom" href="http://www.youtube.com/embed/ХХХХХХХХХХХ?autoplay=1 width=640; height=360; iframe=true;"><img class="thumbs" src="ссылка на превью" alt=" "/><span>подпись к превью</span></a></li>
	    <li><a class="zoom" href="http://www.youtube.com/embed/ХХХХХХХХХХХ?autoplay=1 width=640; height=360; iframe=true;"><img class="thumbs" src="ссылка на превью" alt=" "/><span>подпись к превью</span></a></li>
	    <li><a class="zoom" href="http://www.youtube.com/embed/ХХХХХХХХХХХ?autoplay=1 width=640; height=360; iframe=true;"><img class="thumbs" src="ссылка на превью" alt=" "/><span>подпись к превью</span></a></li>
		<li><a class="zoom" href="http://www.youtube.com/embed/ХХХХХХХХХХХ?autoplay=1 width=640; height=360; iframe=true;"><img class="thumbs" src="ссылка на превью" alt=" "/><span>подпись к превью</span></a></li>
	</ul>
</div>

 

 

Где ХХХХХХХХХХХ ID видеоролика на youtube.com (возможно использовать ссылки с других видеохостов или просто изображения).
 
Добавляем следующие стили и подстраиваем под свой вкус: 
div.sc_menu {
	position: relative;
	height: 90px; /*высота блока*/
	width: 90%;  /* ширина блока*/
	overflow: auto;
	margin-left: 50px;
	margin-right: 50px;
}
ul.sc_menu {
	display: block;
	height: 115px;
	width: 2000px;	/*длина панели с видео*/
	padding: 5px 0 0 15px; 
	margin: 0;
	background: url(''); /*фоновое изображение*/		
	list-style: none;
}
.sc_menu li {
	display: block;
	float: left;	
	padding: 0 4px;
}
.sc_menu a {
	display: block;
	text-decoration: none;
}
.sc_menu span {
	display: block;
	margin-top: 3px;
	
	text-align: center;
	font-size: 12px;	
	color: #000000;
}

.sc_menu a:hover span {
	display: block;
	color: #0000ff;
	cursor: default;	/*параметры курсора*/
}
.sc_menu img {
	border: 3px #fff solid;	
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.sc_menu a:hover img {
	filter:alpha(opacity=50);	
	opacity: 0.5;
	cursor: default;	/*параметры курсора*/	
}

.sc_menu2 a {
	display: block;
	text-decoration: none;
}
.sc_menu2 span {
//	display: block;
//	margin-top: 0px;
	
	text-align: center;
	font-size: 12px;	
	color: #000000;
}

.sc_menu2 a:hover span {
//	display: block;
	color: #0000ff;
}
.sc_menu2 img {
	border: 3px #fff solid;	
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.sc_menu2 a:hover img {
	border: 3px #ebebeb solid;	
	filter:alpha(opacity=50);	
	opacity: 0.5;
}

Если все сделано правильно... должно работать... 

 
Ссылка на сообщение
Поделиться на другие сайты
  • 8 months later...
PAGAR

PAGAR 0

Опубликовано
  • Автор
Опубликовано

Пытаюсь все это примотать к шаблону страницы товара... для вывода каринок товара... 
так вот... вот такая конструкция:
 

<div class="sc_menu" style="overflow: hidden;height: 170px;">
	<ul class="sc_menu">
{if $PRODUCTS_MO_IMAGES}
{foreach name=mo_pic item=img_values from=$mo_img}
	    <li>{if $img_values.PRODUCTS_MO_POPUP_LINK !=''}	<a class="zoom" href="{$img_values.PRODUCTS_MO_POPUP_IMAGE}" rel="group">{/if}<img class="thumbs" src="{$img_values.PRODUCTS_MO_IMAGE}" /></a></li>
{/foreach}
{/if}		
</ul>
</div>

работает без проблем... 
но как только пытаюсь примотать ко всему этому главную картинку:
 

<div class="sc_menu" style="overflow: hidden;height: 170px;">
	<ul class="sc_menu">
{if $PRODUCTS_IMAGE or $PRODUCTS_MO_IMAGES or $PRODUCTS_IMAGE_LINK!=''}
		<li>{if $PRODUCTS_POPUP_LINK!=''}	<a class="zoom" href="{$PRODUCTS_POPUP_IMAGE}" {if $PRODUCTS_MO_IMAGES}rel="group"{/if}>{/if}<img class="thumbs" src="{$PRODUCTS_IMAGE}" /></a></li>	
{/if}		
	
{if $PRODUCTS_MO_IMAGES}
{foreach name=mo_pic item=img_values from=$mo_img}
	    <li>{if $img_values.PRODUCTS_MO_POPUP_LINK !=''}	<a class="zoom" href="{$img_values.PRODUCTS_MO_POPUP_IMAGE}" rel="group">{/if}<img class="thumbs" src="{$img_values.PRODUCTS_MO_IMAGE}" /></a></li>
{/foreach}
{/if}		
</ul>
</div>

перестает работать... может кто подскажет.. чо не так....

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

support 447

Опубликовано
Опубликовано

Да вроде нормально выглядит.

 

Я обычно в таких случаях начиная с чистого html-кода, т.е. делаю сначала рабочий вариант без меток всяких, просто html-код, а потом постепенно заменяю код метками.

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

PAGAR 0

Опубликовано
  • Автор
Опубликовано

Да вроде нормально выглядит.

 

Я обычно в таких случаях начиная с чистого html-кода, т.е. делаю сначала рабочий вариант без меток всяких, просто html-код, а потом постепенно заменяю код метками.

в том то и дело... что если заменить

 

{if $PRODUCTS_IMAGE or $PRODUCTS_MO_IMAGES or $PRODUCTS_IMAGE_LINK!=''}
		<li>{if $PRODUCTS_POPUP_LINK!=''}	<a class="zoom" href="{$PRODUCTS_POPUP_IMAGE}" {if $PRODUCTS_MO_IMAGES}rel="group"{/if}>{/if}<img class="thumbs" src="{$PRODUCTS_IMAGE}" /></a></li>	
{/if}

на 

<li>	<a class="zoom" href="images/product_images/popup_images/270_0.jpg" rel="group"><img class="thumbs" src="images/product_images/info_images/270_0.jpg" /></a></li>

тож не работает... а если убрать эту строку вообще... то все работает.... не работает сам эффект прокрутки при наведении курсора... 

я там еще вкладки пытался организовать.. так там одни заголовки отображаются... а сам контент исчез в неизвестном направлении.... 

http://www.taburetka.ua/info/p270_-testovyi-.html

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

support 447

Опубликовано
Опубликовано

Тогда наверное в самом слайдере что не так, неправильно может код вставляете или ещё что, попробовать можно другой слайдер.

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

PAGAR 0

Опубликовано
  • Автор
Опубликовано

Тогда наверное в самом слайдере что не так, неправильно может код вставляете или ещё что, попробовать можно другой слайдер.

ну тогда бы вообще не работало... думаю тут какойт конфликт... 

Ссылка на сообщение
Поделиться на другие сайты
  • 6 years later...
Sviridushka

Sviridushka 0

Опубликовано
Опубликовано

Привет. Я в поиске модуля для опенкарт 2х чтоб можно было добавлять видео с инструкцией. Сейчас на моём сайте модуль, где можно вставить ссылку на видео, а мне бы добавлять именно от себя видео. Заранее спасибо! 

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

support 447

Опубликовано
Опубликовано

По поводу OpenCart лучше вопросы задавать на соответствующем форум.

Здесь всё-таки форум про VamShop.

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

support 447

Опубликовано
Опубликовано
1 минуту назад, Sviridushka сказал:

Сорян, просто уже столько вариантов посмотрела... видимо придётся заказывать разработку 

Так просто заливайте к себе на сайт видео и вставляйте через html тэг video ... /video

В браузерах сейчас уже есть встроенная поддержка видео.

Ссылка на сообщение
Поделиться на другие сайты
 Share
Подписчики 0
Перейти к списку тем
×
×
  • Создать...