纯js和CSS3分散式图片画廊插件polaroid-gallery

所属分类:媒体-图片展示

 39089  541  查看评论 (22)
分享到微信朋友圈
X
纯js和CSS3分散式图片画廊插件polaroid-gallery ie兼容10

polaroid-gallery是一款效果非常酷的纯js和CSS3分散式宝丽来图片画廊插件。该宝丽来图片画廊在初始化时所有图片被分散在屏幕的不同地方,并旋转不同的角度。被选择的图片总是会被移动到屏幕的中间。

注:此插件需要在服务端运行,本地预览会有跨域问题!

使用方法

在页面中引入polaroid-gallery.css和polaroid-gallery.js文件。

<link rel="stylesheet" href="dist/polaroid-gallery.css" type="text/css" /> 
<script src="dist/polaroid-gallery.js"></script>

HTML结构

使用一个<div>元素作为图片画廊的容器。另外可以为图片画廊添加前后导航按钮。

<div id="gallery" class="fullscreen"></div>
<div id="nav" class="navbar">
    <button id="preview">< 前一张</button>
    <button id="next">下一张 ></button>
</div>

初始化插件

在页面DOM元素加载完毕之后,可以通过new polaroidGallery()方法来构建一个新的图片画廊对象。

<script>
    window.onload = function () {
        new polaroidGallery();
    }
</script>

图片画廊中的图片是通过json数据来进行异步加载的,确保在data文件夹中编写data.json文件,json文件里面存放图片的相对路径。文件的基本格式为:

[
  {
  "name": "img01.jpg", 
  "caption": "图片1"
  },
  {
  "name": "img02.jpg",
  "caption": "图片2"
  }
]

         

相关插件-图片展示

jQuery图片放大插件

jQuery点击图片放大,适应移动端和PC端
  图片展示
 41813  322

原生js放大镜(原创)

一个普通的图片放大镜功能,放大倍数可自定义
  图片展示
 19145  306

移动端仿淘宝造物节3d

html5场景淘宝造物节3D酷炫空间专题页面模板
  图片展示
 28251  451

原生js图片查看插件(原创)

原生js实现点击图片放大预览
  图片展示
 27347  320

讨论这个项目(22)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    猫定鄂 0
    2021/1/28 17:20:48
    楼主不厚道啊,请把你电脑上所有这种图片打包一份😘 回复
    さようなら 0
    2018/11/15 15:30:25
    为什么下载后打开没效果
    回复
    牛奶咖啡葡萄茶 0
    2018/3/6 12:11:39
    作者大哥,请问能不能调照片大小,我想放很多照片上去
    回复
    兜兜柱 0
    2018/2/3 16:14:03

    上一个张和下一张api 是

    回复

    ①?rénDê菰? 0
    2017/11/10 17:05:41
    哈哈!自己改成谷歌浏览器能看的效果了!
        shenxc0
        2018/9/16 20:52:36
        怎么修改的 啊
    回复
    木木浪天下 0
    2017/6/7 19:32:02

    请问这个插件怎么能设置按钮可以增加图片或删除图片

        niuxingyue0
        2017/8/21 17:34:45

        那你得让后台帮助了,需要增删改查了,还是说不保存,只是简单的添加,那就用节点操作

    回复
    =,= 0
    2017/4/18 13:33:27
    淡忘、 0
    2016/9/19 16:09:44
    这个该怎么弄  楼主你救救我啊
        韩辉880
        2016/9/25 17:09:12
        额,装逼失败
    回复
    淡忘、 0
    2016/9/19 16:09:54
    怎么图片显示不出来,我拿来装逼的啊   大神救救我
        code_me0
        2017/3/31 21:56:01

        看看你的图片路径

    回复
    管奕磊 0
    2016/9/13 10:09:48
    我把  json数据写到js里了   为什么还是不行    是要怎么写   求指教   谢谢了 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复