Tìm kiếm nhanh

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.

  • xuanthuy235

    xuanthuy235 Lê Xuân Thủy

    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.
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    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.
  • hoanghung

    hoanghung hoang hung

    Làm theo cách này chắc vứt luôn cái module shops quá bạn.

     
  • havi525

    havi525 Mr Quân Quân

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

     
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

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

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

     
  • tanlucol

    tanlucol Tấn Lực

    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

     

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

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

     
  • hoanglongvnpt

    hoanglongvnpt Nguyễn Tất Thắng

    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>

     

     
  • tanlucol

    tanlucol Tấn Lực

     

     

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

     

     
  • vietlv

    vietlv Viet Lv

    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 ?!?! 

     
  • vietlv

    vietlv Viet Lv

    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>

     
  • aptx4869

    aptx4869 Trần Phương

    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/

     
  • vietlv

    vietlv Viet Lv

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

     
  • vietlv

    vietlv Viet Lv

    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á?

     
  • vietlv

    vietlv Viet Lv

    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.

     
  • aptx4869

    aptx4869 Trần Phương

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

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

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

     
  • aptx4869

    aptx4869 Trần Phương

    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

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

    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.
  • aptx4869

    aptx4869 Trần Phương

    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