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页面代码如下(关键部分已加入注释)：

 

 

	
	

				
		        
  图片组展示  
		        

		        		
		            	
		            		
		                	
		            	
		            	
		                	
		            	
		            	
		                	
		            	
		            	
		                	
		            	
		        
		        
		        

		    
		

 

 

 

 

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