读书人

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

发布时间: 2012-08-29 08:40:14 作者: rapoo

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


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


1、技术目标


掌握Galleria插件的基本操作


2、Galleria简介


Galleria是一个jQuery插件,可用于展示多张图片,操作也比较简单,

展示效果也非常不错,如图:


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


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

?

?

?


?

读书人网 >Web前端

热点推荐