PAGAR

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

Recommended Posts

PAGAR

Пример галереи можно посмотреть здесь 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;
}

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

 

Share this post


Link to post
Share on other sites
YuraS

спасибо! полезная штука.

Share this post


Link to post
Share on other sites
PAGAR

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

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

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

Share this post


Link to post
Share on other sites
support

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

 

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

Share this post


Link to post
Share on other sites
PAGAR

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

 

Я обычно в таких случаях начиная с чистого 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

Share this post


Link to post
Share on other sites
support

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

Share this post


Link to post
Share on other sites
PAGAR

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

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

Share this post


Link to post
Share on other sites
support

Не знаю, лично я с таким слайдером не работал, не могу ничего и подсказать.

Share this post


Link to post
Share on other sites
Sviridushka

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

Share this post


Link to post
Share on other sites
support

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

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

Share this post


Link to post
Share on other sites
Sviridushka

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

Share this post


Link to post
Share on other sites
support
1 минуту назад, Sviridushka сказал:

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

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

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

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