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>

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.jsdelivr.net/gh/appleple/SmartPhoto/css/smartphoto.min.css">
<script src="https://cdn.jsdelivr.net/gh/appleple/SmartPhoto/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>

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.jsdelivr.net/gh/appleple/SmartPhoto/css/smartphoto.min.css">
<script src="https://cdn.jsdelivr.net/gh/appleple/SmartPhoto/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.jsdelivr.net/gh/appleple/SmartPhoto/css/smartphoto.min.css">
<script src="https://cdn.jsdelivr.net/gh/appleple/SmartPhoto/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 !