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

2023-05-16

日期:2012-5-22  来源:GBin1.com

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

在线演示  本地下载

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

搞定!当然你可以使用它提供的builder工具来处理图片。希望大家喜欢这个画廊!

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


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

基于HTML5的超酷图片画廊 -Juicebox Lite 的相关文章

  • HTML5本地存储

    1 背景 在HTML4 01中 想要在浏览器中存储用户的数据时 我们一般只能用Cookie来实现 不过Cookie有很多限制 大小限制 最大4KB 数量限制 每个站点只允许存储20个Cookie 如果想要存储更多Cookie 则要把旧的Co
  • 基于SSM 和 layui 的增删查改

    开发工具 IDEA 2021 WebStorm 2021 Mysql 8 0 开发环境 JDK 8 TomCat 8 5 81 apache maven 3 6 1 技术点 Spring SpringMVC Mybatis Mysql Ht
  • 开发日志:微信公众号网页开发的调试工具

    在这里记录一下开发时有用到的一些工具 VConcole调试工具 手机端的H5调试工具 http debugx5 qq com
  • 利用原生js实现随机颜色画布

    这几天复习了一下js的DOM 文档对象模型 部分 看到鼠标事件的时候想到可以试着写一个js画布的案例 一 实现思路 1 利用js绑定鼠标按下事件 鼠标放开事件 在通过鼠标移动事件 获取鼠标所在位置 2 通过鼠标移动事件动态创建节点挂载到页面
  • 【HTML】用户名、身份证号、邮箱、验证

    为了使页面不是那么突兀 特地导入了这俩个bootstrap框架相关的包
  • 移动互联网终端的touch事件,touchstart, touchend, touchmove

    前言 如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP 这个页面上肯定是有很多可点击区域的 如果用户触摸到了那些可点击区域怎么办呢 诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏 capacitive
  • vue+element-ui el-tabs切换面板el-tab-pane切换

    在vue项目中 el tabs在页面的右侧显示 切换面板 下面的内容是正常显示的 效果如下 代码如下 父组件
  • 网页引用Font Awesome图标

    方法一 demo html
  • 掘金个人主页头像旋转效果

    img src https sf1 ttcdn tos pstatp com img user avatar d1d3c1b115358ea70f51edcd697b58b2 300x300 image alt 钱端挖掘机师傅的个人资料头像
  • 如何给证件照换一个背景颜色

    我们在考试报名的时候 经常是不同的考试需要不同的登记照尺寸和背景颜色 但是我们基本上不可能每种颜色的证件照都去拍一张吧 那样也太麻烦成本也太高 所以通过前端实现了一个改变证件照背景颜色的方法 他可以将证件照的背景颜色修改为任意的颜色 而不局
  • Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性

    Vue中鼠标悬停更换图片 文字内容 动态展示 修改某些属性 鼠标悬停时 mouseenter 鼠标离开时 mouseleave 利用以上来绑定相应方法 例如 div 分别为鼠标悬停时和离开时绑定方法changeImageSrc 并传递参数
  • Web前端开发概述

    Web World Wide Web 全球广域网 是指一种基于互联网的信息系统 通过超文本链接将全球各地的文档 图像 视频等资源相互关联起来 并通过Web浏览器进行交互浏览和访问 Web的发展使得人们可以方便地获取和共享各种类型的信息 成为
  • css中float用法

    float浮动 指将指定元素悬浮于所在整体之上 即将垂直排列的元素转换为水平同行显示 平时写出的HTML是具有先后顺序的 对于这个顺序我们称之为标准流 而浮动则是脱离标准流的另一个独立标准 下面给出float定义 float left 左浮
  • WEB交互界面易用性设计和验收的指导性原则

    随着企业intranet和国际internet的迅速发展 越来越多的工作流程 商务交易 教育 培训 会议和讲座 以及个人消费娱乐都被转移到所谓的万维网 World Wide Web 以下简称WEB 上来了 与此相对应的是交互操作的复杂性越来
  • 12.HTML5下一代的HTML标准介绍与初识尝试

    关注回复 学习交流群 加入 安全开发运维 答疑交流群 请朋友们 多多点击文中的广告 支持作者更新更多文章 目录 本文为作者原创文章 为尊重作者劳动成果禁止非授权转载 若需转载请在 全栈工程师修炼指南 公众号留言 或者发送邮件到 master
  • 微信小程序:图片高度设置无效问题

    控制台查看元素 显示其style中多了一个没有设置的高度值 找了很久发现是因为image标签设置了mode widthFix 此时高度会自适应 样式中设置高度无效
  • webpack5 配置&使用 文档(大全)

    一 起步 1 基本安装 首先我们创建一个目录 初始化 npm 然后 在本地安装 webpack 接着安装 webpack cli 此工具用于在命令行中运行 webpack mkdir webpack demo cd webpack demo
  • 【HTML】HTML5的拖放你用了吗

    HTML HTML5的拖放你用了吗 引言 github HTML HTML5的拖放你用了吗 内容速递 看了本文您能了解到的知识 在 HTML5 中 拖放是标准的一部分 任何元素都能够拖放 拖放的操作 多用在拖拽排序列表 游戏拼图等 下文中出
  • HTML5的多个video标签:截取视频源的封面图poster,监听视频播放状态的功能;

    在日常项目中 html5的video标签还是比较常用到的 开发过程中 我们都会使用到 通过监听video标签的播放 暂停 停止等等来使用 我们是否也会遇到过 有些浏览器在显示这标签 兼容不太友好 video标签的封面是一层黑色的 ok 那么
  • 三维实时重建BundleFusion

    转自 计算机视觉方向简介 深度相机室内实时稠密三维重建 知乎 室内场景的稠密三维重建目前是一个非常热的研究领域 其目的是使用消费级相机 本文特指深度相机 对室内场景进行扫描 自动生成一个精确完整的三维模型 这里所说的室内可以是一个区域 一个

随机推荐