一款效果非常不錯的jquery外掛程式 -Lightbox

標籤：style   blog   http   color   os   io   ar   for   2014   

今天為大家介紹一款非常不錯的jquery圖片查看外掛程式-Lightbox。這款圖片查看外掛程式體驗很好，不僅有左右兩個小箭頭可以瀏覽上一張和下一張圖片，還支援滑鼠的左右鍵瀏覽上一張和下一張圖片。有點類似google圖片的查看器。一起看下：

 

線上預覽   源碼下載

 

我們一起看下實現代碼：

html代碼：

<div id="wrapper">        <h1>            Responsive Lightbox Portfolio</h1>        <ul id="portfolio" class="clearfix">            <li><a href="img/[email protected]" title="Brick and Bay Windows">                <img src="img/item01.jpg" alt="brick and by windows"></a></li>            <li><a href="img/[email protected]" title="Simple iPad Icons">                <img src="img/item02.jpg" alt="old-style ipad icons"></a></li>            <li><a href="img/[email protected]" title="Mobile Profile">                <img src="img/item03.jpg" alt="mobile iphone app profile ui"></a></li>            <li><a href="img/[email protected]" title="New Shoes">                <img src="img/item04.jpg" alt="new balance shoes"></a></li>            <li><a href="img/[email protected]" title="Rive Radio Icon">                <img src="img/item05.jpg" alt="rive radio icon"></a></li>            <li><a href="img/[email protected]" title="Blood Pressure app">                <img src="img/item06.jpg" alt="blood pressure app ui"></a></li>            <li><a href="img/[email protected]" title="Memories Feed UI">                <img src="img/item07.jpg" alt="memories feed ui iphone"></a></li>            <li><a href="img/[email protected]" title="Vector Devices">                <img src="img/item08.jpg" alt="apple device vector icons"></a></li>        </ul>    </div>

View Code

js代碼：

 $(function () {            $(‘#portfolio‘).magnificPopup({                delegate: ‘a‘,                type: ‘image‘,                image: {                    cursor: null,                    titleSrc: ‘title‘                },                gallery: {                    enabled: true,                    preload: [0, 1], // Will preload 0 - before current, and 1 after the current image                    navigateByImgClick: true                }            });        });

View Code

註：本文愛編程原創文章，轉載請註明原文地址：http://www.w2bc.com/Article/5720

一款效果非常不錯的jquery外掛程式 -Lightbox