Magento : Product Detail Page : Catalog Product View - Media

<!--app\design\frontend\theme\default\template\catalog\product\view\media.phtml-->

<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
    <ul id="gal1">
         <?php foreach ($this->getGalleryImages() as $_image): ?>
        <li>
            <a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>"  rel="{gallery: 'gal1', smallimage: '<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(338); ?>',largeimage: '<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(1000); ?>'}">
                <img style="z-index:0" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->constrainOnly( true )->keepAspectRatio( false )->keepFrame( false )->resize(70,70); ?>" alt="<?php echo ($this->htmlEscape( $_image->getLabel() )) ?>" />
            </a>
        </li>
    <?php
 endforeach; ?>
    </ul>
</div>

<div class="product-image">
    <a href="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(1000)?>" title="<?php echo $this->escapeHtml($this->getImageLabel())?>" class="jqzoom1 masterzoom" rel="gal1"><img id="jqzomm-masterimg" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(338);?>" class="normalimg"/></a>
</div>
<?php endif; ?>

<script type="text/javascript">

//utk slider gambar thumbnail di kiri
jQuery(document).ready(function($) {

    jQuery('#gal1').bxSlider({
        auto: false,
        mode: 'vertical',
        minSlides: 4,
        maxSlides: 4,
        nextText: '',
        prevText: '',
        pager: false,
        preloadImages:'all',
        hideControlOnEnd: true,
        infiniteLoop: false,
   });

     setTimeout(function(){
     jQuery('.jqzoom1').jqzoom({
       zoomType: 'reverse',
       lens:true,
       preloadImages: false,
       alwaysOn:false,
       zoomWidth: 478,
       zoomHeight: 497,
     });
     }, 100);

});
//]]>
</script>