当前位置:JS特效 » 图片效果 » 仿Facebook图片画廊效果jQuery插件
 仿Facebook图片画廊效果jQuery插件
如果您觉得内容不错,请分享:

插件介绍

images-grid是一款仿Facebook图片画廊效果的jQuery插件。该jQuery图片画廊插件默认在图片数量超过5张的情况下,只显示前5张图片。当用户点击图片缩略图时,会以全屏lightbox的方式显示图片,通过前后导航按钮来查看所有的图片。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:115
简要教程

images-grid是一款仿Facebook图片画廊效果的jQuery插件。该jQuery图片画廊插件默认在图片数量超过5张的情况下,只显示前5张图片。当用户点击图片缩略图时,会以全屏lightbox的方式显示图片,通过前后导航按钮来查看所有的图片。

默认的图片画廊布局如下:

网格图片画廊

使用方法

在页面中引入images-grid.css,jquery和images-grid.js文件。



                  
                
HTML结构

使用一个

元素来作为图片画廊的容器。

 
                
初始化插件

在页面DOM元素加载完毕之后,可以通过imagesGrid()方法来初始化该网格图片画廊插件,并动态插入图片。

$('#gallery').imagesGrid({
  images: [
    'photos/1.jpg',
    'photos/2.jpg',
    'photos/3.jpg',
    'photos/4.jpg',
    'photos/5.jpg',
    'photos/6.jpg'
  ]
});
                

配置参数

images-grid网格图片插件的可用配置参数有:

  • images:类型:数组。图片的URL地址。
  • aling:类型:布尔值。是否对齐不同尺寸的图片。
  • getViewAllText:类型:函数。在图片大于5张时显示的文本。

images-grid网格图片画廊插件的github地址为:https://github.com/taras-d/images-grid

Top