Jump to content
Форум поддержки пользователей VamShop
VamShop Смотреть Скачать Купить

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

PAGAR

By PAGAR,
in Javascript, jQuery, Ajax

 Share Followers 0

Recommended Posts

PAGAR

PAGAR 0

Posted
Posted

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

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

 
Link to post
Share on other sites
  • 8 months later...
PAGAR

PAGAR 0

Posted
  • Author
Posted

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

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

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

Link to post
Share on other sites
support

support 446

Posted
Posted

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

 

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

Link to post
Share on other sites
PAGAR

PAGAR 0

Posted
  • Author
Posted

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

 

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

Link to post
Share on other sites
support

support 446

Posted
Posted

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

Link to post
Share on other sites
PAGAR

PAGAR 0

Posted
  • Author
Posted

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

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

Link to post
Share on other sites
support

support 446

Posted
Posted

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

Link to post
Share on other sites
  • 6 years later...
Sviridushka

Sviridushka 0

Posted
Posted

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

Link to post
Share on other sites
support

support 446

Posted
Posted

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

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

Link to post
Share on other sites
Sviridushka

Sviridushka 0

Posted
Posted

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

Link to post
Share on other sites
support

support 446

Posted
Posted
1 минуту назад, Sviridushka сказал:

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

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

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

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.

×
 Share
Followers 0
Go to topic listing
×
×
  • Create New...