nanoGALLERY: 轻松地实现图像廊

nanoGALLERY jquery 插件：非常方便地实现图像廊。它是已启用、快速响应、快速的触摸，它支持云存储。

特色专辑、灯箱、 缩略图、幻灯片显示、全屏显示、分页、图像懒加载、主题、引导的兼容性、可自定义，对许多悬停效果的多级导航和写真相册等。

功能列表

        装点你的投资组合与引人注目的效果。

        图像库：显示缩略图具有标题和说明。缩略图的大小是可配置的。画廊以平滑的动画显示。支持分页。

        综合灯箱：通过一个模态弹出窗口的完整视图中显示图像。显示图像的标题和说明。

        悬停效果：易于安装的缩略图悬停动画。影响可以组合为更多的可能性。可用的 2D/3D 效果。效果是触摸屏友好。

        标题和说明： 显示缩略图，以及图像。支持 HTML 标记。

        移动友好：触摸屏已启用且反应迅速。

        CSS3 加速：支持 CSS3 加速现代浏览器上的。与较旧的浏览器兼容也。

        用户友好: 易于使用。支持的浏览器后退按钮。可以使用鼠标、 键盘或手势来控制。

        多级导航：痕迹导航支持导航的相册。无限的多个分级别。

        在线照片存储：显示图像存储在 Picasa 中 / Google + 和在 Flickr 中。无需手动上传图片到你的网站。新发布的图像会自动显示在库中。

使用方法

添加 JS 和 CSS 文件

!-- Add jQuery library (mandatory) -->
<script type="text/javascript" src="third.party/jquery-1.8.2.min.js"></script> 
<!-- Add Transit plugin (optional - this is only required for some hover effects) -->
<script type="text/javascript" src="third.party/transit/jquery.transit.min.js"></script> 
<!-- Add Hammer.js plugin (optional - this is only required for gesture support) -->
<script type="text/javascript" src="third.party/hammer.js/hammer.min.js"></script> 
<!-- Add nanoGALLERY plugin files (mandatory) -->
<link href="css/nanogallery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.nanogallery.js"></script>

列表中的图像使用 HREF 属性

<div id="nanoGallery">
    <a href="image_01.jpg" 
        data-ngThumb="image_01t.jpg"
        data-ngDesc="Description1">Image1</a>
    <a href="image_02.jpg" 
        data-ngThumb="image_02t.jpg" 
        data-ngDesc="Description2">Image2</a>
    <a href="image_03.jpg"
        data-ngThumb="image_03t.jpg"
        data-ngDesc="Description3">Image3</a>
</div>

<script type="text/javascript">
  $(document).ready(function(){
    jQuery("#nanoGallery").nanoGallery({
        thumbnailWidth: 120,
        thumbnailHeight: 80,
        thumbnailHoverEffect:'borderLighter,descriptionSlideUp',
        itemsBaseURL:'http://brisbois.fr/nanogallery4/demonstration'
    });
  });
</script>

图像列表传递给脚本 (API)

<!-- First, write your HTML -->
<div id="nanoGallery"></div>

<script type="text/javascript">
  $(document).ready(function(){
    jQuery("#nanoGallery").nanoGallery({
        thumbnailWidth: 120,
        thumbnailHeight: 120,
        items: [{
            src: 'image_01.jpg', // image
            srct: 'image_01t.jpg', // thumbnail
            title: 'image 1', // title
            description: 'Description 1' // description
        }, {
            src: 'image_02.jpg',
            srct: 'image_02t.jpg',
            title: 'image 2'
        }, {
            src: 'image_03.jpg',
            srct: 'image_03t.jpg',
            title: 'image 3'
        }],
        itemsBaseURL: 'http://brisbois.fr/nanogallery4/demonstration/',
        thumbnailLabel: {
            display: true,
            position: 'overImageOnBottom'
        },
        thumbnailHoverEffect:'borderLighter'
    });
  });
</script>

Google + / Picasa 照片

!-- First, write your HTML -->
<div id="nanoGallery"></div>

<script type="text/javascript">
  $(document).ready(function(){
    jQuery("#nanoGallery").nanoGallery({
        kind: 'picasa',
        userID: 'xxx@gmail.com',
        album: 'xxxxxx',                //remove this line to display all the albums
        thumbnailWidth: 144,
        thumbnailHeight: 144,
        thumbnailHoverEffect:'borderLighter'
    });
  });
</script>

Flickr 照片

<!-- First, write your HTML -->
<div id="nanoGallery"></div>

<script type="text/javascript">
  $(document).ready(function(){
    jQuery("#nanoGallery").nanoGallery({
        kind: 'flickr',
        userID: '34858669@N00',
        photoset:'72157594299597591',           //remove this line to display all the photosets
        thumbnailWidth: 125,
        thumbnailHeight: 125,
        thumbnailHoverEffect:'borderLighter,descriptionSlideUp'
    });
  });
</script>

PREVIOUS:
NEXT:
DateTimePicker：jQuery日期和时间插件
jQuery延迟加载图片插件Lazy Load XT