jQuery图片组展示插件Galleria使用简介
1、技术目标
掌握Galleria插件的基本操作
2、Galleria简介
Galleria是一个jQuery插件,可用于展示多张图片,操作也比较简单,
展示效果也非常不错,如图:
提示:Galleria官网URL
http://galleria.aino.se/
3、设置Demo目录结构并导入Galleria插件
3.1)创建测试文件夹Galleria
3.2)在Galleria下创建文件夹images,放需要展示的图片:
1.jpg
2.jpg
3.jpg
4.jpg
3.3)在Galleria下创建文件夹js,js下放2个js文件:
jquery.js(版本v1.4.2)
galleria-1.2.4.min.js
3.4)在Galleria下放4个必须的Galleria插件所需文件
classic-loader.gif
classic-map.png
galleria.classic.css(该css中会用到以上两张图片)
galleria.classic.min.js
注意:以上文件本文已提供完整Demo下载
4、在Galleria下创建galleryDemo.html页面,使用Galleria插件
注意:3.4中提到的文件需要和使用插件的页面(galleryDemo.html)放到同一文件夹下,如要变换文件位置需要修改css等代码
galleryDemo.html页面代码如下(关键部分已加入注释):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Galleria Demo</title> <script type="text/javascript" charset="UTF-8" src="js/jquery.js"></script> <script type="text/javascript" src="js/galleria-1.2.4.min.js"></script> <style type="text/css"> /* 图片组样式(Galleria插件默认配置) */ #contentImgs{background:#222;margin:0;} #contentImgs{border-top:4px solid #000;} .contentImgsClass{color:#777;font:12px/1.4 "helvetica neue",arial,sans-serif;width:620px;margin:20px auto;} #contentImgs h1{font-size:12px;font-weight:normal;color:#ddd;margin:0;} #contentImgs p{margin:0 0 2px} #contentImgs a {color:#22BCB9;text-decoration:none;} #contentImgs .cred{margin-top:2px;font-size:11px;} /* 展示的图片高度(This rule is read by Galleria to define the gallery height) */ #galleria{height:320px;} </style> <script type="text/javascript"> $().ready(function(){ if($('#galleria')){ //加载Galleria插件 Galleria.loadTheme('galleria.classic.min.js'); $('#galleria').galleria(); } }); </script> </head> <body> <!-- 图片展示所在DIV --> <div id="contentImgs" class="contentImgsClass"> <!-- 设置标题文字 --> <h1> 图片组展示 </h1> <div id="galleria"> <!-- 给图片加入a标签可以处理js事件 --> <a href="javascript:alert('image1');"> <!-- title属性中可以设置图片说明 --> <img title="图1" alt="" src="images/1.jpg" /> </a> <a href="javascript:alert('image2');"> <img title="图2" alt="" src="images/2.jpg" /> </a> <a href="javascript:alert('image3');"> <img title="图3" alt="" src="images/3.jpg" /> </a> <a href="javascript:alert('image4');"> <img title="图4" alt="" src="images/4.jpg" /> </a> </div> <!-- 设置底部文字 --> <p class="cred"></p> </div> </div> </body> </html>
相关推荐
Galleria是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件,因此可以...
支持点击图片放大,全屏查看功能,且效果超炫,如同看播放器视频一样,适合做图片展示功能。附上js文件,注意demo页面在\galleria-1.2.6\galleria\themes\classic目录下,你也可以在以下地址查看最新更新: ...
一款来自国外的图片展示插件Galleria代码 支持缩略图,支持左右两侧控制图片切换,示例中加载的是远程图片,速度有些慢。像国外著名的相册网站Flickr就使用有本款插件的效果,用来展示图片相当有美感,实用性很强。
jquery图片显示--aino-galleria-a09cdb0,各种精美图片展示,压缩包.
绚丽的jquery相册插件 [removed][removed] [removed][removed] [removed] Galleria.loadTheme('galleria.classic.js'); $('#galleria').galleria({}); [removed]
NULL 博文链接:https://langhua9527.iteye.com/blog/549632
用于开发html图片轮播功能,支持滑动切换,适配手机屏幕
Galleria jquery画廊插件 上面图片,下面是缩略图,效果还不错
galleria插件,用于照片浏览。官网地址,https://galleria.io/,里面可以下载也包含api文档。
galleria jqueryImagePlugin classic and 12 theme
galleria-facebook, 在你的Galleria网站上,显示Facebook照片 galleria在你的网站上使用Galleria将Facebook照片显示在响应式布局中。原始博客文章在 aiaio 。 Galleria美国的是一款流行。开源的反应性照片库,它最好...
这些jQuery插件包括演示、文档说明等,欣赏吧!1. Galleriffic 下载与文档 查看演示 2. jPhotoGrid 下载与文档 查看演示 3. Galleria 下载与文档 查看演示 4. YoxView 下载与文档 查看演示 5. Micro Image Gallery ...
这允许基于galleria.io的可用功能使用对象构建图片库要求蛋糕PHP 2+ PHP 5.3+ 蛋糕工具包( ) Jquery ( )安装要使用插件,只需将其包含在应用程序的“app/Plugin”目录中,然后将其加载到“app/Config/bootstrap....
环球免税店响应式JavaScript图像库这是Galleria核心,主题,插件和其他所有内容的开源资源库。 随时发布问题-但请保持它们与代码相关。 您也可以执行拉取请求,但请确保其中包含一些注释和/或测试。 信息,演示,...
galleria-1.2.6画廊实例源码
Galleria是建立在jQuery库之上JavaScript图片库框架。 目的是简化为Web和移动设备创建专业图像库的过程。 如何安装 该插件可以与其他任何Plone插件一样安装。 请遵循官方。 有一个主意吗? 发现了错误? 让我们...
wordpress主题画廊主题:Galleria本资源系百度网盘分享地址
GALLERIA·凤凰新天地商业介绍.pdf
10个幻灯片 3图小大小切换 AnimatedPortfolioGallery AnythingSlider galleria等