HTML 5的超酷圖片畫廊設計
圖片畫廊是web或者網站開發中經常會用到的組件,非常適合作為圖片展示,個人作品展示和相冊使用。今天我們將介紹一個非常棒的基于HTML5的圖片畫廊 - Juicebox Lite,希望大家喜歡。
Juicebox Lite是基于HTML5的免費個人畫廊,可以幫助開發人員創建超酷的圖片畫廊,
主要特性
支持windows,Mac和Linux支持IE6+,FF3.6+,chrome,Safari和Opera支持移動手機/平板電腦針對不同的設備自適應漂亮的responsive界面支持HTML5標準提供JuiceboxBuilder程序,可以方便的處理圖片2個版本,lite和pro版。
如何使用
導入類庫如下:
- <script src="jbcore/juicebox.js"></script>
- <script>
- new juicebox({
- containerId : 'juicebox-container'
- });
- </script>
使用xml文件配置圖片文件:
- <juiceboxgallery
- galleryTitle="Juicebox Lite Gallery"
- >
- <image imageURL="images/wide.jpeg"
- thumbURL="thumbs/wide.jpeg"
- linkURL="images/wide.jpeg"
- linkTarget="_blank">
- <title>Welcome to Juicebox!</title>
- </image>
- <image imageURL="images/tall.jpeg"
- thumbURL="thumbs/tall.jpeg"
- linkURL="images/tall.jpeg"
- linkTarget="_blank">
- <caption><![CDATA[<u><a href="http://www.juicebox.net" target="_blank">Juicebox</a></u> is a free, customizable image gallery. Use it to display your images on any web page in a professional, intuitive and simple way.]]></caption>
- </image>
- </juiceboxgallery>
原文鏈接:http://www.phpfuns.com/html5/html5-picture-gallery.shtml