[jQuery plugin] fotorama圖片展示

建立時間: 2016-09-30 15:13:38
更新時間: 2016-09-30 15:13:38

Fotorama

Fotorama是一個使用簡單但是功能很強的jQuery圖片展示套件

首先先到官網下載

 

Usage

下載後在網頁載入

除了Fotorama本身的js及css外

也要載入jQuery

 <link rel="stylesheet" href="path-to-fotorama/fotorama.css">
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <script src="path-to-fotorama/fotorama.js"></script>

 

Example

最簡單的範例

只要加上一個class為fotorama的div

裡面放的img就可以展示

 <div class="fotorama">
 	<img src="url">
 	<img src="url">
 	<img src="url">
 </div>

 

導覽列的縮圖

如果想在下方導覽列使用縮圖

只要在.fotorama加上下列屬性

就能使用

 <div class="fotorama" data-nav="thumbs">
 	<img src="url">
 	<img src="url">
 	<img src="url">
 </div>

 

使用鍵盤左右鍵切換圖片

這也很簡單

一樣在.fotorama加上一些屬性即可

 <div class="fotorama" data-nav="thumbs" data-keyboard="true">
 	<img src="url">
 	<img src="url">
 	<img src="url">
 </div>

 

其他功能

fotorama還有很多很強的功能

像是使用影片, 使用HTML, 全螢幕等等

更多內容可以參考官方文件