2014年12月12日 星期五

jQuery 視窗預覽 Lightbox

lightbox

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

外掛網址: jQuery Lightbox

  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 都不用寫。

  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>  



反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...