Labels

Hướng dẫn tích hợp tiện ích xem ảnh SmartPhoto


Trong loạt bài giới thiệu các trình xem ảnh cho blog, tôi đã giới thiệu 2 plugin lightGallery và fancybox, tiếp tục chủ đề đó hôm nay sẽ là plugin xem ảnh SmartPhoto đến từ đất nước Nhật Bản thân yêu

Xem demo (click vào ảnh)

 DEMO

Bạn có thể thấy plugin nảy rất giống lightbox mặc định của blog, vì thế ta có thể tắt widget js mặc định (điều kiện cần để lightbox mặc định hoạt động) và thay vào đó là plugin này để giảm được 1 chút tài nguyên tải xuống khi load trang


JS của plugin này có 2 dạng: toàn javascript và toàn jquery. Như vậy ta sẽ có 2 cách tích hợp khác nhau

I. Tích hợp


1. Toàn javascript


Thêm các thành phần sau vào trước thẻ đóng </body>

<link rel="stylesheet" href="./css/smartphoto.min.css">
<script src="./js/smartphoto.js"></script>
<script>
    document.addEventListener('DOMContentLoaded',function(){
      new SmartPhoto(".js-smartphoto");
    });
</script>

Các file css, js bạn có thể tải về tại đây và upload lên hosting của mình. Hoặc có thể dùng luôn github của tác giả như sau

<link rel="stylesheet" href="https://cdn.rawgit.com/appleple/SmartPhoto/master/css/smartphoto.min.css">
<script src="https://cdn.rawgit.com/appleple/SmartPhoto/master/js/smartphoto.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded',function(){
      new SmartPhoto(".js-smartphoto");
    });
</script>

2. Toàn jquery


Thêm các thành phần sau vào trước thẻ đóng </body>

<link rel="stylesheet" href="./css/smartphoto.min.css">
<script src="./js/jquery-smartphoto.js"></script>
<script>//<![CDATA[
$(function(){
    $(".js-smartphoto").SmartPhoto();
});
//]]></script>

Các file css, js bạn có thể tải về tại đây và upload lên hosting của mình. Hoặc có thể dùng luôn github của tác giả như sau

<link rel="stylesheet" href="https://cdn.rawgit.com/appleple/SmartPhoto/master/css/smartphoto.min.css">
<script src="https://cdn.rawgit.com/appleple/SmartPhoto/master/js/jquery-smartphoto.min.js"></script>
<script>//<![CDATA[
$(function(){
    $(".js-smartphoto").SmartPhoto();
});
//]]></script>

3. Option


Bảng option

variable description default
arrows prev/next arrows true
nav navigation images at the bottom true
useOrientationApi use accelerometer to move images true
resizeStyle resize images to fill/fit on the screen 'fill'
animationSpeed animation speed when switching images 300
forceInterval frequency to apply force to images 10

Ví dụ

<script>//<![CDATA[
document.addEventListener('DOMContentLoaded',function(){
    new SmartPhoto(".js-smartphoto",{
        arrows: false,
        nav: false
    });
});
//]]></script>

II. Sử dụng


Form code khi viết bài

<a href="./assets/large-bear.jpg" class="js-smartphoto" data-caption="bear" data-id="bear" data-group="0">
  <img src="./assets/bear.jpg" width="360"/>
</a>
<a href="./assets/large-camel.jpg" class="js-smartphoto" data-caption="camel" data-id="camel" data-group="0">
  <img src="./assets/camel.jpg" width="360"/>
</a>
<a href="./assets/large-rhinoceros.jpg" class="js-smartphoto" data-caption="rhinoceros" data-id="sai" data-group="0">
  <img src="./assets/rhinoceros.jpg" width="360"/>
</a>

Trong đó:

+ class="js-smartphoto": bắt buộc để bật lightbox
+ data-caption: caption cho ảnh (không bắt buộc)
+ data-id: id cho ảnh (không bắt buộc)
+ data-group: tạo một bộ sưu tập, các ảnh có cùng data-group sẽ hiển thị cùng trong 1 list

Tuy nhiên viết thủ công theo form này rất bất tiện, tôi sẽ dùng jquery hoặc javascript để config cho nhanh, chỉ cần upload ảnh qua giao diện viết bài của blogger thì plugin tự kích hoạt, viết lại code cho trường hợp tích hợp toàn jquery như sau

<link rel="stylesheet" href="https://cdn.rawgit.com/appleple/SmartPhoto/master/css/smartphoto.min.css">
<script src="https://cdn.rawgit.com/appleple/SmartPhoto/master/js/jquery-smartphoto.min.js"></script>
<script>//<![CDATA[
$(function() {
    $(".post-body a:has(img)").each(function() {
        var t = $(this).attr("href");
        $(this).attr("data-caption", t.substring(t.lastIndexOf("/") + 1, t.lastIndexOf(".")))
    }), $(".post-body a:has(img)").addClass("js-smartphoto").attr("data-group", "post-img").SmartPhoto()
});
//]]></script>

Trường hợp tích hợp toàn javascript bạn tự viết nhé

Như vậy cách tích hợp và sử dụng không quá phức tạp, qua bài viết này ta lại có thêm 1 plugin xem ảnh gọn nhẹ, chuyên nghiệp, tương thích với mọi thiết bị

Chúc thành công !