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. Mybaits整合Spring自动扫描 接口，Mybaits配置文件.xml文件和Dao实体类

    1.转自:https://blog.csdn.net/u013802160/article/details/51815077 <?xml version="1.0" enco ...

  2. [51nod1384]全排列

    法一:next_permutation函数,两个参数分别为起始指针和末尾指针. #include<bits/stdc++.h> using namespace std; typedef l ...

  3. 利用包管理器安装Node.JS

    步骤1:用curl获取源代码在我们用卷曲获取源代码之前,我们必须先升级操作系统,然后用卷发命令获取NodeSource添加到本地仓库. root@ubuntu-15:~#apt-get update安 ...

  4. 关于android上dpi/screen-size的厘清解释

    android定义了四种screen-size: small normal large xlarge 同时定义了六种dpi级别: ldpi (low) ~120dpimdpi (medium) ~16 ...

  5. Git for Windows，TortoiseGit支持WinXP的最后版本及下载方法

    TortoiseGit兼容Windows XP和Windows Server 2003的最后版本: TortoiseGit 1.8.16.0 (https://download.tortoisegit ...

  6. Linus与陈庆

    Linus 1969年末,李纳斯出生于芬兰的赫尔辛基市,算是赶上了60后的尾巴.小时候他是个其貌不扬的孩子,除了一个鼻子长的「富丽堂皇」之外乏善可陈.他为了让鼻子看上去小一些,经常戴上眼镜就不愿意摘下 ...

  7. 2010辽宁省赛E（Bellman_Ford最短路，状态压缩DP【三进制】）

    #include<bits/stdc++.h>using namespace std;const int inf=0x3f3f3f3f;struct node{    int v,z,d, ...

  8. PAT1060【大模拟啊】

    怎么麻烦怎么来了??? 提供几个案例: 5 0.00001 0.00001 0 0.0 0.0222 1 0.001 0.2000 2 005.06 0.230 1 00.020 0 贴份代码跑.. ...

  9. elasticsearch 基本介绍

    1. Elasticsearch的适用场景: (1)类似百度百科的全文检索,高亮,搜索推荐(2)新闻类的搜索,用户行为日志(点击,浏览,收藏,评论)+社交网络数据(对某某新闻的相关看法),数据分析,给 ...

  10. Jmeter-返回值乱码处理

    Jmeter安装目录/bin/jmeter.properties中sampleresult.default.encoding默认为ISO-8859-1,将参数修改为 sampleresult.defa ...