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. [原创]SQL表值函数:返回从当前周开始往回的自定义周数

    一如往常一样,一篇简短博文记录开发过程中遇到的一个问题.初衷都是记录自己的一些Idea,也是希望能够帮助一些凑巧遇到此类需求的问题,这个需求的的开端是因为,要统计最近N周的销售数据. 接下来我们来看看 ...

  2. Struts学习总结 学习

    ContextMap 包含值栈包含 root(list结构)和context(map结构)  值栈包含contextMap的引用.  Actioncontext是工具类 可以获取他们 Struts2拥 ...

  3. 树莓派 Learning 002 装机后的必要操作 --- 02 解决中文问题

    树莓派 装机后的必要操作 - 解决中文问题 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 每一块树莓派,装机后都应该执行的步骤 刚装机后, ...

  4. windows 下隐藏 system 函数弹窗

    概述 下面的程序是解决windows 下面调用 system() 函数的时候,会有窗口弹出的问题 头文件 #include <windows.h> 源码 /** * @brief 普通字符 ...

  5. vue+element-ui 实现分页

    <el-table ref="multipleTable" :data="tableData.slice((currentPage-1)*pagesize,curr ...

  6. SCUT - 321 - Tobby's magic - 线段树

    https://scut.online/p/321 第一次做区间线段树. 感觉和单点的一样啊.pushdown的时候要注意一些问题,st的值有可能是跟区间长度有关的. #include<bits ...

  7. ejs使用文档

    EJS是一个javascript模板库,用来从json数据中生成HTML字符串. 功能:缓存功能,能够缓存好的HTML模板: <% code %>用来执行javascript代码 ejs模 ...

  8. 【转载】Hyperledger学习小结

    Hyperledger学习小结 自学Hyperledger Composer也有段时间了,是时候对所学的知识总结一下了.因为没有实际项目参与的话,差不多也就到此为止了.后续可能会去了解一下以太坊的技术 ...

  9. Go入门基础手记

    1. 配置环境变量(临时) export GOPATH=yourpath 2. 跨平台交叉编译 env GOOS=linux GOARCH=amd64 go build 3. test写法 // 首先 ...

  10. thinkphp5使用uploadify

    uploadify flash版本下载地址:http://www.uploadify.com/wp-content/uploads/files/uploadify.zip 将解压后的文件放入项目公共文 ...