News:

Looking for documentation? Take a look on our wiki

Main Menu

Product detail - more than one main image

Started by caesarsk, February 26, 2016, 11:45:02 AM

Previous topic - Next topic

caesarsk

hi all,
I need to do in my shop exactly something like that (http://row.jimmychoo.com/en/women/shoes/anouk/black-patent-leather-pointy-toe-pumps-ANOUKPAT001.html?cgid=women-shoes#start=1).
simply put, use main images carousel.
can anyone advise me how to do it?

thx

Ghost

"Open additional images in the main position" option makes images work similarly. If you want to make it look exactly like on that page, it's a matter of template/customization. Would need to write some custom JS and CSS.

Ghost

#2
Here is basic Bootstrap carousel example for VM:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
  <?php $i 0; foreach($this->product->images as $image){ ?>
    <li data-target="#carousel-example-generic" data-slide-to="<?php echo $i ?>"<?php if ($i == 0){?> class="active"<?php }?>></li>
<?php $i++;}?>
  </ol>
  <div class="carousel-inner" role="listbox">
  <?php $i 0; foreach($this->product->images as $image){ ?>
    <div class="carousel-item<?php if ($i == 0){?> active<?php }?>">
      <img src="<?php echo $image->file_url ?>" alt="<?php echo $image->file_meta ?>">
    </div><?php $i++;}?>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only"><?php echo JText::_('JPREV')?></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only"><?php echo JText::_('JNEXT')?></span>
  </a>
</div>
http://v4-alpha.getbootstrap.com/components/carousel/