Extension Cloud Zoom Pro

Thảo luận trong 'Kho download Module, extensions cho magento' bắt đầu bởi phuong.hoang, 18 Tháng năm 2012.

  1. phuong.hoang

    phuong.hoang Hoàng Thị Phương

    [​IMG]
    <span><span>View Demo</span></span> <span><span>Get more extensions from EcommerceTeam</span></span>

    Magento Cloud Zoom extension will replace standard Magento zoom with easy-to-use, flexible jquery cloud zoom widget.

    Uses powerful, fast and concise jQuery JavaScript Library.
    Completely configurable through backend (image size, zoom position etc.).
    No Magento core files modification.
    Works with most browsers (tested on IE6+, Firefox, Chrome, Opera, Safari).
    It's completely free.

    Cloud Zoon on GitHub (for manual installation)

    Các file đính kèm:

    Bài viết khác cùng chuyên mục:

  2. akiana

    akiana New Member

    MÌnh cũng có một bài về Cloud Zoom trên vn-zoom, nay mình copy lại sang đây cho các bạn xem và thử áp dụng nhé :

    Tính năng : Di chuột vào ảnh là nó zoom từng vùng của ảnh to ra, trông hay đáo để , hình như trên vatgia hay trang bán hàng hay làm.

    = > Đây là jquery zoomcloud 1.0.3, bản mới nhất là 2.3 thì phải nhưng phải mua mất $ đấy ạ. Mình thấy 1.0.3 cũng đẹp rồi.
    = > Nguyên lý : Có hai thư mục nguồn của ảnh Small chứa ảnh nhỏ, Large chứa ảnh lớn. Khi di vào phần nào của ảnh nhỏ thì nó zoom ra phần tương ứng của ảnh lớn.

    Code đại loại là thế này :
    Mã:
    <a style="position: relative; display: block;" id="zoom01" class="cloud-zoom" rel="position:'right', adjustX:20, adjustY:-3, tint:'#FFFFFF', softFocus:1, smoothMove:5, tintOpacity:0.8" href="url_anh_lon.jpg"><img src="url_anh_nho.jpg" width="w" height="h"/></a>
    
    
    Các file css, js bao gồm 3 file : jquery_003.js, cloud-zoom.js, cloud-zoom.css ( Trong file đính kèm hoặc link mediafile phía dưới )
    ( Down trong link mediafile và demo ở cuối bài nhé ! )
    Ảnh lớn nên có kích thước lớn hơn 768px - 1024px thì sẽ đẹp hơn..

    Code file media.phtml ở trong thư mục app\design\frontend\default\yourtheme\template\catalog\product\view như sau :
    Mã:
    <?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     default_modern
     * @copyright   Copyright (c) 2010 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
     */
    ?>
    <head>
    <script type="text/javascript" src="yoursite/js/jquery_003.js"></script>
    <script type="text/javascript" src="yoursite/js/cloud-zoom.js"></script>
    <link href="http://yoursite/skin/frontend/default/yourtheme/css/cloud-zoom.css" type="text/css" rel="stylesheet">
    </head>
    <?php
        $_product = $this->getProduct();
        $_helper = $this->helper('catalog/output');
    ?>
    <?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
    <!--p class="product-image product-image-zoom"-->
    <!-- cloud zoom -->
    <!-- cloud zoom -->
    <p>
    <a style="position: relative; display: block;" id="zoom01" class="cloud-zoom"
     <?php echo 'href="'.$this->helper('catalog/image')->init($_product, 'image').'" '; ?> rel="position:'right', adjustX:20, adjustY:-3, tint:'#FFFFFF', softFocus:1, smoothMove:5, tintOpacity:0.8">
        <?php
            $_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(300).'" />';
            echo $_helper->productAttribute($_product, $_img, 'image');
        ?>
    	</a>
    </p>
    
    <?php else: ?>
    <p class="product-image">
        <?php
            $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(300).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
            echo $_helper->productAttribute($_product, $_img, 'image');
        ?>
    </p>
    <?php endif; ?>
    <?php if (count($this->getGalleryImages()) > 0): ?>
    <div class="more-views">
        <h2><?php echo $this->__('More Views') ?></h2>
        <ul>
        <?php foreach ($this->getGalleryImages() as $_image): ?>
            <li>
                <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->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(66); ?>" width="66" height="66" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
            </li>
        <?php endforeach; ?>
        </ul>
    </div>
    <?php endif; ?>
    
    = > Link download đây, ai cần thì lấy về nghiên cứu nhé :
    http://www.mediafire.com/?lhl48tcf7df0jix
    Pass: http://www.3ce.vn
    Demo : http://store.3ce.vn/tu-rack-crack.html?rack_cabinet_units=129 ( Các bác kích chọn 1 sản phẩm đi ạ, rồi di chuột vào ảnh lớn nhé...)

    Các file đính kèm:

  3. hunglvcntt

    hunglvcntt New Member

  4. thienson

    thienson New Member

    Password không đúng gì hết pác akiana ơi! Up lại pass mới đi! Thanks!
  5. akiana

    akiana New Member

    pass là : www.3ce.vn bạn nhé...
  6. tran trong 92

    tran trong 92 Member

    mình thấy nó cũng rất đẹp. thank you!!

Chia sẻ trang này