jQuery 視窗預覽 Lightbox

在網頁非常常用到的效果，很簡單就可以做出彈出視窗的預覽效果，也可以在彈出視窗裡切換上下的圖片。

外掛網址: jQuery Lightbox

view plaincopy to clipboardprint

1. <script src="js/jquery-1.11.0.min.js"></script>  
2. <script src="js/lightbox.min.js"></script>  
3. <link href="css/lightbox.css" rel="stylesheet" />  

直接引入。


然後在 html 裡放上 attr 就好了，連 code 都不用寫。

view plaincopy to clipboardprint

1. <a href="img/image-2.jpg" data-lightbox="roadtrip">Image #2</a>  
2. <a href="img/image-3.jpg" data-lightbox="roadtrip">Image #3</a>  
3. <a href="img/image-4.jpg" data-lightbox="roadtrip">Image #4</a>