Hướng Dẫn Áp Dụng cloud zoom cho hiển thị module shop chú ý làm với module defeault nhé các bạn
Bước 1 : Giải Nén file zip của Mr Tứ Đường link sau https://www.nuke.vn/app/cloudzoom/
copy 2 file cloudzoom.js và thumbelina.js vào thư mục themes/ten-theme-dang-dung/js copy 2 file cloudzoom.css và thumbelina.css themes/ten-theme-dang-dung/css
Bước 2: mở file detail.tpl thêm vào dòng sau
<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>
Bước 3: 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 mở file index.html trong file vừa giải nén bang notepad++ 1/tìm và copy 2 đoạn
<script type="text/javascript"> CloudZoom.quickStart(); $(function() { $('#slider1').Thumbelina({ $bwdBut: $('#slider1 .left'), $fwdBut: $('#slider1 .right') }); }); </script>
Sau đó mở file detail.tpl paste 2 đoạn vừa copy vào sau dòng
<div id="fb-root"></div>
Bước 5: Copy đoạn sau (trong file index.html)
<img class="cloudzoom" alt="Cloud Zoom small image" id="zoom1" src="images/image1.jpg" data-cloudzoom=' zoomSizeMode:"image", autoInside:100 '> <div id="slider1"> <div class="thumbelina-but horiz left">˂</div> <ul> <li><img class='cloudzoom-gallery' src="thumb/image1.jpg" data-cloudzoom="useZoom:'.cloudzoom', image:'images/image1.jpg' "></li> </ul> <div class="thumbelina-but horiz right">˃</div> </div> </div>
Vào trước dòng dưới trong detail.tpl
<div class="row"><div class="col-xs-24 col-sm-6 text-center">
Tìm và xóa dòng
<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>
Bước 6.tìm 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 $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 $xtpl->assign('OTHERIMAGE',$otherimg);
Bước 7 Tìm mở file othersimg.tpl trong themes/ten-theme/module/shops xóa hết copy đè nội dung sau :
<!-- 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 -->
Bước 8. Mở file detail.tpl Copy đoạn code sau
<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="width:150px " src="{SRC_PRO}" data-cloudzoom="useZoom:'.cloudzoom', image:'{SRC_PRO_LAGE}' "></li> {OTHERIMAGE} </ul> <div class="thumbelina-but horiz right">˃</div> </div>
Dán vào dưới dòng
<div class="panel panel-default"> <div class="panel-body">
Bước 9: Save và tải lại xem kết quả. Nếu có thể các bạn css thêm cho đẹp nhé