HTML 5的超酷圖片畫廊設(shè)計
圖片畫廊是web或者網(wǎng)站開發(fā)中經(jīng)常會用到的組件,非常適合作為圖片展示,個人作品展示和相冊使用。今天我們將介紹一個非常棒的基于HTML5的圖片畫廊 - Juicebox Lite,希望大家喜歡。
Juicebox Lite是基于HTML5的免費(fèi)個人畫廊,可以幫助開發(fā)人員創(chuàng)建超酷的圖片畫廊,
主要特性
支持windows,Mac和Linux支持IE6+,F(xiàn)F3.6+,chrome,Safari和Opera支持移動手機(jī)/平板電腦針對不同的設(shè)備自適應(yīng)漂亮的responsive界面支持HTML5標(biāo)準(zhǔn)提供JuiceboxBuilder程序,可以方便的處理圖片2個版本,lite和pro版。
如何使用
導(dǎo)入類庫如下:
- <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