HTML 5的超酷图片画廊设计

图片画廊是web或者网站开发中经常会用到的组件，非常适合作为图片展示，个人作品展示和相册使用。今天我们将介绍一个非常棒的基于HTML5的图片画廊 - Juicebox Lite，希望大家喜欢。

成都创新互联主营兰西网站建设的网络公司,主营网站建设方案,App定制开发,兰西h5小程序制作搭建,兰西网站营销推广欢迎兰西等地区企业咨询

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>