jQuery Lightbox是一款基于jQuery庫的輕量級插件,可以在網頁上方便地添加燈箱效果。其中一個重要特色就是可以縮放圖片。
$(document).ready(function(){ // 在需要添加lightbox的標簽上添加rel="lightbox"屬性 $('a[rel^="lightbox"]').lightbox({ // 開啟縮放功能 fitToScreen: true }); });
上述代碼是調用jQuery Lightbox插件并開啟縮放功能的示例。具體來說,所有標簽中帶有屬性rel="lightbox"的元素都會被賦予縮放功能。
除此之外,還可以設置以下選項:
$(document).ready(function(){ $('a[rel^="lightbox"]').lightbox({ // 圖片是否可以跨頁縮放 enableKeyNavigation: true, // 是否開啟鍵盤控制 enableKeyboardNav: true, // 按鈕文字的自定義 strings: { close: '關閉', loading: '正在加載...', prev: '上一頁', next: '下一頁', error: '請求的內容無法加載。請重試。' }, // 是否開啟提示信息 showImageNumberLabel: true, // 放置按鈕的符號(請設置為HTML代碼) minMoveMaskSize: 'dd' }); });
其中,各個選項的具體意義可以參考官方文檔。通過設置不同的參數,可以靈活地滿足各種網頁開發需求。