jQuery编写的javascript图像画廊插件Galleria

« 上一张 | 下一张 »

通过简单的五个步骤就可以实现图片画廊，这就是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>

4.建立一个图片的无序列表并赋予一个标识(如class='gallery')
5.可以根据需要重载或修改Galleria样式.

建立一个缩放的可点击的缩略图

程序代码

<ul class="gallery">
<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>

用一个自做的缩略图，居中放在缩略图容器位置中

程序代码

<ul class="gallery">
<li><a href="i/01.gif" title="A caption"><img src="i/01_thumb.jpg" alt="Image01"></a></li>
</ul>

相关文章：

2021-12-02
2021-10-07
2021-10-07
2021-12-09
2021-12-19
2021-10-07
2021-12-05
2021-11-30

猜你喜欢

2021-10-07
2021-10-07
2021-10-07
2021-10-07
2021-10-07
2021-10-07
2021-10-07
2021-10-07

相关资源

下载 2021-06-07
下载 2022-12-30
下载 2023-01-28
下载 2021-06-07
下载 2022-12-24

相似解决方案

热门标签

Java Python linux javascript Mysql C# Docker 算法前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库数据结构大数据 js 机器学习微服务 Android Go 程序员面试 JVM ASP.net core 云原生人工智能后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习多线程 React 架构 devops 爬虫云计算 Spring Boot LeetCode