HTML & CSS ? 適合Bootstrap的燈箱插件：simplegallery

適合Bootstrap的燈箱插件：simplegallery

發表于: HTML & CSS. 評論
Sponsor

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="js/myscript.js" type="text/javascript">
</head>

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

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

<div class="overlay">
<div class="content">
<a href="#" class="closebtn">&times;</a>
<a class="navigationControls prev">&#10094;</a>
<a class="navigationControls next">&#10095;</a>
<img src="" class="img-responsive bigImage"/>
<div class="imageTitle"></div>
</div>
</div>

<div class="container">
<ul class="row galleryContainer">
</ul>
</div>

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

推薦：查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流：為設計新人提供的設計交流群，請加入UI設計交流群，分享經驗、接單、求職、聊設計。
贊助商鏈接

與 、、 相關的文章

贊助商鏈接
設計達人微信交流社區：shejidaren888
喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。
«
»

{ 發表評論 }