`
HotStrong
  • 浏览: 509322 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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>

 

 

 

 

5
1
分享到:
评论
1 楼 foart 2015-09-07  
ie、谷歌运行,图片不能播放,只在火狐成功

相关推荐

    jQuery图片展示插件Galleria.zip

    Galleria是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件,因此可以...

    jquery图片轮播插件之galleria1.26

    支持点击图片放大,全屏查看功能,且效果超炫,如同看播放器视频一样,适合做图片展示功能。附上js文件,注意demo页面在\galleria-1.2.6\galleria\themes\classic目录下,你也可以在以下地址查看最新更新: ...

    jquery图片显示--aino-galleria-a09cdb0

    《jQuery图片展示:Aino Galleria深度解析》 在当今的网页设计中,动态、交互式的图片展示已经成为提升用户体验的重要手段。Aino Galleria,一个基于jQuery的开源图片库,以其优雅的设计和强大的功能,深受开发者们...

    jquery图片浏览插件

    综上所述,jQuery图片浏览插件是提升网站或应用图片展示体验的重要工具,它们充分利用jQuery的便利性和灵活性,实现了丰富的功能和优秀的用户体验。通过选择合适的插件并进行适当的配置,你可以轻松地在自己的项目中...

    jquery插件集-图片展示 幻灯片效果 图片浏览

    标题提到的“jquery插件集-图片展示 幻灯片效果 图片浏览”聚焦于利用jQuery实现的图片展示解决方案,这些插件通常用于网站设计,提升用户体验,特别是对于产品展示、摄影网站或任何需要吸引用户注意力的地方。...

    Jquery学习笔记-2009Juery年度插件之galleria

    总的来说,Galleria作为一款经典的jQuery插件,它的强大功能和易用性使其成为Web开发者构建高质量图像画廊的首选工具。通过理解其核心特点、使用方法和配置选项,我们可以充分利用这个工具,为网站增添更多视觉吸引...

    最新 最流行 jquery 图片插件大全

    "最新 最流行 jquery 图片插件大全"这个主题聚焦于利用jQuery来增强网页图片展示效果的各种插件。这些插件通常包含了丰富的功能,如轮播、缩略图导航、动态加载、图片预览等,旨在提升用户体验,让网站的图片展示...

    用jQuery框架的图片展示相册

    5. `jquery.galleria.js`:这可能是Galleria插件的脚本文件,Galleria是一个基于jQuery的高级图片展示插件,提供了丰富的选项和主题,适合用于创建相册。 6. `懒人建站.url`:这可能是一个链接,指向一个关于快速建...

    类似新浪搜狐新闻图集网页图片展示代码jquery插

    描述中同样重申了主题,即寻找或分享用于在网页上展示图片的jQuery插件,特别是那种与新浪和搜狐新闻网站上图片展示方式相类似的。这可能包括动态加载、预览效果、缩略图导航等特性,旨在为用户提供一种高效、流畅且...

    很好的图片插件

    总结来说,“很好的图片插件”通常指的是提供高效、美观图片展示功能的jQuery插件,比如Galleria。这类插件通过简洁的代码实现丰富的动态效果,是现代网页设计中不可或缺的工具之一。掌握并灵活运用这些插件,对于...

    jquery 插件jquery 插件jquery 插件jquery 插件

    在描述中虽然没有提供具体的信息,但我们可以推断出讨论的是关于jQuery插件的使用和开发。jQuery插件通常遵循一定的结构,包括封装在自执行匿名函数中,通过$.fn.extend方法扩展jQuery对象,以及定义选项、事件和...

    jqueryImagePlugin galleria

    首先,Galleria作为一个jQuery插件,它的核心优势在于易于使用和高度可定制性。jQuery的强大选择器和事件处理机制使得Galleria可以轻松地与网页元素进行交互,为用户提供流畅的图片浏览体验。无论是初学者还是经验...

    jQuery插件

    3. **Bootstrap Grid System**:虽然并非严格的jQuery插件,但与jQuery配合使用时,可以创建响应式的栅格布局。Bootstrap的网格系统提供了12列的布局,可适应不同设备屏幕大小。 4. **Isotope**:类似于Masonry,...

    jQuery酷炫效果插件集

    10. **图库/画廊**:如Fancybox或Galleria,为网站添加优雅的图片和媒体展示功能。 以上仅为部分可能包含在"jQuery酷炫效果插件集"中的插件示例,实际内容可能更为丰富多样。这些插件的使用可以显著提升网站的视觉...

    galleria 最新插件

    绚丽的jquery相册插件 [removed][removed] [removed][removed] [removed] Galleria.loadTheme('galleria.classic.js'); $('#galleria').galleria({}); [removed]

    Jquery特效插件集合

    10. **图库/相册插件**:如Flickity或Galleria,用于创建专业级的图片展示效果,支持触摸滑动和各种过渡动画。 以上只是部分jQuery特效插件的应用场景和功能,实际上jQuery生态系统中有无数的插件可供选择,覆盖了...

    jquery 相册插件 非常棒!

    总的来说,jQuery相册插件通过结合JavaScript和CSS3,可以创建出功能强大且用户友好的图片展示平台。Galleria作为一个成熟的jQuery相册插件,提供了丰富的定制选项和扩展能力,帮助开发者轻松实现各种复杂的相册效果...

    jQuery 相册插件

    jQuery相册插件是网页开发中常用的一种工具,它能够帮助开发者轻松实现各种美观、交互性强的图片展示功能。在Web设计中,相册部分往往是最吸引用户注意力的地方,因此选择一个合适的jQuery相册插件至关重要。下面...

Global site tag (gtag.js) - Google Analytics