畫廊插件baguetteBox

HTML

<link rel="stylesheet" href="css/baguetteBox.css">
<div class='baguetteBox1'>
     <a href='/test1.jpg'>  <!-- 路徑為原圖 -->
        <img src='/test1_s.jpg'>  <!-- 顯示為縮略圖 -->
     </a>
     <a href='/test3.jpg'>  <!-- 路徑為原圖 -->
        <img src='/test3_s.jpg'>  <!-- 顯示為縮略圖 -->
     </a>
</div>
<div class='baguetteBox2'>
     <a href='/test2.jpg'>  <!-- 路徑為原圖 -->
        <img src='/test2_s.jpg'>  <!-- 顯示為縮略圖 -->
     </a>
</div>
<script src="baguetteBox.js"></script>
      

　　

JS

//執行點選圖檔彈窗
if(typeof oldIE === 'undefined' && Object.keys)
  hljs.initHighlighting();
baguetteBox.run('.baguetteBox1');    //不要對同一個baguetteBox執行多次run
baguetteBox.run('.baguetteBox2');
      

效果：

baguetteBox下載下傳 

示例代碼下載下傳

消息：新部落格位址 blog.leapmie.com，以後的更新都會在新部落格首發，感謝支援~（園子視情況更新）