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


Fotorama 是一個富有彈性的 jQuery 網站設計圖片播放套件。它可以在桌面電腦,或者手機瀏覽器上使用。透過這個套件,你可以用不同方法瀏覽相片。☞ Fotorama

Fotorama支援:
■ thumbnails方式瀏覽圖片
■ 上一頁/下一頁
■ 投影片播放
■ 你還可以在圖片上附件標題與說明

參數:☞ 官方文件
■ data-nav="thumbs":在下方導覽列使用縮圖 Demo
■ data-keyboard="true":使用鍵盤左右鍵切換圖片
■ data-autoplay="true":自動播放
■ data-width="100%":自適應圖片(寬度) Demo
■ data-height="100%":自適應圖片(高度)
■ data-allowfullscreen="true":全螢幕 Demo

實作:

<head>

<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Fotorama from CDNJS, 19 KB -->
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

<body>

<!-- Add images to <div class="fotorama"></div> -->
<div class="fotorama">
  <img src="https://s.fotorama.io/1.jpg">
  <img src="https://s.fotorama.io/2.jpg">
</div>

Source

Fotorama
[jQuery plugin] fotorama圖片展示

沒有留言:

技術提供:Blogger.