Bước 1: Chuẩn bị các tập tin
Chép tập tin xzoom.min.js or xzoom.js bỏ vào trong thư mục javascript của Bạn. Chép tập tin xzoom.css bỏ vào thư mục css của Bạn.Chép tập tin images/xloading.gif bỏ vào thư mục to your images folder.
Bước 2: Gọi thư viện CSS & ZOOM
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://dongthoigian.net/cpadmin/css/xzoom.css" media="all"><script type="text/javascript" src="js/xzoom.min.js"></script>Bước 3: Chèn các hình ảnh cần Zoom
<img class="xzoom" src="https://hocwebgiare.com/images/preview_image_01.jpg" xoriginal="path/to/original_image_01.jpg" alt="">
<div class="xzoom-thumbs"> <a href="https://dongthoigian.net/images/original_image_01.jpg">
<img class="xzoom-gallery" width="80" src="https://hocwebgiare.com/images/thumbs_image_01.jpg" xpreview="path/to/preview_image_01.jpg" alt=""> </a> <a href="https://hocwebgiare.com/images/original_image_02.jpg">
<img class="xzoom-gallery" width="80" src="https://hocwebgiare.com/images/preview_image_02.jpg" alt=""> </a> <a href="https://hocwebgiare.com/images/original_image_03.jpg">
<img class="xzoom-gallery" width="80" src="https://hocwebgiare.com/images/preview_image_03.jpg" alt=""> </a> <a href="https://hocwebgiare.com/images/original_image_04.jpg">
<img class="xzoom-gallery" width="80" src="https://hocwebgiare.com/images/preview_image_04.jpg" alt=""> </a>
</div>Bước 4: Gọi scirpt Zoom
$(".xzoom, .xzoom-gallery").xzoom({tint: '#333', Xoffset: 15});