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. <正则吃饺子> ：关于gson使用的一点总结

    一.场景 在群里看到的信息:在使用 gson时候,报了个错 :java.lang.IllegalArgumentException:   declares multiple JSON fields n ...

  2. C语言学习笔记--C语言中的逗号表达式

    逗号表达式:exp1,exp2,epx3,...,expN; (1)逗号表达式是 C 语言中的“粘贴剂” (2)逗号表达式用于将多个子表达式连接为一个表达式 (3)逗号表达式的值为最后一个子表达式的值 ...

  3. 牛叉之nc命令

    nc是一款很不错的网络检测工具,以下是详细使用. 'nc.exe -h'即可看到各参数的使用方法. 基本格式:nc [-options] hostname port [ports] - nc -l - ...

  4. SPOJ - REPEATS Repeats (后缀数组+RMQ)

    题意:求一个串中出现重复子串次数最多的数目. 析:枚举每个长度的子串,至少要重复两次,必然会经过s[l*i]中相邻的两个,然后再分别向前和向后匹配即可. 代码如下: #pragma comment(l ...

  5. 没有定义json_encode()函数。

    php5是没有json扩展的,需要自行下载. 命令php -m 可以查看安装了哪些扩展. 1.修改php.ini 在php.ini 中加入 extension=json.so:sudo vi /etc ...

  6. 【mysql--sql语句小问题总结】

    1:查询过滤条件不为空: <select id="getActivityByIdAndEx" resultMap="BaseResultMap" > ...

  7. jquery 操作表格实例

    案例1:隔行变色,滑动,点击变色以(选中取消效果)(addClass(),removeClass(),toggleClass()) Html: <h4>1.隔行变行</h4> ...

  8. SCUT - 223 - Maya - 构造

    https://scut.online/p/223 给定两个数N,M,构造M个在[0,80000]以内的互不相同的数使之异或和为N. 首先特判一下M<=2的两个简单情况,还有坑爹的-1! 然后想 ...

  9. WPF动画——故事板（Storyboard）

    1.XAML代码 <Window x:Class="故事板.MainWindow" x:Name="window" xmlns="http:// ...

  10. 2017-11-7 NOIP模拟赛

    1.数学老师的报复 #include<iostream> #include<cstdio> using namespace std; int cnt; ]; long long ...