jquery.nanogallery.js可自定义配置的画廊插件

收藏

本文演示了nanogallery画廊插件4种不同效果，包括默认配置、a标签属性、相册列表、缩略图自定义配置。打开缩略图弹出层，可自由切换图片轮播。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

引入nanogallery画廊相关插件

<script type="text/javascript" src="third.party/transit/jquery.transit.min.js"></script>
<script type="text/javascript" src="third.party/hammer.js/hammer.min.js"></script>
<script type="text/javascript" src="third.party/imagesloaded/imagesloaded.pkgd.min.js"></script>
<link href="css/nanogallery.css" rel="stylesheet" type="text/css"/>
<link href="css/themes/clean/nanogallery_clean.css" rel="stylesheet" type="text/css"/>
<link href="css/themes/light/nanogallery_light.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.nanogallery.js"></script>

演示一：默认配置

<div id="nanoGallery1a"></div>

var contentGallery1a = [
    {
        src: 'demonstration/image_01.jpg', // image url
        srct: 'demonstration/image_01ts.jpg', // thumbnail url
        title: 'image 1' 						// thumbnail title
    },
    {
        src: 'demonstration/image_02.jpg',
        srct: 'demonstration/image_02ts.jpg',
        title: 'image 2'
    },
    {
        src: 'demonstration/image_03.jpg',
        srct: 'demonstration/image_03ts.jpg',
        title: 'album 1'
    }];

jQuery("#nanoGallery1a").nanoGallery({thumbnailWidth: 120, thumbnailHeight: 120,
    items: contentGallery1a,
    theme: 'clean',
    colorScheme: 'darkOrange',
    thumbnailHoverEffect: 'imageInvisible,imageScale150',
    useTags: false,
    viewerDisplayLogo: true
});

演示二：a标签属性

<div id="nanoGallery2">
    <a href="image_01.jpg" data-ngthumb="image_01ts.jpg" data-ngdesc="描述">Thailand</a>
    <a href="image_02.jpg" data-ngthumb="image_02ts.jpg" data-ngdesc="描述">Vietnam</a>
    <a href="image_03.jpg" data-ngthumb="image_03ts.jpg" data-ngdesc="">India</a>
</div>

jQuery("#nanoGallery2").nanoGallery({thumbnailWidth: 160, thumbnailHeight: 160,
    itemsBaseURL: 'demonstration',
    displayCaption: true,
    thumbnailHoverEffect: [{'name': 'overScale', 'duration': 300}, {'name': 'borderLighter'}],
    colorScheme: 'light',
    viewerDisplayLogo: true
});

演示三: 相册列表

<div id="nanoGalleryMLN"></div>

jQuery("#nanoGalleryMLN").nanoGallery({thumbnailWidth: 120, thumbnailHeight: 120,
    items: contentGalleryMLN,
    paginationMaxLinesPerPage: 1,
    thumbnailHoverEffect: 'imageInvisible,imageScale150',
    viewerDisplayLogo: true,
    useTags: false,
    viewer: 'fancybox',
    locationHash: false
});

演示四: 缩略图自定义配置

<div id="nanoGalleryAnimation1" style="margin:50px"> 
    <a href="image_01.jpg" data-ngThumb="image_01ts.jpg" data-ngDesc="描述">Image 1</a>
    <a href="image_02.jpg" data-ngThumb="image_02ts.jpg">Image 2</a> 
    <a href="image_03.jpg" data-ngThumb="image_03ts.jpg">Image 3</a>
</div>

jQuery("#nanoGalleryAnimation1").nanoGalleryDemo({thumbnailWidth: 120, thumbnailHeight: 120, itemsBaseURL: 'demonstration',
    viewerDisplayLogo: true,
    thumbnailHoverEffect: [{'name': 'borderLighter', 'duration': 300}]
});