jQuery帶炫酷輪播圖效果的Lightbox彈出層外掛

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

線上預覽 下載

這是一款jQuery帶炫酷輪播圖效果的Lightbox彈出層外掛。該lightbox外掛在彈出層中，可以對所有圖片進行輪播。它的特點還有：

  • 簡單、速度快。
  • 響應式設計。
  • 可以顯示每張圖片的狀態。
  • 在彈出層中可以設定圖片的標題和文字。
  • 支援CSS3動畫。

使用方法

在頁面中引入jquery.min.js、jquery.popup.lightbox.js相關檔案，以及fontawsome和popup-lightbox.css檔案。

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

該Lightbox彈出層的HTML結構如下。

< div class="img-container">
  < img src="images/jquery-lightbox-image2.jpg" alt="lightbox image 2" />
  < img src="images/jquery-lightbox-image3.jpg" alt="lightbox image 3"/>
  < img src="images/jquery-lightbox-image1.jpg" alt="Effel Tower"/>
  < img src="images/jquery-lightbox-image4.jpg" alt="lightbox image 4" />
初始化外掛

在頁面DOM元素載入完畢之後，透過下面的方法來初始化該Lightbox彈出層外掛。

$(document).ready( function (){

  $( ".img-container" ).popupLightbox();

});

相關文章