功能齊全的jquery圖片檢視器外掛

东绕城發表於2024-11-25
jQuery

lightgallery.js是一款功能齊全的jquery圖片檢視器外掛。該jquery圖片檢視器外掛採用響應式設計，提供圖片檢視，圖片輪播，圖片放大等功能。它的特點還有：

演示 下載

  • 以模態視窗的形式全屏展示圖片。
  • 顯示圖片的標題。
  • 可以實現圖片的懶載入。
  • 可以自動播放圖片，並提供進度條顯示。
  • 可以透過滑鼠拖拽，點選切換按鈕，移動裝置滑動等方式來切換圖片輪播。
  • 在底部顯示圖片的縮圖。
  • 支援圖片的平移和縮放。
  • 提供下載按鈕來下載圖片。

使用方法

在頁面中引入jquery和lightgallery-all.min.js檔案以及樣式檔案lightgallery.css。

< link href="css/lightgallery.css" rel="stylesheet">
< script src="js/jquery.min.js">
< script src="js/lightgallery-all.js">
HTML結構

實現在頁面中建立一個圖片畫廊，示例demo中以無序列表的方式來建立。透過data-src屬性來指定高畫質大圖的地址。你還可以在data-responsive屬性中指定多個圖片地址，分別用於適配不同裝置的螢幕。data-sub-html屬性用於指定圖片的標題。

< ul id="lightgallery" class="list-unstyled row">
  < li data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="img/1-1600.jpg" data-sub-html="

Fading Light< p >圖片標題1"> < a href=""> < img class="img-responsive" src="img/thumb-1.jpg"> < li data-responsive="img/2-375.jpg 375, img/2-480.jpg 480, img/2.jpg 800" data-src="img/2-1600.jpg" data-sub-html="

Bowness Bay< p >圖片標題2"> < a href=""> < img class="img-responsive" src="img/thumb-2.jpg"> < li data-responsive="img/13-375.jpg 375, img/13-480.jpg 480, img/13.jpg 800" data-src="img/13-1600.jpg" data-sub-html="

Bowness Bay< p >圖片標題3"> < a href=""> < img class="img-responsive" src="img/thumb-13.jpg"> < li data-responsive="img/4-375.jpg 375, img/4-480.jpg 480, img/4.jpg 800" data-src="img/4-1600.jpg" data-sub-html="

Bowness Bay< p >圖片標題4"> < a href=""> < img class="img-responsive" src="img/thumb-4.jpg">

初始化外掛

在頁面DOM元素載入完畢之後，透過lightGallery方法來初始化該jquery圖片檢視器外掛。

$(document).ready( function (){
  $( '#lightgallery' ).lightGallery();
});

配置引數

該jquery圖片檢視器外掛的可用配置引數如下：

$( '#lightgallery' ).lightGallery({
  mode:  "lg-slide" ,
  cssEasing:  "ease" ,
  easing:  "linear" ,
  speed: 600,
  height:  "100%" ,
  width:  "100%" ,
  addClass:  "" ,
  startClass:  "lg-start-zoom" ,
  backdropDuration: 150,
  hideBarsDelay: 6000,
  useLeft:  false ,
  closable:  true ,
  loop:  true ,
  escKey:  true ,
  keyPress:  true ,
  controls:  true ,
  slideEndAnimatoin:  true ,
  hideControlOnEnd:  false ,
  mousewheel:  true ,
  getCaptionFromTitleOrAlt:  true ,
  appendSubHtmlTo:  ".lg-sub-html" ,
  subHtmlSelectorRelative:  false ,
  preload: 1,
  showAfterLoad:  true ,
  selector:  "" ,
  selectWithin:  "" ,
  nextHtml:  "" ,
  prevHtml:  "" ,
  index:  false ,
  iframeMaxWidth:  "100%" ,
  download:  true ,
  counter:  true ,
  appendCounterTo:  ".lg-toolbar" ,
  swipeThreshold: 50,
  enableSwipe:  true ,
  enableDrag:  true ,
  dynamic:  false ,
  dynamicEl: [],
  galleryId: 1
});

相關文章