本文介绍了如何利用jQuery插件Galleria快速搭建图片画廊。通过五个简单步骤，包括下载jQuery和Galleria插件，引入样式文件，设置HTML结构，以及自定义样式，可以实现一个功能齐全的图片展示效果。文章列举了图片加载错误的情况，并提供了不同类型的缩略图展示方式。
jQuery编写的javascript图像画廊插件Galleria
- Error loading image: http://monc.se/galleria/demo/img/flowing-rock.jpg
- Error loading image: http://monc.se/galleria/demo/img/stones.jpg
- Error loading image: http://monc.se/galleria/demo/img/grass-blades.jpg
- Error loading image: http://monc.se/galleria/demo/img/ladybug.jpg
- Error loading image: http://monc.se/galleria/demo/img/lightning.jpg
- Error loading image: http://monc.se/galleria/demo/img/lotus.jpg
- Error loading image: http://monc.se/galleria/demo/img/mojave.jpg
- Error loading image: http://monc.se/galleria/demo/img/pier.jpg
- Error loading image: http://monc.se/galleria/demo/img/sea-mist.jpg
通过简单的五个步骤就可以实现图片画廊，这就是jQuery插件Galleria能够为我们做的。
1.下载最新版本的jQuery。
2.下载Galleria插件和galleria.css样式文件。
3.添加以下代码到页面的<head></head>头部中：
程序代码
<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript">
jQuery(function($) { $('ul.gallery').galleria(); });
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript">
jQuery(function($) { $('ul.gallery').galleria(); });
</script>
4.建立一个图片的无序列表并赋予一个标识(如class='gallery')
5.可以根据需要重载或修改Galleria样式.
建立一个缩放的可点击的缩略图
程序代码
<ul class="gallery">
<li><img src="i/i01.jpg" title="A caption" alt="Image01"></li>
</ul>
<li><img src="i/i01.jpg" title="A caption" alt="Image01"></li>
</ul>
建立一个缩略图，但不能缩放（固定在中间）
程序代码
<ul class="gallery">
<li><img class="noscale" src="i/01.jpg" title="A caption" alt="Image01"></li>
</ul>
<li><img class="noscale" src="i/01.jpg" title="A caption" alt="Image01"></li>
</ul>
用一个自做的缩略图，居中放在缩略图容器位置中
程序代码
<ul class="gallery">
<li><a href="i/01.gif" title="A caption"><img src="i/01_thumb.jpg" alt="Image01"></a></li>
</ul>
<li><a href="i/01.gif" title="A caption"><img src="i/01_thumb.jpg" alt="Image01"></a></li>
</ul>
扫一扫
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
