nanoGALLERY图片全屏预览

下载地址

简单使用的图片库jQuery插件。30种动画缩略图悬停效果(可组合) 。支持在Flickr和Picasa中/谷歌+相册拉动等等。移动友好和响应。面包屑多级导航。图片显示为可点击的缩略图,这将通过一个动态弹出窗口扩大到全屏幕。支持自定义主题。使用步骤用法简单:< - !添加jQuery库 - > < - !添加JSONP插件(只强制的Flickr ,谷歌和Picasa ) - > < - !添加css - >

方法1 :使用Flickr帐户创建一个容器

调用插件$(document).ready(function () { jQuery("#nanoGallery1").nanoGallery({ kind:"flickr", userID:"34858669@N00" });});方法2 :使用Picasa的/谷歌+账户创建一个容器

调用插件$(document).ready(function () { jQuery("#nanoGallery2").nanoGallery({ kind:"picasa", userID:"cbrisbois@gmail.com", blackList:"Scrapbook|forhomepage|profil" });});方法3:使用一个图像列表使用HREF属性创建一个容器一个

元素在页面上在要显示在画廊的地方。添加 元素到此容器中。每个元素都指向一个图像。 调用插件$(document).ready(function () { jQuery("#nanoGallery3").nanoGallery();});方法4 :使用传递给脚本( API )的图像列表创建一个容器把
元素在上要显示在画廊的地方。
< / DIV>调用插件使用"项目"参数为图像列表传递给插件。$(document).ready(function () { jQuery("#nanoGallery4").nanoGallery({thumbnailWidth:100,thumbnailHeight:100, items: [ { src: "demonstration/img_01.jpg", // 图片网址 srct: "demonstration/img_01t.jpg", // 缩略图链接 title: "image 1", // 缩略图标题 description : "image 1 description" // 缩略图描述 }, { src: "demonstration/img_02.jpg", srct: "demonstration/img_02t.jpg", title: "image 2" } ] });});

34_440e0e10ff3be3dda33338a4a1cc39c4.jpg

dd:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值