Jump to content
Sign in to follow this  
mirstiker

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

Recommended Posts

Добрый день! нужно в карточке товара подгрузить скрипт с каруселью товара если кол-во картинок превышает более 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>

 

Edited by mirstiker

Share this post


Link to post
Share on other sites

if( $image == 5){

карусель

}

Share this post


Link to post
Share on other sites

if( $image <= 5){

карусель

}

Share this post


Link to post
Share on other sites

if( $image => 5){

карусель

}

как хотите

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
<?php if (count($images) > 5) { ?>
  <div id="carousel" class="es-carousel-wrapper">
    ...
  </div>
<?php } ?>

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

  • +1 1

Share this post


Link to post
Share on other sites

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

 

 

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

С первым вопросом разобрался) есть еще один,подключена карусель  , задача при клике на картинку отобразить в стандартном  сплывающем окне   ,как сделано   <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>

 

Edited by mirstiker

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.