图片画廊是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