Hướng dẫn thêm cloudzoom của Đặng Đình Tứ áp dụng vào phần chi tiết module sản phẩm

Thảo luận trong 'Modules sản phẩm' đăng bởi xuanthuy235, 12/09/2016 04:39.

  • 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">&#706;</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">&#707;</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">&#706;</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">&#707;</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é   

     
    Lần sửa cuối bởi một điều hành viên: 12/09/2016 04:54
    khicon038 anpy.ceo thích điều này.
  • Yamahayuv

    Yamahayuv zwusalmeltfqdxdGP zzusafme2ntkdkxGP

    cloudzoom

    Bạn làm theo cách của bạn!

    Tôi làm theo cách của tôi! Haaaaaa

     
    havi525 thích điều này.
  • Làm theo cách này chắc vứt luôn cái module shops quá bạn.

     
  • yliaaaa

    yliaaaa yliaaaaCL yliaaaaCL

    Share cách làm đi bác ơi :D

     
  • Yamahayuv

    Yamahayuv zwusalmeltfqdxdGP zzusafme2ntkdkxGP

    Bạn view code ở đây và làm theo

    http://view-source:https://www.nuke.vn/app/cloudzoom/

     
  • em làm xong nó hiện vậy. là thiếu cái gì vầy mấy bác, e mò mãi mà ko ra

     

     
  • Fortresssnl

    Fortresssnl xzusafmewnazxwpGP zvusafmegmqhc3dGP

    Link các ảnh không chính xác kìa :D

     
  • Yamahayuv

    Yamahayuv zwusalmeltfqdxdGP zzusafme2ntkdkxGP

    Xem kỹ link ảnh:

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

     

     
  •  

     

    em đổi code của bác nó ra thế nầy 

     

     
  • Augustoqy

    Augustoqy svusaymeumsdxphGP xzusaymermokxmfGP

    cái Bước 5 với Bước 8 hình như có gì đó nhầm lẫn và sai sót bác Tứ ah ?!?! 

     
  • Augustoqy

    Augustoqy svusaymeumsdxphGP xzusaymermokxmfGP

    Bác Tứ thiếu mất thêm đoạn định dạng cho khối zoom rồi nên ae làm nó bị vỡ theme toè loe cả :3. em bổ sung nhé.

     

    ở Bước 4. các bác thêm cả đoạn mã này nữa nhé;

    <style type="text/css">
            /* 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>

     Bỏ luôn Bước 5 (Bước 5 bị thừa vì Bước 8 mới là chuẩn ). ở Bước 8 trước khi làm theo hướng dẫn Bước 8 ở trên thì....: 

     trong detail.tpl của shops các bạn 

    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>

     
  • Furrionoup

    Furrionoup zvusafme2tructuGP szusafme3meidrzGP

    em làm xong ở detail thì ok rồi mà cái modal khi xem nhanh nó kỳ kỳ sao ấy

    http://demo.tranphuong.info/

     
  • Augustoqy

    Augustoqy svusaymeumsdxphGP xzusaymermokxmfGP

    Bỏ modal đi bác, e cạch cái modal này của nukeviet rồi :v =)) 

     
  • Augustoqy

    Augustoqy svusaymeumsdxphGP xzusaymermokxmfGP

    có cái gì ngoài sử dụng modal mà load đc xem nhanh như thế ko nhỉ? chứ nó load detail ra ngồi fix nhọc kinh . mà nếu muốn chắc làm riêng detail cho modal quá?

     
  • Augustoqy

    Augustoqy svusaymeumsdxphGP xzusaymermokxmfGP

    Phương làm cái trang view cat của shop mà khi dê chuột vào hình thì hình nó zoom to ra tý ấy. nó là đoạn css thì fai nhìn hay hay.

     
  • Furrionoup

    Furrionoup zvusafme2tructuGP szusafme3meidrzGP

    bữa h fix ko được có mấy cái lỗi mà nó kinh dị sao sao ấy

     
  • Fortresssnl

    Fortresssnl xzusafmewnazxwpGP zvusafmegmqhc3dGP

    Lỗi dư nào nào ? sad

     
  • Furrionoup

    Furrionoup zvusafme2tructuGP szusafme3meidrzGP

    bác vào trang demo của em xem đi ạ

    Trang chủ -> Đặt hàng xem nha

    Rồi sau đó tắt cái modal đó đi lại đặt hàng xem sản phẩm khác -> ko thấy zoom luôn

    Giống như nó chỉ zoom dc 1 lần thì phải

     
  • Fortresssnl

    Fortresssnl xzusafmewnazxwpGP zvusafmegmqhc3dGP

    Thỉ chủ cho link đi. :)

    Mà làm việc với modal của Bootstrap thì cần chút công sức nó mới bình thường được.

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

    Furrionoup zvusafme2tructuGP szusafme3meidrzGP

    demo.tranphuong.info  đó ạ

     

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