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. ssh功能模块——paramiko

    参考官网文档:http://docs.paramiko.org/

  2. BAT小米奇虎美团迅雷携程等等各大企业校招，笔试面试题。

    类似在线测试的方式展示题目. 历年在线笔试试卷: 百度 http://www.nowcoder.com/paper/search?query=%E7%99%BE%E5%BA%A6  腾讯http:// ...

  3. linux上运行jmeter-server失败

    1. 在linux上运行jmeter-server报如下错误 处理办法: 通过如下命令运行 ./jmeter-server -Djava.rmi.server.hostname=192.168.16. ...

  4. 38、EST序列拼接流程

    转载:http://fhqdddddd.blog.163.com/blog/static/18699154201241014835362/ http://blog.sina.com.cn/s/blog ...

  5. 10、RNA-seq for DE analysis training（Mapping to assign reads to genes）

    1.Goal of mapping 1)We want to assign reads to genes they were derived from 2)The result of the mapp ...

  6. 【C#】VS2017 winform 打包

    首先要在想要打包的项目下创建一个新的项目, 创建好setup项目,之后点击属性,去修改打包软件的名字,ProductName....可以选填 到此已经创建好了setup工程了,那么下面开始将要打包的d ...

  7. DES加密解决算法

    /// <summary> /// DES加密算法 /// sKey为8位或16位 /// </summary> /// <param name="pToEnc ...

  8. C#对Execl操作类

    1.NuGet下安装 NPOI 2.实例代码:(可以根据具体情况注释和添加代码逻辑) public class ExeclHelper { /// <summary> /// 将excel ...

  9. React 从入门到进阶之路（四）

    之前的文章我们介绍了  React 绑定属性( 绑定class  绑定style).引入图片  循环数组渲染数据.接下来我们将介绍 React 事件,方法, React定义方法的几种方式 获取数据 改 ...

  10. PAT L3-010【完全二叉树】

    静态建树判一下1-n是不是为空就好了,如果有空的  就说明不是complete binary tree (和线段树建树差不多啊)Left=2*root:Right=2*root+1 #include ...