Hướng dẫn Cloud Zoom sử dụng ảnh nhỏ dạng slider để zoom ảnh

Thành viên năng động
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
PHP:
$link2 = NV_BASE_SITEURL ....
thêm vào dưới nó
Code:
$otherimg= nv_display_othersimage($data_content['otherimage']);
* Tìm đến dòng 1274
Code:
$xtpl->assign('LINK_PRINT', NV_BASE_SITEURL....
thêm vào dưới nó
Code:
$xtpl->assign('OTHERIMAGE',$otherimg);
Bước 3: mở file detail.tpl thêm vào dòng sau đoạn
<!-- BEGIN: main -->
code
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
Code:
<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
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
Code:
<!-- 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:
Code:
<!-- 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
 
Thành viên mới
Cho em hỏi cái file cloudzoom giải nén thì vứt vào đâu ạ
 
Thành viên năng động
xem link đến file nó ở đây:
Code:
ink 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>
 
Thành viên mới
xem link đến file nó ở đây:
Code:
ink 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>
Em làm theo bác rồi nhưng nó lại thế này ạ
img-2017-03-24-08-09-52-1.png
 
Thành viên năng động
E cũng bị giống của bác #đôngGioăng img-2017-04-20-07-20-09-1.png
 
Thành viên năng động
xem lại 2 file css
file: othersimg.tpl
và code:
Code:
<script type="text/javascript">
        CloudZoom.quickStart();
        $(function() {
            $('#slider-{proid}').Thumbelina({
                $bwdBut: $('#slider-{proid} .left'),
                $fwdBut: $('#slider-{proid} .right')
            });
        });
    </script>
    <style>
        /* div that surrounds Cloud Zoom image and content slider. */
        #surround-{proid} {
            width: 100%;
            max-width: 100%;
        }
        /* Image expands to width of surround */
        img.cloudzoom {
            width: 100%;
        }
        /* CSS for slider - will expand to width of surround */
        #slider-{proid} {
            margin-left: 20px;
            margin-right: 20px;
            height: 70px;
            border-top: 1px solid #aaa;
            border-bottom: 1px solid #aaa;
            position: relative;
        }
    </style>
ở file detail.tpl
 
Thành viên năng động
bác nào chưa làm được pm mình nhé.
 
--= Roll With The Wind =--
Quản trị viên
bác nào chưa làm được pm mình nhé.
Bác hướng dẫn mình với :(
 
Thành viên mới
Bác hướng dẫn mình với :(
Cho phép mình bổ sung bài viết của Anh Thắng nhé

1. download https://www.nuke.vn/app/cloudzoom/ về giải nén lưu vào thu mục theme/tên theme/

2. sau đó làm các bước giống như của hoanglongvnpt

3. file detail thì sửa lại như thế này là xong.
<link rel="stylesheet" type="text/css" href="{NV_BASE_SITEURL}themes/{TEMPLATE}/cloudzoom/cloudzoom.css" />
<link rel="stylesheet" type="text/css" href="{NV_BASE_SITEURL}themes/{TEMPLATE}/cloudzoom/thumbelina.css" />
<script type="text/javascript" src="{NV_BASE_SITEURL}themes/{TEMPLATE}/cloudzoom/cloudzoom.js"></script>
<script type="text/javascript" src="{NV_BASE_SITEURL}themes/{TEMPLATE}/cloudzoom/thumbelina.js"></script>

Nếu bác nào làm các bước trên mà chưa được thì thêm phần này vào : module/shop/theme.php

Tìm đoạn này:
if (!$popup) {
// Hien thi tabs
if (!empty($data_content['tabs'])) {
$i=0;

Thêm đoạn này vào trên nó:

if( ! empty( $data_content['otherimage'] ) )
{
$otherimage = explode( '|', $data_content['otherimage'] );
}
else
{
$otherimage = array();
}

if( ! empty( $otherimage ) )
{
foreach( $otherimage as $otherimage_i )
{
if( ! empty( $otherimage_i ) and file_exists( NV_UPLOADS_REAL_DIR . '/' . $module_name . '/' . $otherimage_i ) )
{
$otherimage_i = NV_BASE_SITEURL . NV_UPLOADS_DIR . '/' . $module_name . '/' . $otherimage_i;
$xtpl->assign( 'IMG_SRC_OTHER', $otherimage_i );
$xtpl->parse( 'main.othersimg.loop' );
}
}
$xtpl->parse( 'main.othersimg' );

}
 
Thành viên năng động
3. file detail thì sửa lại như thế này là xong.
<link rel="stylesheet" type="text/css" href="{NV_BASE_SITEURL}themes/{TEMPLATE}/cloudzoom/cloudzoom.css" />
<link rel="stylesheet" type="text/css" href="{NV_BASE_SITEURL}themes/{TEMPLATE}/cloudzoom/thumbelina.css" />
<script type="text/javascript" src="{NV_BASE_SITEURL}themes/{TEMPLATE}/cloudzoom/cloudzoom.js"></script>
<script type="text/javascript" src="{NV_BASE_SITEURL}themes/{TEMPLATE}/cloudzoom/thumbelina.js"></script>


thay = cái này cũng được nhé;

<script type="text/javascript" src="https://www.nuke.vn/app/cloudzoom/cloudzoom.js"></script>
<script type="text/javascript" src="https://www.nuke.vn/app/cloudzoom/thumbelina.js"></script>
<link href="https://www.nuke.vn/app/cloudzoom/cloudzoom.css" type="text/css" rel="stylesheet">
<link href="https://www.nuke.vn/app/cloudzoom/thumbelina.css" type="text/css" rel="stylesheet">
 
--= Roll With The Wind =--
Quản trị viên
3. file detail thì sửa lại như thế này là xong.
<link rel="stylesheet" type="text/css" href="{NV_BASE_SITEURL}themes/{TEMPLATE}/cloudzoom/cloudzoom.css" />
<link rel="stylesheet" type="text/css" href="{NV_BASE_SITEURL}themes/{TEMPLATE}/cloudzoom/thumbelina.css" />
<script type="text/javascript" src="{NV_BASE_SITEURL}themes/{TEMPLATE}/cloudzoom/cloudzoom.js"></script>
<script type="text/javascript" src="{NV_BASE_SITEURL}themes/{TEMPLATE}/cloudzoom/thumbelina.js"></script>


thay = cái này cũng được nhé;

<script type="text/javascript" src="https://www.nuke.vn/app/cloudzoom/cloudzoom.js"></script>
<script type="text/javascript" src="https://www.nuke.vn/app/cloudzoom/thumbelina.js"></script>
<link href="https://www.nuke.vn/app/cloudzoom/cloudzoom.css" type="text/css" rel="stylesheet">
<link href="https://www.nuke.vn/app/cloudzoom/thumbelina.css" type="text/css" rel="stylesheet">
Không khuyến khích hot-link từ nuke.vn nhé.
 
Thành viên năng động
Mất link đừng alo nhé...!:laluot-16: