So sánh sự khác nhau giữa hình ảnh sử dụng Before/After jQuery Plugin
Before/After jQuery Plugin - plugin của jQuery giúp chúng ta dễ dàng so sánh sự khác nhau của hình ảnh bằng cách kéo qua lại giữa thanh slider
Cách sử dụng :
Trước tiên, bạn cần download jQuery và jQuery UI và Before/After jQuery Plugin . Sau đó thêm vào trong thẻ <head> của trang web:
<-- Thư viện Jquery , Jquery UI -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<-- Jquery Before After Plugin -->
<script type="text/javascript" src="js/jquery.beforeafter.min.js"></script>
// Khai báo đúng ID và image path
<script type="text/javascript">
$(function(){
$('#container').beforeAfter({imagePath:images/'});
});
</script>
Mã HTML :
<div id="container"> <div><img alt="before" src="images/before.jpg" width="600" height="366" /></div> <div><img alt="after" src="images/after.jpg" width="600" height="366" /></div> </div>
Before/After jQuery Plugin chỉ có 7kb và bạn có thể dử dụng nhiều lần trên một trang ( chỉ cần khai báo ID ko trùng lặp )
