new media.phtml

    <?php
    /**
     * Magento
     *
     * NOTICE OF LICENSE
     *
     * This source file is subject to the Academic Free License (AFL 3.0)
     * that is bundled with this package in the file LICENSE_AFL.txt.
     * It is also available through the world-wide-web at this URL:
     * http://opensource.org/licenses/afl-3.0.php
     * If you did not receive a copy of the license and are unable to
     * obtain it through the world-wide-web, please send an email
     * to license@magentocommerce.com so we can send you a copy immediately.
     *
     * DISCLAIMER
     *
     * Do not edit or add to this file if you wish to upgrade Magento to newer
     * versions in the future. If you wish to customize Magento for your
     * needs please refer to http://www.magentocommerce.com for more information.
     *
     * @category    design
     * @package     base_default
     * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
     * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
     */

    /**
     * Product media data template
     *
     * @see Mage_Catalog_Block_Product_View_Media
     */
    ?>
    <?php
        $_product = $this->getProduct();
        $_helper = $this->helper('catalog/output');
        $setting = Mage::helper('em0113settings');
        $viewmode = $setting->getImageProduct_Viewmode();
    ?>
    <?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
        <?php if ($viewmode == 'cloudzoom'): ?>
        <p class="product-image">
            <?php
                $_img = $this->helper('catalog/image')->init($_product, 'image');
                $_img2 = clone $_img;
                $config = "zoomWidth: ".min($setting->getImageProduct_CloudZoomWidth(390), $_img->getOriginalWidth()).",";
                $config .= "zoomHeight: ".min($setting->getImageProduct_CloudZoomHeight(390), $_img->getOriginalHeight()).",";
                $config .= 'adjustX: 10, adjustY:-4';
                if($_img->getOriginalWidth() >= 390)
                    $w  =   $setting->getImageProduct_BaseImageWidth(390);
                else
                    $w  =   $_img->getOriginalWidth();
                $ratio = $w / $_img->getOriginalWidth();
                //$h = $ratio * $_img->getOriginalHeight();
                $h = $setting->getImageProduct_BaseImageHeight(390);
            ?>
            <a class="cloud-zoom" id="image_zoom" rel="<?php echo $config ?>" href="<?php echo $_img ?>" >
                <img itemprop="image" src="<?php echo $_img->resize($w, $h); ?>" alt='' title="<?php echo $this->escapeHtml($this->getImageLabel());?>" />
            </a>
			<?php if($w < 400 && $h < 400): ?>
            <a id="zoom-btn" rel="lightbox[em_lightbox]" href="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>" title="<?php echo $this->escapeHtml($this->getImageLabel());?>">Zoom</a>
      <?php endif; ?>
	  </p>
        <?php elseif ($viewmode == 'lightbox'): ?>
        <p class="product-image">
            <a rel="lightbox[em_lightbox]"  href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>"  title="<?php echo $this->escapeHtml($this->getImageLabel())?>">
            <?php
                $w = $setting->getImageProduct_BaseImageWidth(390);
                $h = $setting->getImageProduct_BaseImageHeight(390) ? $setting->getImageProduct_BaseImageHeight(390) : null;
                $_img = '<img id="image" itemprop="image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize($w, $h).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
                echo $_helper->productAttribute($_product, $_img, 'image');
            ?>
            </a>
        </p>
        <?php else: ?>
        <p class="product-image product-image-zoom" style="width:<?php echo $setting->getImageProduct_BaseImageWidth(390) ?>px;height:<?php echo $setting->getImageProduct_BaseImageHeight(390) ?>px; overflow:hidden;">
            <?php
                $_img = '<img style="max-width:none;" id="image" itemprop="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
                echo $_helper->productAttribute($_product, $_img, 'image');
            ?>
        </p>
        <p class="zoom-notice" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
        <div class="zoom" style="width:<?php echo $setting->getImageProduct_BaseImageWidth(390) ?>px;">
            <img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" title="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
            <div id="track">
                <div id="handle"></div>
            </div>
            <img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" title="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
        </div>
        <script type="text/javascript">
        //<![CDATA[
            Event.observe(window, 'load', function() {
                product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
            });
        //]]>
        </script>
        <?php endif ?>
    <?php else: ?>
    <p class="product-image">
        <?php
            $_img = '<img itemprop="image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(
                $setting->getImageProduct_BaseImageWidth(390),
                $setting->getImageProduct_BaseImageHeight(390)).'" alt="'.$this->escapeHtml($this->getImageLabel()).'" title="'.$this->escapeHtml($this->getImageLabel()).'" />';
            echo $_helper->productAttribute($_product, $_img, 'image');
        ?>
    </p>
    <?php endif; ?>
    <?php if (count($this->getGalleryImages()) > 0): ?>
        <?php $limitmore = count($this->getGalleryImages()); ?>
    <div class="more-views slideshow-more-views">
        <span><?php echo $this->__('More View') ?></span>
        <ul>
        <?php foreach ($this->getGalleryImages() as $_image): ?>
            <li class="item" width="<?php echo $setting->getImageProduct_ThumbBaseWidth(80) ?>px">
                <?php
                    $_img = $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile());
                ?>
                <?php if ($viewmode == 'cloudzoom'): ?>
                <?php
                    $_img_thumb = (string)$_img->resize(null);
                    if($_img->getOriginalWidth() >= 390)
                        $mv_w   =   $setting->getImageProduct_BaseImageWidth(390);
                    else
                        $mv_w   =   $_img->getOriginalWidth();
                    $ratio = $mv_w / $_img->getOriginalWidth();
                    $mv_h = $ratio * $_img->getOriginalHeight();
                    $_img_thumb = (string)$_img->resize($setting->getImageProduct_ThumbBaseWidth(80), $setting->getImageProduct_ThumbBaseHeight(80));
                    $_img_small = (string)$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($mv_w,$mv_h);
                    $_img_big = (string)$this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile());
                ?>
                <a class="cloud-zoom-gallery" rel="
                    useZoom:'image_zoom',
                    smallImage:'<?php echo $_img_small ?>',
                    adjustX:5, adjustY:-5" onclick="return false" href="<?php echo $_img_big ?>"><img
                    src="<?php echo $_img_thumb ?>"
                        alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" width="<?php echo $setting->getImageProduct_ThumbBaseWidth(80) ?>px" />
                </a>
                    <a class="no-display" href="<?php echo $_img_big ?>" rel="lightbox[em_lightbox]">lightbox moreview</a>
                <?php elseif ($viewmode == 'lightbox'): ?>
                <?php $_img_thumb = (string)$_img->resize($setting->getImageProduct_ThumbBaseWidth(80), $setting->getImageProduct_ThumbBaseHeight(80)); ?>
                <a rel="lightbox[em_lightbox]"  href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>"  title="<?php echo $this->escapeHtml($_image->getLabel()) ?>">
                    <img src="<?php echo $_img_thumb; ?>" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" width="<?php echo $setting->getImageProduct_ThumbBaseWidth(80) ?>px" />
                </a>
                <?php else: ?>
                <?php $_img_thumb = (string)$_img->resize($setting->getImageProduct_ThumbBaseWidth(80), $setting->getImageProduct_ThumbBaseHeight(80)); ?>
                <a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>"><img
                    src="<?php echo $_img_thumb; ?>"
                    alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" width="<?php echo $setting->getImageProduct_ThumbBaseWidth(80) ?>px" /></a>
                <?php endif ?>
            </li>
        <?php endforeach; ?>
        </ul>
    </div>
    <script type="text/javascript">
    jQuery(window).load(function() {
        jQuery('.slideshow-more-views ul').addClass('slides');
        jQuery('.slideshow-more-views').csslider({
                move : 1,
                circular : 0,
                direction : 'horizontal',
                parentHidden : '.product-img-box'
            });
    });
    jQuery('.cloud-zoom-gallery').click(function () {
        jQuery('#zoom-btn').attr('href', this.href);
    });
    </script>
    <?php endif; ?>