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}] 
});