2 hiệu ứng zoom ảnh đơn giản với jQuery plugin Sprite Zoom

Sprite Zoom là một plugin rất dễ sử dụng và tùy chỉnh cho việc tạo hiệu ứng phóng to ảnh (zoom). Hôm nay mình sẽ chia sẻ cho các bạn 2 mẫu zoom ảnh được làm từ plugin này, với các mẫu này, các bạn có thể áp dụng vào trong các trang web bán hàng hoặc trên blog của mình.

Xem Demo | Download

Cách sử dụng

1. Đầu tiên, các bạn load jquery plugin vào trong trang web cùng với thư viện jQuery.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="src/jquery.spritezoom.js"></script>

2. Sau đó, các bạn chèn mẫu html vào nơi mà các bạn muốn hiển thị ảnh.

<div class="example zoom1"></div>
<div class="example zoom2"></div>

3. Cuối cùng là chèn đoạn script sau ứng với mỗi mẫu mà các bạn muốn áp dụng.

<script type="text/javascript">
$(function(){
        $(".zoom1").spritezoom({
          border  : 6,
          source  : "http://lorempixel.com/500/400/nature/1",
          zSource : "http://lorempixel.com/1000/800/nature/1",
          layout  : "right"
        });

        $(".zoom2").spritezoom({
          border  : 6,
          source  : "http://lorempixel.com/500/400/city/1",
          zSource : "http://lorempixel.com/1000/800/city/1",
          layout  : "magnify"
        });
});

</script>

Rất đơn giản phải không các bạn, các bạn còn có thể thêm vào các thông số như sau :

// fadeIn speed
fadeInSpeed  : 500,

// fadeOut speed
fadeOutSpeed : 300,  // general element fade out speed

// 'hover' or 'click',
behavior     : "hover", 

// "inner", "top", "right", "bottom", "left", "magnify" or empty
layout       : "inner",

// magnifying glass appearance
border       : 4,
magSize      : 0.3,

Chúc các bạn thành công !

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster