Lập trình JQUERY – Code : Sản phẩm xoay 360 độ

Code Jquery  sản phẩm xoay 360 độ

 Với mức độ phổ biến của công nghệ chụp ảnh 360  ứng dụng trong các lĩnh vực quảng cáo sản phẩm trên nền web  đặc biệt là các trang thương mại điện tử, các hình ảnh mô tả sản phẩm càng chi tiết, đẹp mắt thì sẽ mang lại nhiều hiệu quả hơn đặc biệt với hình ảnh dạng 3D có thể xoay 360 độ . Bài viết này chụp ảnh 360 hướng dẫn bạn thực hiện chức năng Xoay hình đó

  Trong bài này tôi chỉ minh họa cho bạn cách thực hiện với html và javascript code xoay 360. Việc lấy từ cơ sở dữ liệu cũng không khó khăn lắm.

DOWNLOAD || DEMO 

Chuẩn bị :

Giải nén gói down về, copy thư mục js vào thư mục chứa site.

Bước 1 : Thêm thư viện vào trang web

Dán đoạn mã sau vào thẻ head

<script type=”text/javascript” src=”js/jquery-1.4.4.min.js” ></script> 

        <script type="text/javascript" src="js/j360.js" ></script>  




Bước 2 : Dùng jquery tác dụng lên mã html ở bước 3

Dán đoạn mã jquery vào nơi muốn hiện ảnh sản phẩm xoay

<script type="text/javascript"> 
            jQuery(document).ready(function() { 
                jQuery('#product').j360(); 
            }); 
        </script>  

Bước 3 :

Ngay sau đoạn mã script trên, ta viết mã html theo cấu trúc như sau:

<center> 
            <div id="product" style="width: 640px; height: 480px; overflow: hidden;cursor: move;"> 
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-1.jpg' alt="" style="cursor: move;" /> 
........................................................................................ 
......................................................................................... 
...... 
                <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-35.jpg' alt="" style="cursor: move;" /> 
        <img src='samsung_galaxy_img/dien-thoai-di-dong-samsung-galaxy-note-2-n7100-36.jpg' alt="" style="cursor: move;" /> 
             </div> 
        </center>  

Kết thúc.