Magento : Product Detail Page : Colorswicher - Media

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

<?php
    $_product = $this->getProduct();
    $_helper = $this->helper('catalog/output');
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<?php $_temp = "";?>
<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 $_temp .= '<li>"+
            "<a href=\\"'.$this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()).'\\" title=\\"'.$_product->getName().'\\"  rel=\\"{gallery: \'galxxx\', smallimage: \''.$this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(338).'\',largeimage: \''.$this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize(1000).'\'}\\">"+
                "<img style=\\"z-index:0\\" src=\\"'.$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->constrainOnly( true )->keepAspectRatio( false )->keepFrame( false )->resize(72).'\\" alt=\\"'.$this->htmlEscape( $_image->getLabel() ).'\\" />"+
            "</a>"+
       "</li>';
        ?>
    <?php
 endforeach; ?>
    </ul>
<?php
        echo "<script>
            var _dfi = 1;
            var _xttemp = \"$_temp\";
        </script>";
?>

</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
echo '<script>
    var _xtemp = \' <a href="xxbig" title="" class="jqzoomxxx masterzoom" rel="galxxx"><img id="jqzomm-masterimg" src="xxsmall" class="normalimg"/></a>\';
    </script>';
?>


<?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>