注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

nanoGALLERY: 轻松地实现图像廊

jQuery插件 fishcity 779浏览

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:'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>

转载请注明:jQ酷 » nanoGALLERY: 轻松地实现图像廊

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。