[Решено] Отобразить карусель товара по условию

[mirstiker]

Добрый день! нужно в карточке товара подгрузить скрипт с каруселью товара если кол-во картинок превышает более 5 шт,как правильно написать условие?

Ostore 2.1

.../template/product/product.tpl

  	<div id="carousel" class="es-carousel-wrapper">
					<div class="es-carousel">
					<ul class="thumbnails"> 
					<?php foreach ($images as $image) { ?>
							<li><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> 
                              <img src="<?php echo $image['thumb']; ?>"></a></li>
					  <?php } ?>
				    </ul>
					
					</div>
					</div>

 

Змінено 26 березня 2017 користувачем mirstiker

[mirfox]

if( $image == 5){

карусель

}

[mirfox]

if( $image <= 5){

карусель

}

[mirfox]

if( $image => 5){

карусель

}

как хотите

[mirfox]

последнее покажет если товаров 5 или больше 5

[thentru]

<?php if (count($images) > 5) { ?>
  <div id="carousel" class="es-carousel-wrapper">
    ...
  </div>
<?php } ?>

надеюсь, смысл понятен

[mirstiker]

thentru, ваше решение мне подошло,спасибо.

 

 

[mirfox]

В данном решении использовать 

count вообще не нужно, это будет занимать лишнюю оперативную память

[thentru]

@mirfox вы в курсе, что $image это массив, а не число? и понимаете конечно разницу между ними

[mirstiker]

С первым вопросом разобрался) есть еще один,подключена карусель  , задача при клике на картинку отобразить в стандартном  сплывающем окне   ,как сделано   <ul class="thumbnails">

 

.../template/common/header.tpl

<script type="text/javascript" src="Elastislide/js/jquery.elastislide.js"></script>
<script type="text/javascript" src="Elastislide/js/jquery.easing.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="Elastislide/css/elastislide.css" />

.../template/product/product.tpl

	    <?php if (count ($images) > 3) { ?>
		  	<div id="carousel" class="es-carousel-wrapper">
					<div class="es-carousel">
					<ul class="thumbnails"> 
					<?php foreach ($images as $image) { ?>
							<li><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>"></a></li>
					  <?php } ?>
				    </ul>
					
					</div>
					</div>
		          <?php } ?>
		  // карусель //
		  	<script type="text/javascript">
			
			$('#carousel').elastislide({
				imageW 	: 100,
				minItems	: 6
			});
			
		</script>

 

Змінено 26 березня 2017 користувачем mirstiker

[mirfox]

Само собой, но в массиве уже есть нумерация индекса

[thentru]

Посмотрите пример этого плагина, нужно только по-другому обработать нажатие на элемент
https://tympanus.net/Development/Elastislide/index4.html

[mirstiker]

Тему можно закрывать ,вот как решил:

.../template/common/header.tpl перед </head> вставляем это

<link rel="stylesheet" type="text/css" href="Elastislide/css/elastislide.css" />
<script type="text/javascript" src="Elastislide/js/modernizr.custom.17475.js"></script>
<script type="text/javascript" src="Elastislide/js/jquerypp.custom.js"></script>
<script type="text/javascript" src="Elastislide/js/jquery.elastislide.js"></script>

идем в .../template/product/product.tpl

и добавил карусельку выводящую при условии если кол-во картинок более 5 шт

<?php if (count ($images) > 5) { ?>
			<div class="image-preview">
			 <ul class = "thumbnails">
					<li><a class="thumbnail" href="<?php  echo $popup;  ;?>">	<img id="preview" src="" /></a></li>
					</ul>
					</div>
		  	<div  class="gallery">
					<ul id= "carousel" class="elastislide-list">
					<?php foreach ($images as $image) { ?>
							<li data-preview="<?php echo $image['popup']; ?>"><a href="<?php echo $image['thumb']; ?>"> <img src="<?php echo $image['thumb']; ?>"></a></li>
					  <?php } ?>
				    </ul>
				
					</div>
					<script type="text/javascript">
			
			// example how to integrate with a previewer

			var current = 0,
				$preview = $( '#preview' ),
				$carouselEl = $( '#carousel' ),
				$carouselItems = $carouselEl.children(),
				carousel = $carouselEl.elastislide( {
					current : current,
					minItems : 4,
					onClick : function( el, pos, evt ) {

						changeImage( el, pos );
						evt.preventDefault();

					},
					onReady : function() {

						changeImage( $carouselItems.eq( current ), current );
						
					}
				} );

			function changeImage( el, pos ) {

				$preview.attr( 'src', el.data( 'preview' ) );
				$carouselItems.removeClass( 'current-img' );
				el.addClass( 'current-img' );
				carousel.setCurrent( pos );

			}

		</script>
		          <?php } else {?>
				  <?php if ($thumb || $images) { ?>
          <ul class="thumbnails">
            <?php if ($thumb) { ?>
            <li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
            <?php if ($images) { ?>
            <?php foreach ($images as $image) { ?>
            <li class="image-additional">
			<a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
            <?php } ?>
         					

          </ul>
		    <?php } ?>		
          <?php } ?>
		   <?php } ?>

исходники файлов плагина

 

 

Elastislide.zip