Home
Programming-網頁語法-jQuery

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

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

2月 15, 2020

作者：月

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圖片展示

沒有留言:

訂閱：張貼留言 ( Atom )