Hướng dẫn tạo tính năng phóng đại hình ảnh chi tiết

Chào các bạn, hôm nay mình giới thiệu cho các bạn Jquery Cloud Zoom Image để phục vụ cho việc phóng đại hình ảnh.

Có khi nào bạn dạo bước tại các trang thương mại điện tử và nhìn thấy sản phầm chi tiết của họ được bày trí rất đặc biệt không? Điển hình như Sendo, Lazada, hay Tiki .Các sản phẩm của họ sẽ được phóng đại tại vị trí mà bạn rê chuột tại đó như thế này :

Cloud Zoom Image

Bài viết này sẽ hướng dẫn bạn cách chèn đoạn Css và Jquery vào sản phầm của bạn để trông sắc nét, mượt mà và nổi bật hơn nữa trong mắt khách hàng khi đến thăm Website của bạn. Nào chúng ta cùng bắt đầu thôi !!!

Đầu tiên, bạn tìm đến thẻ <head> và cho gọi Jquery hỗ trợ ra, bạn có thể download chúng Tại đây, sau đó giải nén và bỏ chùng vào thư mục chứa Js của bạn.

Copy đoạn code sau đặt chúng trước thẻ </head>

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/cloud-zoom.1.0.2.min.js" type="text/javascript">
</script>

Sau đó ta sẽ tùy chỉnh Css của chúng bằng đoạn code sau:

<style>
/*css cloud zoom */
.demo{margin:0 auto;width:1000px;}
.zoom-section{clear:both;margin-top:20px;}
.zoom-small-image{border:4px solid #CCC;float:left;margin-bottom:20px;}
@charset "utf-8";
.cloud-zoom-lens {border: 4px solid #888;margin:-4px;background-color:#fff;cursor:move;}
.cloud-zoom-title {font-family:Arial, Helvetica, sans-serif;position:absolute !important;background-color:#000;color:#fff;padding:3px;width:100%;text-align:center;font-weight:bold;font-size:10px;top:0px;}
.cloud-zoom-big {border:4px solid #ccc;overflow:hidden;}
.cloud-zoom-loading {color:white;background:#222;padding:3px;border:1px solid #000;}
</style>

Cuối cùng đặt đoạn code sau tại vị trí mà bạn muốn hiển thị hình ảnh của mình, thay đoạn mã minh họa màu vàng bằng tên hình ảnh của bạn.

<div class="demo">
  <div class="zoom-section">

   <div class="zoom-small-image">
     <a class="cloud-zoom" href="https://www.blogger.com/images/bigimage00.jpg" id="zoom1" rel="adjustX:10, adjustY:-4"><img alt="" src="images/smallimage.jpg" title="Optional title display" /></a></div>
   </div>
  <!--zoom-section end-->
</div>

bigimage00.jpg: Là hình ảnh được phóng đại
smallimage.jpg: Là hình ảnh được Zoom