nanoGALLERY: 轻松地实现图像廊

所属分类： JQ特效媒体图像

查看演示立即下载

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

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:'/'
    });
  });
</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: '//',
        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>

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery延迟加载图片插件Lazy Load XT
下一个特效： DateTimePicker：jQuery日期和时间插件