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

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>&nbsp;&nbsp;图片组展示&nbsp;&nbsp;</h1>

		        <div id="galleria">

		        		<!-- 给图片加入a标签可以处理js事件 -->

		            	<a href="javascript:alert('image1');">

		            		<!-- title属性中可以设置图片说明 -->

		                	<img title="图1" alt="" src="data:images/1.jpg" />

		            	</a>

		            	<a href="javascript:alert('image2');">

		                	<img title="图2" alt="" src="data:images/2.jpg" />

		            	</a>

		            	<a href="javascript:alert('image3');">

		                	<img title="图3" alt="" src="data:images/3.jpg" />

		            	</a>

		            	<a href="javascript:alert('image4');">

		                	<img title="图4" alt="" src="data:images/4.jpg" />

		            	</a>

		        </div>

		        <!-- 设置底部文字 -->

		        <p class="cred"></p>

		    </div>

		</div>

</body>

</html>

jQuery图片组展示插件----Galleria使用简介的更多相关文章

  1. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  2. 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示

    在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...

  3. 八款强大的jQuery图片滑块动画插件

    jQuery是一款相当轻巧的JavaScript框架,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是 一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多 ...

  4. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  5. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  6. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  8. jQuery手风琴广告展示插件

    效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...

  9. jQuery图片自动添加水印插件

    JS脚本(jQuery)为图片加水印效果预览:http://hovertree.com/texiao/jquery/94/ 本功能使用HTML5实现,可为图片加上文字水印,可设置文字,设置颜色,位置等 ...

随机推荐

  1. Java探索之旅(11)——抽象类与接口

    1.Java数据类型       ❶不可变类,是指当创建了这个类的实例后,就不允许修改它的属性值. 它包括:         Primitive变量:boolean,byte, char, doubl ...

  2. github的简单操作

    之前初学过一点git版本控制工具,利用github做仓库,照着github上的文档练习的了一下.不过那只篇只是照虎画猫(我的水平只能照着老虎画个猫模样,嘻嘻!). 最近在学hibernate,公司与家 ...

  3. PyQt中从RAM新建QIcon对象 / Create a QIcon from binary data

    一般,QIcon是通过png或ico等图标文件来初始化的,但是如果图标资源已经在内存里了,或者一个zip压缩文件内,可以通过QPixmap作为桥梁,转换为图标. zf = zipfile.ZipFil ...

  4. 7.21实习培训日志-JDBC JSP Servlet

    JDBC JSP Servlet 总结 今天早上的考试主要考Java的网络,HttpClient的get,post方法,Socket的文件传输和Xml和Json文件的解析,对于HttpCLient很简 ...

  5. Yum本地源制作

    参考文档 环境准备 # cat /etc/os-release NAME="CentOS Linux" VERSION="7 (Core)" ID=" ...

  6. neutron负载均衡高可用测试

    对工作中,实验环境的一个小总结 1.创建高可用负载均衡器------创建高可用的时候,添加上ha-mode参数即可 neutron lb-pool-create --lb-method ROUND_R ...

  7. 微信JSApi支付---常见问题

    1.支付一直报  “get_brand_wcpay_request:false” 错误 原因: 商户平台上设置的[支付授权目录]路劲不正确,比如:支付的页面的域名是:www.xxx.com/pay/s ...

  8. bzoj1934: [Shoi2007]Vote 善意的投票（最小割）

    传送门 考虑源点为同意,汇点为反对,那么只要源点向同意的连边,不同意的向汇点连边,求个最小割就是答案 然后考虑朋友之间怎么办,我们令朋友之间连双向边.这样不管怎么割都能对应一种选择情况.那么还是求一个 ...

  9. 阿里、腾讯热门面试题：聊聊Unix与Java的IO模型？（含详细解析）

    众所周知 如果去百度.腾讯等一线大厂面试,一定会深入考候选人的基础技术功底,其中尤为关键和重视的就是IO相关的技术和知识. 而要搞明白IO相关的概念,首先就得弄清楚同步与异步,阻塞与非阻塞到底是什么意 ...

  10. linux的防火墙端口配置

    健忘啊,记下来吧 Red Hat Linux系统 此类型系统包括red hat的各类衍生及相关不版本,包括RHEL.CentOS.Fedora等等. 防火墙配置文件: /etc/sysconfig/i ...