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

来源:https://www.sucaihuo.com/js/665.html 2016-01-11 19:34浏览(1637) 收藏

本文演示了nanogallery画廊插件4种不同效果,包括默认配置、a标签属性、相册列表、缩略图自定义配置。打开缩略图弹出层,可自由切换图片轮播。
jquery.nanogallery.js可自定义配置的画廊插件
分类:图片代码 > 缩略图 难易:高级
查看演示 下载资源 下载积分: 20 积分

引入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}]
});
标签: 画廊
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2