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> ? ?