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

Слайдер для дополнительных картинок в карточке товара

vitosbaltos

Автор vitosbaltos,
в Проблемы и решения

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

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

vitosbaltos

vitosbaltos 0

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

Уважаемые, форумчане! С наступающим Новым годом! Успехов и процветания в 2016 году.

Возникли затруднения с установкой bxslider для дополнительных картинок в карточке товара. Как запретить слайдер если у товара всего одна или две картинки?

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

vitosbaltos 0

Опубликовано
  • Автор
Опубликовано 
{config_load file="$language/lang_$language.conf" section="product_info"}
{literal}
     <link rel="stylesheet" href="jscript/jquery/plugins/bxslider/bx_styles/bx_styles.css" type="text/css"/>
	<script src="jscript/jquery/plugins/bxslider/jquery.bxSlider.min.js" type="text/javascript"></script>
{/literal}
	{literal}

	
	<script type="text/javascript">

	

	

		jQuery(document).ready(function(){

			jQuery('#slider-featured').bxSlider({

	        displaySlideQty: 3, 

            moveSlideQty: 1,

			


			});

		});
	</script>


{/literal}
</head>
{if $info_message}
<div class="contacterror">
{$info_message}
</div>
{/if}

<div itemscope itemtype="http://schema.org/Product">

{$FORM_ACTION}

		       

		<div class="row-fluid product-in">
			<!-- start: Product image -->
			<div  class="span69 product-images">
			
			
			
				<div class="thumbnail big text-center">
				<div class="todayCartTopNameWrap"> 
			 <h1 style="font:bold 22px 'Open Sans';" itemprop=name class="b1c-name23">{$PRODUCTS_NAME}</h1>  
			
			<img style="padding:0;margin-right:15px;" alt="Image" src="/images/Image4.png">
			<div class="rating1"> 
			
			

		
		{if $REVIEWS_TOTAL > 5}
				
        {$smarty.const.TEXT_REVIEWS_RATING} <span style="padding:0;margin-right:15px;">{$STAR_RATING}</span> <span style="padding:0;margin-right:15px;border-bottom: medium none;color: #0085cf;font-family: Arial;font-size: 13px;text-decoration: none;">{$REVIEWS_TOTAL} отзывов</span>
		
		<span class="rewbox" style="float:right;"><a style="color:#0085cf; text-transform: none;font-size:13px;font-family: Arial; font-weight:normal;" class="ajax_modal fancybox.ajax" href="/product_reviews_write.php?products_id={$PRODUCTS_ID}">Написать отзыв <i class="icon-pencil"></i></a></span> 
		
		
		{/if}
		
		
		  {if $REVIEWS_TOTAL == 0}
				
        {$smarty.const.TEXT_REVIEWS_RATING} 
<img style="padding:0;margin-right:15px;" alt="Image" src="/images/Image4.png">

		
		<span class="rewbox"><a style="color:#0085cf; text-transform: none;font-size:13px;font-family: Arial; font-weight:normal;" class="ajax_modal fancybox.ajax" href="/product_reviews_write.php?products_id={$PRODUCTS_ID}">Написать отзыв <i class="icon-pencil"></i></a></span> 
		
		 
		{/if}
		 
		  {if $REVIEWS_TOTAL == 1}
				 
        {$smarty.const.TEXT_REVIEWS_RATING} <span style="padding:0;margin-right:15px;">{$STAR_RATING}</span> <span style="padding:0;margin-right:15px;border-bottom: medium none;color: #0085cf;font-family: Arial;font-size: 13px;text-decoration: none;">{$REVIEWS_TOTAL} отзыв</span> 
		
		<span class="rewbox"><a style="color:#0085cf; text-transform: none;font-size:13px;font-family: Arial; font-weight:normal;" class="ajax_modal fancybox.ajax" href="/product_reviews_write.php?products_id={$PRODUCTS_ID}">Написать отзыв <i class="icon-pencil"></i></a></span> 
		
		
		{/if}
				
		
		 {if $REVIEWS_TOTAL == 2}
				
        {$smarty.const.TEXT_REVIEWS_RATING} <span style="padding:0;margin-right:15px;">{$STAR_RATING}</span> <span style="padding:0;margin-right:15px;border-bottom: medium none;color: #0085cf;font-family: Arial;font-size: 13px;text-decoration: none;">{$REVIEWS_TOTAL} отзыва</span> 
		
		<span class="rewbox"><a style="color:#0085cf; text-transform: none;font-size:13px;font-family: Arial; font-weight:normal;" class="ajax_modal fancybox.ajax" href="/product_reviews_write.php?products_id={$PRODUCTS_ID}">Написать отзыв <i class="icon-pencil"></i></a></span> 
		
		
		{/if}
		
		 {if $REVIEWS_TOTAL == 3}
				
        {$smarty.const.TEXT_REVIEWS_RATING} <span style="padding:0;margin-right:30px;">{$STAR_RATING}</span> <span style="padding:0;margin-right:15px;border-bottom: medium none;color: #0085cf;font-family: Arial;font-size: 13px;line-height: 18px;text-decoration: none;">{$REVIEWS_TOTAL} отзыва </span>  
		
		<span class="rewbox"><a style="color:#0085cf; text-transform: none;font-size:13px;font-family: Arial; font-weight:normal;" class="ajax_modal fancybox.ajax" href="/product_reviews_write.php?products_id={$PRODUCTS_ID}">Написать отзыв <i class="icon-pencil"></i></a></span> 
		
		
		{/if}
		 {if $REVIEWS_TOTAL == 4}
				
        {$smarty.const.TEXT_REVIEWS_RATING} <span style="padding:0;margin-right:15px;">{$STAR_RATING}</span> <span style="padding:0;margin-right:15px;border-bottom: medium none;color: #0085cf;font-family: Arial;font-size: 13px;text-decoration: none;">{$REVIEWS_TOTAL} отзыва</span> 
		
		<span class="rewbox"><a style="color:#0085cf; text-transform: none;font-size:13px;font-family: Arial; font-weight:normal;" class="ajax_modal fancybox.ajax" href="/product_reviews_write.php?products_id={$PRODUCTS_ID}">Написать отзыв <i class="icon-pencil"></i></a></span> 
		
		
		{/if}
		
		{if $REVIEWS_TOTAL == 5} 
				
        {$smarty.const.TEXT_REVIEWS_RATING} <span style="padding:0;margin-right:15px;">{$STAR_RATING}</span> <span style="padding:0;margin-right:15px;border-bottom: medium none;color: #0085cf;font-family: Arial;font-size: 13px;text-decoration: none;">{$REVIEWS_TOTAL} отзывов</span> 
		
		<span class="rewbox"><a style="color:#0085cf; text-transform: none;font-size:13px;font-family: Arial; font-weight:normal;" class="ajax_modal fancybox.ajax" href="/product_reviews_write.php?products_id={$PRODUCTS_ID}">Написать отзыв <i class="icon-pencil"></i></a></span> 
		
		
		{/if} 
			 <span class="item_totalsum_id">Арт.&nbsp;<b>{$PRODUCTS_MODEL}</b></span> 
				
					
			
			</div>
			</div>
			
			<div class="todayGallery">
			<div class="goodPicBig">
				{if $PRODUCTS_SPECIAL > 0}<div class="description"><span class="discount">-{$PRODUCTS_SPECIAL|round}%</span></div>{/if}
					{if $PRODUCTS_POPUP_LINK!=''}<a href="{$PRODUCTS_POPUP_IMAGE}" title="{$PRODUCTS_NAME}" rel="group" class="lightbox">{/if}<img itemprop="image" id="img" src="{$PRODUCTS_IMAGE}" alt="{if $PRODUCTS_IMAGE_DESCRIPTION !=''}{$PRODUCTS_IMAGE_DESCRIPTION}{else}{$PRODUCTS_NAME}{/if}" />
					<!-- <span class="frame-overlay"></span> -->
					
					<span class="zoom"><i class="fa fa-search-plus"></i></span>
					{if $PRODUCTS_POPUP_LINK!=''}</a>{/if}
			
			
		</div>
			</div>
			
			
			</div>
	<div id="slide-featured">

	<ul id="slider-featured" class="thumbnails padd_rast">
					
				{foreach name=mo_pic item=img_values from=$mo_img}
					<li style="margin-right: 5px;" class="span4 thumbnail">
						{if $img_values.PRODUCTS_MO_POPUP_LINK !=''}<a href="{$img_values.PRODUCTS_MO_POPUP_IMAGE}" rel="group"  title="{$PRODUCTS_NAME}" class="lightbox">{/if}<img width="75%" src="{$img_values.PRODUCTS_MO_IMAGE}" itemprop="image" alt="{if $img_values.PRODUCTS_MO_IMAGE_DESCRIPTION !=''}{$img_values.PRODUCTS_MO_IMAGE_DESCRIPTION}{else}{$PRODUCTS_NAME}{/if}" />
						<!-- <span class="frame-overlay"></span> -->

						<span class="zoom"><i class="fa fa-search-plus"></i></span>
						{if $img_values.PRODUCTS_MO_POPUP_LINK !=''}</a>{/if}
					</li>
				{/foreach}
				</ul>
				</div>
			
			
			</div>
			<!-- end: Product image -->

 

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

support 447

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

Наверное можно попробовать заменить: 

<ul id="slider-featured" class="thumbnails padd_rast">

может на что-то вроде: 

{if {$mo_img}}<ul id="slider-featured" class="thumbnails padd_rast">{/if}

или: 

{if {$mo_img[1]}}<ul id="slider-featured" class="thumbnails padd_rast">{/if}

или: 

{if {$mo_img} > 1}<ul id="slider-featured" class="thumbnails padd_rast">{/if}

и ниже </ul> тоже обернуть этим условием.

 

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

vitosbaltos 0

Опубликовано
  • Автор
Опубликовано 
{$mo_img}

Не помогло. Слайдер исчезает вместе с картинками. Нужно чтобы картинки оставались на месте.

Как убрать повторение картинок в слайдере, если их меньше, чем указано здесь? 

displaySlideQty: 3,

Image 2221.png

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

support 447

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

Тогда не знаю.

Надо какое-то условие придумывать и переписывать html-код.

Это вообще-то говоря не функционал по умолчанию и я ж не буду за Вас код писать.

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

KoVaLsKy 59

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

нужно на smarty счётчик сделать. Получить код-во доп картинок. И на js уже от этого писать условие. Ну или на js можно через .each() пробежаться и посчитать кол-во картинок.  В любом случае с ходу не сделать

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

eugenem 11

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

Все проще, это делается через настройки самого bxslider'а. Примерно так: 

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slider-moimages').bxSlider({
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideWidth:70,
slideMargin:10,
infiniteLoop: false,
hideControlOnEnd:true,
auto: false,
controls:true,
pager:false
});
});
</script>

Обратите внимание на две опции:
- infiniteLoop: false - отключаем карусель
- hideControlOnEnd:true - скрываем кнопки по достижении конечных слайдов
Ну и minSlides: 3, maxSlides: 3 устанавливают количество выводимых

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

eugenem 11

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

Ну, и в догонку, вот как это выглядит в результате:
- тут много допкартинок, слайдер работает http://vamshop-test.pp.ua/50443/samsung-galaxy-note-3.html
- в других товарах - только три, слайдер не включается. Например, тут http://vamshop-test.pp.ua/50443/samsung-galaxy-s4.html

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