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">˂</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">˃</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