Monday, January 19, 2015

Magento- How can i make a slider of product thumbnail images on product page

 Goto app/design/frontend   you_theme  catalog/product/view/media.phtml


<?php echo $this->getChildHtml('after'); ?>

<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
  
    <ul id="prod-thumb" class="product-image-thumbs owl-carousel owl-theme">
    <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
        <?php
        if (($filterClass = $this->getGalleryFilterHelper()) && ($filterMethod = $this->getGalleryFilterMethod()) && !Mage::helper($filterClass)->$filterMethod($_product, $_image)):
            continue;
        endif;
        ?>
        <li class="item">
            <a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
                <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
                     width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
            </a>
        </li>
    <?php $i++; endforeach; ?>
    </ul>
</div>
<?php endif; ?>

<?php echo $this->getChildHtml('after'); ?>





<script type="text/javascript" src="<?php echo  Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB); ?>js/owlcarousel/owl.carousel.js"></script>

<script>
jQuery(document).ready(function() {

  jQuery("#prod-thumb").owlCarousel({
    items : 3,
    itemsCustom : [
      
        [320, 3],
        [480, 4],
        [600, 5],
        [760, 4],
        [900, 4],
      ],   
    lazyLoad : true,
    navigation : true,
    pagination: false
  });

});
</script>

 <style>


/* clearfix */
.owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* display none until init */
.owl-carousel{
    display: none;
    position: relative;
    width: 100%;
    -ms-touch-action: pan-y;
}
.owl-carousel .owl-wrapper{
    display: none;
    position: relative;
    -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper-outer{
    overflow: hidden;
    position: relative;
    width: 50%;
}
.owl-carousel .owl-wrapper-outer.autoHeight{
    -webkit-transition: height 500ms ease-in-out;
    -moz-transition: height 500ms ease-in-out;
    -ms-transition: height 500ms ease-in-out;
    -o-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}
   
.owl-carousel .owl-item{
    float: left;
}
.owl-controls .owl-page,
.owl-controls .owl-buttons div{
    cursor: pointer;
}
.owl-controls {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* mouse grab icon */
.grabbing {
    cursor:url(grabbing.png) 8 8, move;
}

/* fix */
.owl-carousel  .owl-wrapper,
.owl-carousel  .owl-item{
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
}

  </style>

No comments :

Post a Comment