Galleria 插件使用

最新推荐文章于 2024-08-13 08:08:34 发布

转载最新推荐文章于 2024-08-13 08:08:34 发布 · 177 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/westcity/archive/2012/12/03/2799552.html

文章标签：

#javascript #json #ViewUI

本文介绍如何使用Galleria相册插件创建图片展示效果，包括引入jQuery和Galleria.js文件，设置HTML结构，以及通过JSON配置实现自动播放、过渡效果等高级功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Galleria是个不错的相册插件，官网：http://galleria.io

我在使用这个插件做图片展示，遇到了大量问题，经过一边翻译官网一边测试终于做出了一些简单的效果，因此在这里写下来：

首先引入jquery.js

html

</div>

调用插件，下面是以json格式官网只提供这两行 Galleria.loadTheme('./js/galleria.classic.js'); Galleria.run('#galleria'）；就可以调用成功。

下面是我使用的

    idleMode:true,          //图象进入空闲时间过后自动运行，
   idleTime:3000,
   idleSpeed:200

   transition:'fadeslide',// fade | pulse |slide | fadeslide |flash 图片进入5种方式
    extend:function(options){           //extend的使用下面是调用内部方法实现打开就全屏调用方法可以用 $('#galleria').data('galleria').方法
   $('#galleria').data('galleria').enterFullscreen('enter');
       },
   });

//图像进入空闲时候的事件（'idle_enter'）的使用方法 Galleria.on('事件名',function(){})

Galleria.on('idle_enter',function(){
$('#galleria').data('galleria').play('1000'); //调用图像播放的函数方法
})

</script>

转载于:https://www.cnblogs.com/westcity/archive/2012/12/03/2799552.html