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>
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>
分享到:
相关推荐
NULL 博文链接:https://hotstrong.iteye.com/blog/1180427
Galleria是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件,因此可以...
该插件更新到2011-11-16.加入加载等待中效果,是一款超强的轮播插件。支持点击图片放大,全屏查看功能,且效果超炫,如同看播放器视频一样,适合做图片展示功能。附上js文件,注意demo页面在\galleria-1.2.6\...
Galleria jquery画廊插件 上面图片,下面是缩略图,效果还不错
用于开发html图片轮播功能,支持滑动切换,适配手机屏幕
一款来自国外的图片展示插件Galleria代码 支持缩略图,支持左右两侧控制图片切换,示例中加载的是远程图片,速度有些慢。像国外著名的相册网站Flickr就使用有本款插件的效果,用来展示图片相当有美感,实用性很强。
galleria-1.2.6画廊实例源码
jquery图片显示--aino-galleria-a09cdb0,各种精美图片展示,压缩包.
绚丽的jquery相册插件 [removed][removed] [removed][removed] [removed] Galleria.loadTheme('galleria.classic.js'); $('#galleria').galleria({}); [removed]
NULL 博文链接:https://langhua9527.iteye.com/blog/549632
wordpress主题画廊主题:Galleria本资源系百度网盘分享地址
galleria插件,用于照片浏览。官网地址,https://galleria.io/,里面可以下载也包含api文档。
这些jQuery插件包括演示、文档说明等,欣赏吧!1. Galleriffic 下载与文档 查看演示 2. jPhotoGrid 下载与文档 查看演示 3. Galleria 下载与文档 查看演示 4. YoxView 下载与文档 查看演示 5. Micro Image Gallery ...
galleria jqueryImagePlugin classic and 12 theme
galleria-facebook, 在你的Galleria网站上,显示Facebook照片 galleria在你的网站上使用Galleria将Facebook照片显示在响应式布局中。原始博客文章在 aiaio 。 Galleria美国的是一款流行。开源的反应性照片库,它最好...
这允许基于galleria.io的可用功能使用对象构建图片库要求蛋糕PHP 2+ PHP 5.3+ 蛋糕工具包( ) Jquery ( )安装要使用插件,只需将其包含在应用程序的“app/Plugin”目录中,然后将其加载到“app/Config/bootstrap....
环球免税店响应式JavaScript图像库这是Galleria核心,主题,插件和其他所有内容的开源资源库。 随时发布问题-但请保持它们与代码相关。 您也可以执行拉取请求,但请确保其中包含一些注释和/或测试。 信息,演示,...
Galleria是建立在jQuery库之上JavaScript图片库框架。 目的是简化为Web和移动设备创建专业图像库的过程。 如何安装 该插件可以与其他任何Plone插件一样安装。 请遵循官方。 有一个主意吗? 发现了错误? 让我们...
GALLERIA·凤凰新天地商业介绍.pdf
// To initialize galleria带有以下选项的可选对象:galleryRoot 这是通往画廊根源的绝对路径。 仅当从节点应用程序的根目录以外的其他地方启动节点应用程序时,才应更改此设置。GalleryPublicRoot 这是公共文件的...