强大的支持触摸图片弹出层放大全屏浏览jQuery插件nanoGALLERY 画

来源：未知编辑：admin 时间：2015-09-02

强大的支持触摸图片弹出层放大全屏浏览jQuery插件nanoGALLERY 画廊

介绍
支持触摸功能，反应灵敏，合理的/级联/网格布局和配套的云存储。
多级导航，在缩略图，多种布局，幻灯片，全屏，分页，图像延迟加载，主题，深度链接，可定制的，国际化，和他人之间拉动的Flickr，Picasa中，谷歌+和SmugMug的相册组合的悬停效果。

特点
用合理的，级联或网格布局显示图像画廊
显示缩略图和图像，标题和描述
无数的动画缩略图悬停效果（组合都是可能的）
易于安装和定制
响应布局 - 移动友好 - 支持刷卡
面包屑导航更方便的相册
与刷卡和键盘快捷键的支持图像幻灯片
照片和相册深层链接
优化支持非常大画廊（缩略图延迟加载或分页）
浏览器的后退/前进导航
忽略不想要的专辑或的photosets（按关键字黑名单）
在一个页面上的多个画廊
配色方案/主题
国际化支持（I18N）
佣工自定义扩展

js引用文件

!-- Add jQuery library (mandatory) -->

<script type= src="third.party/jquery-1.8.2.min.js"></script>

<script type= src="third.party/transit/jquery.transit.min.js"></script>

<script type= src="third.party/hammer.js/hammer.min.js"></script>

"css/nanogallery.css" rel="stylesheet" type="text/css">

<script type= src="jquery.nanogallery.js"></script>

注：如果您指定一个主题，必须包括相应的css文件。

创建一个容器
放了<div>元素在<BODY> HTML页面中要显示的画廊。

<div id="nanoGallery">

    <a href="image_01.jpg"

        data-ngThumb="image_01t.jpg"

        data-ngDesc="Description1">Image1a>

    <a href="image_02.jpg"

        data-ngThumb="image_02t.jpg"

        data-ngDesc="Description2">Image2a>

    <a href="image_03.jpg"

        data-ngThumb="image_03t.jpg"

        data-ngDesc="Description3">Image3a>

div>

初始化脚本

$(document).ready(function () {

    jQuery("#nanoGallery1").nanoGallery({

        kind:'flickr',

        userID:'34858669@N00'

    });

});

上一篇：js上传头像图片缩放裁剪
下一篇：jquery图片播放器