图片点击放大满屏切换，可视图5张

最新推荐文章于 2024-04-10 18:39:33 发布

转载最新推荐文章于 2024-04-10 18:39:33 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuqingxia/p/6019338.html

文章标签：

#javascript #前端 #ViewUI

本文介绍了一种使用jQuery插件imagesGrid来创建图片画廊的方法。通过简单的HTML结构和配置选项，可以轻松实现不同数量及尺寸的图片网格布局。

1.链接引用

<link rel="stylesheet" href="src/images-grid.css">

2.html代码：

<p>More than five images</p>
<div id="gallery1"></div>

<p>Diff-size images</p>
<div id="gallery2"></div>

3.调用imagesGrid

$('#gallery1').imagesGrid({
images: [
'imgs/1.jpg',
{ src: 'imgs/2.jpg', alt: 'Second image', title: 'Second image' },
'imgs/3.jpg',
{ src: 'imgs/4.jpg', caption: 'Beautiful forest' },
'imgs/5.jpg'

]
});

$('#gallery2').imagesGrid({
images: [
'imgs/diff-size/1.jpg',
'imgs/diff-size/2.jpg',
'imgs/diff-size/3.jpg',
'imgs/diff-size/4.jpg',
'imgs/diff-size/5.jpg'

],
align: true
});

</script>

转载于:https://www.cnblogs.com/liuqingxia/p/6019338.html