Cloud Zoom sử dụng ảnh nhỏ dạng slider để zoom ảnh

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

 

Thanks bác, chưa có time thử nhưng đánh dấu đã ahihi

 

Nhớ thay link mặc định bằng link này nhé

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

 

 

    <script type="text/javascript">
        CloudZoom.quickStart();
        $(function() {
            $('#slider1').Thumbelina({
                $bwdBut: $('#slider1 .left'),
                $fwdBut: $('#slider1 .right')
            });
        });
    </script>

Đoạn này nên gán id của SP vào để tránh các "thiệt hại" không đáng có do bị trùng ID (dù là hiếm khi xảy ra).

 

có ai giúp em ko nhỉ. Modal trang chủ tùm lum hết, mà khi show dc chỉ 1 lần tắt đi show cái khác ko thấy zoom luôn.

demo.tranphuong.info

 

 

Đang kẹt nên ko dám nói gì luôn.

 

ơ cái này với topic thêm cloudzoom vào của bác Tứ có khác gì nhau ko ah?!?

 

 

Chỉ lưu ý là anh Tứ ko làm bài hd nhúng vào Nuke nhé. :D

 

 

cloudzoom này là Tứ sưu tầm và đã hack cho anh em xài mà khỏi trả phí thôi và để tự tìm hiểu chứ Tứ chưa viết bài hướng dẫn nhé.

 

cái này bác Thuỷ share cũng tương tự mà nhỉ ? https://www.nuke.vn/forum/threads/huong-dan-them-cloudzoom-cua-dang-dinh-tu-ap-dung-vao-phan-chi-tiet-module-san-pham-463/

 

Em làm xong mà vẫn không zoom được là do cái gì các bác. 

 

Em sửa nó zoom được trong chi tiết sản phẩm  nhưng ở ngoài trang chủ khi rê chuột vào sản phẩm nó không zoom lên là sao ạ .

test: hiepduc.net

 

Css cho image thumnai

 

 

 

bác chia sẽ cho em cái ngoài trang chủ khi rê chuột vào sản phẩm nó không zoom lên với được ko ạ

 

 

không zoom ở trang chủ. chỉ css cho class img-thumbnail

 

Cho em hỏi xóa đoạn này ở file nào ạ?

<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 />

 

Lỗi không click được vào hình minh họa khác

 

Demo : http://thanhvyus.com/Dong-Ho/dh-invicta.html

 

Click vào quá ư nà bình thường nuôn

 

xem giúp mình với sao mình sửa giống hướng dẫn mà ko được nó ra như thế này

 

NukeViet mấy bạn ?