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

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é   

 

cloudzoom

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

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

 

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

 

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

 

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

 

 

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

 

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 

 

 

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

 

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>

 

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/

 

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

 

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

 

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.

 

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

 

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

 

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

 

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.

 

demo.tranphuong.info  đó ạ