Tìm kiếm nhanh

Cloud Zoom sử dụng ảnh nhỏ dạng slider để zoom ảnh

Thảo luận trong 'Modules sản phẩm' đăng bởi hoanglongvnpt, 03/10/2016 12:12.

  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    Cloud Zoom là một Jquery plugin với chức năng zoom hình ảnh tương đối nhẹ và mượt mà, tuy nhiên để sở hữu bản quyền của nó bản phải tốn chi phí không phải là thấp. Có thể xem qua bảng giá tại http://www.starplugins.com/checkout/cloudzoom.

    Gần đây, nuke.vn đã cho ra mắt bản mod lại của plugin này, chúng ta đã có thể sử dụng mà không cần phải trả phí.

     

    Bắt đầu nhé các thánh

    Bước 1 : Giải Nén file zip của Mr Tứ Đường link sau

    https://www.nuke.vn/app/cloudzoom/ 

    Bước 2: mở file theme.php trong thư mục module/shop

    * tìm đến dòng 1256 thêm vào dưới dòng

    $link2 = NV_BASE_SITEURL ....  

      thêm vào dưới nó

    $otherimg= nv_display_othersimage($data_content['otherimage']);    

     

    * Tìm đến dòng 1274

    $xtpl->assign('LINK_PRINT', NV_BASE_SITEURL....  

          thêm vào dưới nó

     

    $xtpl->assign('OTHERIMAGE',$otherimg);

    Bước 3: mở file detail.tpl thêm vào dòng  sau đoạn

    <!-- BEGIN: main -->

    code

    <link rel="stylesheet" type="text/css" href="/themes/default/css/cloudzoom.css" />
    <link rel="stylesheet" type="text/css" href="/themes/default/css/thumbelina.css" />
    <script type="text/javascript" src="/themes/default/js/cloudzoom.js"></script>
    <script type="text/javascript" src="/themes/default/js/thumbelina.js"></script>
    <div id="fb-root"></div>
        <script type="text/javascript">
            CloudZoom.quickStart();
            $(function() {
                $('#slider1').Thumbelina({
                    $bwdBut: $('#slider1 .left'),
                    $fwdBut: $('#slider1 .right')
                });
            });
        </script>
        <style>
            /* div that surrounds Cloud Zoom image and content slider. */
            #surround {
                width: 50%;
                min-width: 256px;
                max-width: 480px;
            }
            /* Image expands to width of surround */
            img.cloudzoom {
                width: 100%;
            }
            /* CSS for slider - will expand to width of surround */
            #slider1 {
                margin-left: 20px;
                margin-right: 20px;
                height: 120px;
                border: 1px solid #CCC;
                position: relative;
            }
        </style>

    Thay toàn bộ đoạn code này

    <a href="" data-src="{SRC_PRO_LAGE}" data-width="{SRC_PRO_LAGE_INFO.width}" class="open_modal" title="{TITLE}"><img src="{SRC_PRO}" alt="" width="140px" class="img-thumbnail" id="imageproduct"></a>
                        <br />

    Bằng đoạn code 

    	<img class="cloudzoom" alt="Cloud Zoom small image" id="zoom1" src="{SRC_PRO_LAGE}" data-cloudzoom='zoomSizeMode:"image",autoInside:100'>
    					<div id="slider1">
    						<div class="thumbelina-but horiz left">&#706;</div>
    						<ul>
    							<li><img class='cloudzoom-gallery' style="height:110px" src="{SRC_PRO}" data-cloudzoom="useZoom:'.cloudzoom', image:'{SRC_PRO_LAGE}' "></li>                          
    								{OTHERIMAGE}
    						</ul>
    						<div class="thumbelina-but horiz right">&#707;</div>
    					</div>
    					<br />

    Tìm và xóa hết đoạn

    <!-- BEGIN: imagemodal -->
    <script type="text/javascript" data-show="after">
        $('.open_modal').click(function(e){
            e.preventDefault();
             $('#idmodals .modal-body').html( '<img src="' + $(this).data('src') + '" alt="" class="img-responsive" />' );
             $('#idmodals').modal('show');
        });
    </script>
    <!-- END: imagemodal -->

    Bước 4 Tìm mở file othersimg.tpl trong themes/ten-theme/module/shops 

    Xóa hết copy đè nội dung sau và save lại:

    <!-- BEGIN: main -->
            <!-- BEGIN: othersimg -->
    
                <!-- BEGIN: loop -->
                    <li><img class='cloudzoom-gallery' style="width:150px" src="{IMG_SRC_OTHER}" data-cloudzoom="useZoom:'.cloudzoom', image:'{IMG_SRC_OTHER}' "></li>
                <!-- END: loop -->
            <!-- END: othersimg -->
    <!-- END: main -->

    Xong xóa cache xem thế nào nhé. G9

     
    havi525 thích điều này.
  • havi525

    havi525 Mr Quân Quân

    Thanks bác, chưa có time thử nhưng đánh dấu đã ahihi

     
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    Nhớ thay link mặc định bằng link này nhé

    <link rel="stylesheet" type="text/css" href="/themes/default/css/cloudzoom.css" />
    <link rel="stylesheet" type="text/css" href="/themes/default/css/thumbelina.css" />
    <script type="text/javascript" src="/themes/default/js/cloudzoom.js"></script>
    <script type="text/javascript" src="/themes/default/js/thumbelina.js"></script>

     

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

        <script type="text/javascript">
            CloudZoom.quickStart();
            $(function() {
                $('#slider1').Thumbelina({
                    $bwdBut: $('#slider1 .left'),
                    $fwdBut: $('#slider1 .right')
                });
            });
        </script>

    Đoạn này nên gán id của SP vào để tránh các "thiệt hại" không đáng có do bị trùng ID (dù là hiếm khi xảy ra).

     
    hoanglongvnpt thích điều này.
  • aptx4869

    aptx4869 Trần Phương

    có ai giúp em ko nhỉ. Modal trang chủ tùm lum hết, mà khi show dc chỉ 1 lần tắt đi show cái khác ko thấy zoom luôn.

    demo.tranphuong.info

     
    songnhienhd thích điều này.
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

     

    Đang kẹt nên ko dám nói gì luôn.

     
  • vietlv

    vietlv Viet Lv

    ơ cái này với topic thêm cloudzoom vào của bác Tứ có khác gì nhau ko ah?!?

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

     

    Chỉ lưu ý là anh Tứ ko làm bài hd nhúng vào Nuke nhé. :D

     

     
    hoanglongvnpt thích điều này.
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    cloudzoom này là Tứ sưu tầm và đã hack cho anh em xài mà khỏi trả phí thôi và để tự tìm hiểu chứ Tứ chưa viết bài hướng dẫn nhé.

     
  • vietlv

    vietlv Viet Lv

    cái này bác Thuỷ share cũng tương tự mà nhỉ ? https://www.nuke.vn/forum/threads/huong-dan-them-cloudzoom-cua-dang-dinh-tu-ap-dung-vao-phan-chi-tiet-module-san-pham-463/

     
  • Em làm xong mà vẫn không zoom được là do cái gì các bác. 

     
  • Em sửa nó zoom được trong chi tiết sản phẩm  nhưng ở ngoài trang chủ khi rê chuột vào sản phẩm nó không zoom lên là sao ạ .

    test: hiepduc.net

     
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    Css cho image thumnai

     
  • tanlucol

    tanlucol Tấn Lực

     

     

    bác chia sẽ cho em cái ngoài trang chủ khi rê chuột vào sản phẩm nó không zoom lên với được ko ạ

     

     
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    không zoom ở trang chủ. chỉ css cho class img-thumbnail

     
  • shinjinjin

    shinjinjin nhatlinh ho

    Cho em hỏi xóa đoạn này ở file nào ạ?

    <a href="" data-src="{SRC_PRO_LAGE}" data-width="{SRC_PRO_LAGE_INFO.width}" class="open_modal" title="{TITLE}"><img src="{SRC_PRO}" alt="" width="140px" class="img-thumbnail" id="imageproduct"></a> <br />

     

Chia sẻ trang này

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây