適合Bootstrap的燈箱插件:simplegallery">適合Bootstrap的燈箱插件:simplegallery

分類:IT技術 時間:2017-09-28

Simple Gallery是一款jQuery燈箱插件,同時這款插件采用 Bootstrap 框架的代碼結構,讓相冊實現自適應的效果。

插件名稱:simplegallery

插件演示: https://bhaskarmac.github.io/simplegallery/

下載地址: https://github.com/bhaskarmac/simplegallery

使用教程

STEP1:下載文件後,把「myscript.js」和「imageData.json」放在同一目錄,並引用到「myscript.js」到 HTML 頭部。

<head>
...
<script src=http://www.tuicool.com/articles/"js/myscript.js" type="text/javascript">

STEP2:修改imageData.json文件,用於展示圖像路徑和順序,如下圖:

STEP3:在BODY區域添加以下HTML元素:

<div class="overlay">
<div class="content">
<a href=http://www.tuicool.com/articles/"#" class="closebtn">?/a>
?
?

建議下載原代碼的DEMO來參考修改,都很簡單的哦。

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com

交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。


Tags: 插件 simplegallery 燈箱 quot Bootstrap myscript

文章來源:


ads
ads

相關文章
ads

相關文章

ad