HTML 5的超酷图片画廊设计

开发 前端
支持windows,Mac和Linux支持IE6+,FF3.6+,chrome,Safari和Opera支持移动手机/平板电脑针对不同的设备自适应漂亮的responsive界面支持HTML5标准提供JuiceboxBuilder程序,可以方便的处理图片2个版本,lite和pro版。

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

Juicebox Lite是基于HTML5的免费个人画廊,可以帮助开发人员创建超酷的图片画廊,

主要特性

支持windows,Mac和Linux支持IE6+,FF3.6+,chrome,Safari和Opera支持移动手机/平板电脑针对不同的设备自适应漂亮的responsive界面支持HTML5标准提供JuiceboxBuilder程序,可以方便的处理图片2个版本,lite和pro版。

基于HTML5的超酷图片画廊 -Juicebox Lite

在线演示 本地下载

如何使用

导入类库如下:

  1. <script src="jbcore/juicebox.js"></script>  
  2. <script>  
  3.     new juicebox({  
  4.         containerId : 'juicebox-container' 
  5.     });  
  6. </script> 

使用xml文件配置图片文件:

  1. <juiceboxgallery  
  2.     galleryTitle="Juicebox Lite Gallery" 
  3. >  
  4.   <image imageURL="images/wide.jpeg" 
  5.     thumbURL="thumbs/wide.jpeg" 
  6.     linkURL="images/wide.jpeg" 
  7.     linkTarget="_blank">  
  8.     <title>Welcome to Juicebox!</title>  
  9.   </image>  
  10.   <image imageURL="images/tall.jpeg" 
  11.     thumbURL="thumbs/tall.jpeg" 
  12.     linkURL="images/tall.jpeg" 
  13.     linkTarget="_blank">  
  14.     <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>  
  15.   </image>  
  16. </juiceboxgallery> 

原文链接:http://www.phpfuns.com/html5/html5-picture-gallery.shtml

责任编辑:张伟 来源: phpFuns
相关推荐

2011-05-12 16:01:51

HTML5

2014-04-17 09:54:47

HTML5JavaScript

2011-03-02 13:15:26

HTML 5jQuery

2012-05-17 13:17:26

HTML5

2012-04-10 10:31:07

2011-04-18 17:17:45

CSSweb开发

2012-06-08 14:32:13

HTML5

2012-03-28 09:49:55

WEB特效

2011-05-10 15:05:04

Webhover

2014-10-21 17:34:11

HTML5移动设计

2015-07-03 09:37:34

HTML5Figure图片字幕特效

2009-05-23 10:46:37

Windows Mob微软移动OS

2011-03-08 10:15:08

HTML 5

2015-08-26 17:22:45

bootstrap下一代特点

2015-08-27 09:37:22

Bootstrap特点

2011-07-14 09:16:10

HTML 5

2013-07-23 14:55:31

设计师HTML5

2011-08-03 11:08:27

HTML 5

2011-04-21 10:24:24

HTML5

2011-11-07 09:56:17

HTML 5
点赞
收藏

51CTO技术栈公众号