博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery插件Galleria 现图片画廊
阅读量:7219 次
发布时间:2019-06-29

本文共 1532 字,大约阅读时间需要 5 分钟。

hot3.png

 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.下载最新版本的
2.下载
样式文件。
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>

转载于:https://my.oschina.net/u/1044955/blog/277033

你可能感兴趣的文章
Win732位安装PostgreSQL9
查看>>
Ext JS4学习笔记1——环境的搭建
查看>>
.net MVC3实现不同的角色用不同的登录页面
查看>>
Scala学习笔记-12
查看>>
eq与gt的妙用
查看>>
哈哈哈
查看>>
projectEuler pro10
查看>>
聚焦“云开发圆桌论坛”,大前端Serverless大佬们释放了这些讯号!
查看>>
数学模板
查看>>
c#中英文混合字符串截取指定长度
查看>>
.NetCore应用多个target framework
查看>>
pdfminer获取整页文本
查看>>
windows服务器多端口Redis安装步骤
查看>>
第二次作业心得
查看>>
爬虫——请求库之requests
查看>>
android子线程更新UI,与主Thread一起工作
查看>>
50行实现简易HTTP服务器
查看>>
细讲递归(recursion)
查看>>
进程和进程间通信
查看>>
微处理器的两种结构比较
查看>>