頂部導航開始 -->

lightbox放大預覽圖片功能

網頁上的圖片,為了更好的顯示效果,可能需要圖片彈出放大顯示,本文介紹的方法是采用lightbox插件實現的。

使用lightbox插件需要使用引入兩個文件:lightbox.js和lightbox.css。一個用來控制彈出,另一個用來控制顯示效果。

先看一下顯示效果,如下圖:

自學php博客

上圖中的前臺使用過程是:如果一張圖片需要放大顯示,我們只需要點擊圖片,即可彈出顯示效果。

下面講解具體的使用方法:

首先是引入js和css文件:

自學php博客

<script src="__PUBLIC__/js/lightbox.js"></script>

其次給頁面中需要使用效果的圖片添加參數:

自學php博客

需要使用效果的圖片,我們需要給img添加上a標簽,a標簽必須加上一個參數,data-lightbox,并且要給data-lightbox一個唯一標識符作為名稱。另外a標簽的href參數的值和img的src參數的值,必須相同才可以,都是需要展示的那張圖片的路徑。

如此就配置好了lightbox到項目中,關于lightbox的問題,配置中有什么問題,可以qq咨詢我。

lightbox相關文件下載:

http://pan.baidu.com/s/1i49yhId

密碼:posb


自學php博客
請先登陸后發表評論
  • 最新評論
  • 總共0條評論
  • ? 2014-2016 zixuephp.cn 版權所有
  • ICP證:皖ICP備16012107號
  • 聯系郵箱:[email protected]
  • 交流請加微信:weibobf2899 或掃下方二維碼
双大床红利扑克1手APP