jQuery图片组展示插件Galleria使用简介

HotStrong

浏览: 509570 次
性别:
来自: 成都

最近访客更多访客>>

一往无前bhz

草料场

dahai533418

dongguangming88

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

5、HTML/JavaScript

jQuery Galleria

jQuery图片组展示插件Galleria使用简介

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

注意：以上文件本文已提供完整Demo下载

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="images/1.jpg" />
		            	</a>
		            	<a href="javascript:alert('image2');">
		                	<img title="图2" alt="" src="images/2.jpg" />
		            	</a>
		            	<a href="javascript:alert('image3');">
		                	<img title="图3" alt="" src="images/3.jpg" />
		            	</a>
		            	<a href="javascript:alert('image4');">
		                	<img title="图4" alt="" src="images/4.jpg" />
		            	</a>
		        </div>
		        <!-- 设置底部文字 -->
		        <p class="cred"></p>
		    </div>
		</div>
</body>
</html>

Galleria_demo.rar (257.4 KB)
下载次数: 382

5
顶

1
踩

分享到：

Struts2 图片上传、缩放、剪切处理第一节 | 使用ajax gson增强用户体验

2011-09-26 10:48
浏览 7351
评论(1)
分类:Web前端
查看更多

1 楼 foart 2015-09-07

ie、谷歌运行，图片不能播放，只在火狐成功

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论