Share Tạo slideshow ảnh toàn màn hình với thư viện Story Show Gallery

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Hiện nay có rất nhiều thư viện JavaScript cũng như plugin jQuery dùng để tạo slideshow ảnh đẹp mắt. Tuy nhiên, để tạo slideshow ảnh toàn màn hình thì rất ít, bài viết này tôi sẽ giới thiệu với các bạn thư viện Story Show Gallery, đây là một plugin của jQuery.

Thư viện Story Show Gallery ngoài việc tạo slideshow ảnh thì nó còn có cơ chế hiển thị toàn màn hình để tạo slideshow vô cùng ấn tượng. Mặc dù thư viện Story Show Gallery không có nhiều hiệu ứng cũng như tuỳ chọn cho việc tạo slideshow ảnh nhưng đổi lại việc sử dụng lại rất đơn giản.

Trước tiên, các bạn cần tích hợp thư viện jQuery và truy cập địa chỉ https://github.com/Roman-Flossler/Simple-Scroll-Gallery để tải thư viện Story Show Gallery. Sau đó, các bạn tích hợp thư viện Story Show Gallery vào website với mã lệnh HTML như sau:
HTML:
<link href="path/to/ssg.css" rel="stylesheet">
<script src="path/to/jquery.min.js"></script>
<script src="path/to/ssg.js"></script>
Các bạn tạo slideshow ảnh như ví dụ sau:
HTML:
<section class="gallery fs">
    <a href="image-1.jpg">
        <img src="thumbnail-1.jpg" alt="Image 1">
    </a>
    <a href="image-2.jpg">
        <img src="thumbnail-2.jpg" alt="Image 2">
    </a>
    <a href="image-3.jpg">
        <img src="thumbnail-3.jpg" alt="Image 3">
    </a>
</section>
Và các bạn cài đặt thư viện Story Show Gallery chỉ với một dòng mã lệnh JavaScript đơn giản như sau:
JavaScript:
SSG.run();
Các bạn có thể tìm hiểu thêm về thư viện Story Show Gallery tại địa chỉ https://github.com/Roman-Flossler/Simple-Scroll-Gallery.
 
Back
Top