Việc tạo một album ảnh hay một thư viện hình ảnh cho blogspot là một vấn đề nan giải cho những bạn không rành về code. Trong đó có mình, và sau thời gian mày mò được CSS để sắp xếp hình ảnh như một thư viện ảnh. Đồng thời cũng tìm được thư viện LightgalleryJS để kết hợp tạo ra một thư viện ảnh với chế độ xem đẹp mắt và chuyên nghiệp. Một số tính năng hữu ích được tích hợp sẵn trong thư viện như là nút chia sẻ , xoay, chế độ trình chiếu, xem toàn màn hình, phóng to, thu nhỏ, tải xuống ...
Giới Thiệu Về Thư Viện LightgalleryJS:
LightgalleryJS là một thư viện Javascript giúp các bạn tạo ra hiệu ứng Lightbox cho trang web một cách nhanh chóng và dễ dàng. Thư viện này tích hợp nhiều tính năng hữu ích như là hiển thị được trên nhiều màn hình thiết bị khác nhau, dễ dàng chỉnh sửa, có các hiệu ứng chuyển động cho hình ảnh, nó có plugin giúp người dùng có thể dễ dàng chia sẻ hình ảnh lên các trang mạng xã hội phổ biến, có thể sử dụng cho video...
Vậy hiệu ứng lightbox là gì?
Hiệu ứng Lightbox cho ảnh chính là hiệu ứng mà khi các bạn nhấp vào một tấm ảnh nó sẽ hiển thị ra một cửa sổ popup để hiển thị kích thước thật của ảnh đó từ việc sử dụng một plugin trong jQuery. Thường dùng cho các website có sử dụng nhiều ảnh mà trong bài. Giải thích ngắn gọn hiệu ứng lightbox là một thư viện JavaScript hiển thị hình ảnh và video bằng cách lấp đầy màn hình và làm mờ phần còn lại của trang web.
Tạo trang album ảnh cho Blogspot với thư viện LightgalleryJS
1- Đối với Template đã có sẵn hiệu ứng Lightbox
- Các bạn hoàn toàn có thể không cần đến thư viện LightgalleryJS. Các bạn chỉ việc vào trang quản trị Blogger -> Trang -> Trang mới chuyển sang chế độ HTML. Và sử dụng đoạn code dưới đây để sắp xếp hình ảnh là được.
<h3 style="text-align: center;">Tiêu đề cho
Album ảnh</h3>
<section id="ruby-photogallery">
Thêm ảnh vào đây
</section>
<style>
h3{ text-align:center; text-shadow: 0px 5px 10px #234D3C; }
#ruby-photogallery{line-height:0;-webkit-column-count:4;-webkit-column-gap:0;-moz-column-count:4;-moz-column-gap:0;column-count:4;column-gap:0}
#ruby-photogallery
img{width:97%!important;height:auto!important;padding:2px;margin:2px;box-shadow:
0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px
rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);}
2- Đối với Template không có hoặc có nhưng các bạn không thích hiệu ứng Lightbox mặc định.
Thủ thuật này chỉ áp dụng cho trang các bạn tạo Album ảnh thôi, hiệu ứng Lightbox không hoạt động những trang hoặc bài viết khác nhé. Nếu các bạn muốn tạo hiệu ứng Lightbox cho tất cả các trang và bài viết, các bạn hãy áp dụng trước bài: Hiệu ứng popup lightbox cho ảnh bài viết blogspot với thư viện Fancybox3 hoặc bài: Hiệu ứng popup lightbox cho ảnh bài viết blogspot với thư viện Lightgallery sau đó quay lại đây và sử dụng đoạn code ở trên (đối với Template đã có sắn hiệu ứng Lightbox)
Bước 1: Thêm đường dẫn CSS và Javascript
</head>.</body> và dán đường dẫn CDN Javascript dưới đây vào trước nó.jquery.min.js chưa? Nếu chưa có các bạn thêm nó vào trước thẻ </head> luôn nhé. Sau đó lưu Template lại.Bước 2: Tạo trang album ảnh với thư viện LightgalleryJS
<h3 style="text-align: center;">Tiêu đề cho Album ảnh</h3>
<section id="ruby-photogallery">
<div
id="lightgallery">
<a
href="link-ảnh-của-các bạn-1"><img
src="link-ảnh-của-các bạn-1"
/></a>
<a href="link-ảnh-của-các bạn-2"><img
src="link-ảnh-của-các bạn-2"
/></a>
<a
href="link-ảnh-của-các bạn-3"><img
src="link-ảnh-của-các bạn-3"
/></a>
<a
href="link-ảnh-của-các bạn-4"><img
src="link-ảnh-của-các bạn-4"
/></a>
<a
href="link-ảnh-của-các bạn-5"><img
src="link-ảnh-của-các bạn-5"
/></a>
<a
href="link-ảnh-của-các bạn-6"><img
src="link-ảnh-của-các bạn-6"
/></a>
</div>
</section>
<script type='text/javascript'>
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
<style>
h3{text-shadow: 0px 5px 10px #234D3C;}
#ruby-photogallery{line-height:0;-webkit-column-count:4;-webkit-column-gap:0;-moz-column-count:4;-moz-column-gap:0;column-count:4;column-gap:0}
#ruby-photogallery
img{width:97%!important;height:auto!important;padding:2px;margin:2px;box-shadow:
0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px
rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);}
<h3 style="text-align: center;">Tiêu đề cho Album ảnh 1</h3>
<section id="ruby-photogallery">
<div
id="lightgallery">
<a href="link-ảnh-của-các bạn-1"><img
src="link-ảnh-của-các bạn-1" /></a>
</div>
</section>
<script type='text/javascript'>
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
<br />
<h3 style="text-align: center;">Tiêu đề cho Album ảnh 2</h3>
<section id="ruby-photogallery">
<div
id="lightgallery1">
<a href="link-ảnh-của-các bạn-1"><img
src="link-ảnh-của-các bạn-1" /></a>
</div>
</section>
<script type='text/javascript'>
$(document).ready(function() {
$("#lightgallery1").lightGallery();
});
</script>
<style>
h3{text-shadow: 0px 5px 10px #234D3C;}
#ruby-photogallery{line-height:0;-webkit-column-count:4;-webkit-column-gap:0;-moz-column-count:4;-moz-column-gap:0;column-count:4;column-gap:0}
#ruby-photogallery
img{width:97%!important;height:auto!important;padding:2px;margin:2px;box-shadow:
0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px
rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);}
***Lưu ý: Trường hợp Template đã có hiệu ứng Lightbox, các bạn đừng quên tắt hiệu ứng hộp đèn mặc định của Blogger tại trang quản trị Blogger -> Cài đặt -> Bài Đăng -> Tắt nút "Hộp đèn hình ảnh"
Facebook