空间相册预览
<!doctype html> <html> <head> <title>QQ空间图片浏览代码</title> <script src="layer/jquery.js?v=1.83.min"></script> <script src="layer/layer.min.js"></script> <style> html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'} a,a:hover{ text-decoration:none;} pre{font-family:'微软雅黑'} .box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;} .box a{padding-right:15px;} #about_hide{display:none} .layer_text{background-color:#fff; padding:20px;} .layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;} .button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;} .imgs img{width:300px;padding:0 30px 30px;} </style> </head> <body> <div class="box"> <h2 style="padding-bottom:20px;">layer1.8相册模块，点击下述图片试试</h2> <div id="imgs" class="imgs"> <img src="images/1.jpg" layer-pname="IC - 1"> <img src="images/2.jpg" layer-pname="IC - 2"> <img src="images/3.jpg" layer-pname="IC - 3"> <img src="images/4.jpg" layer-pname="IC - 4"> </div> </div> <script> ;!function(){ layer.use('extend/layer.ext.js', function(){ //初始加载即调用，所以需放在ext回调里 layer.ext = function(){ layer.photosPage({ html:'<div style="padding:20px;">这里传入自定义的html<p>相册支持左右方向键，支持Esc关闭</p><p>另外还可以通过异步返回json实现相册。更多用法详见官网。</p><p>'+ unescape("%u7D20%u6750%u5BB6%u56ED%20-%20sc.chinaz.com") +'</p><p >, title: '快捷模式-获取页面元素包含的所有图片', id: 100, //相册id，可选 parent:'#imgs' }); }; }); }(); </script> </body> </html>
js
/************************************************************** @Name：layer v1.8.3 弹层组件压缩版 @Author：贤心 @Date：2014-06-04 @Blog：http://sentsin.com @QQ群：78803422 (layer组件群3) @Copyright：Sentsin Xu(贤心) @官网：http://sentsin.com/jquery/layer @授权：http://url.cn/RAejZY *************************************************************/ ;!function(a,b){ "use strict"; var e,f,h,i,j, c=!0, //是否采用自动获取绝对路径。!1：将采用下述变量中的配置 d="/lily/lib/layer/", //上述变量为!1才有效，当前layerjs所在目录(不用填写host，相对站点的根目录即可)。 g={host:"http://"+location.host,getPath:function(){var a=document.scripts,b=a[a.length-1].src;return c?b.substring(0,b.lastIndexOf("/")+1):this.host+d},type:["dialog","page","iframe","loading","tips"]};a.layer={v:"1.8.3",ie6:!-[1,]&&!a.XMLHttpRequest,index:0,path:g.getPath(),use:function(a,b){var f,g,h,d=e("head")[0];a=a.replace(/\s/g,""),f=/\.css$/.test(a),g=document.createElement(f?"link":"script"),h=a.replace(/\.|\//g,""),f&&(g.type="text/css",g.rel="stylesheet"),g[f?"href":"src"]=/^http:\/\//.test(a)?a:layer.path+a,g.id=h,e("#"+h)[0]||d.appendChild(g),b&&(document.all?e(g).ready(b):e(g).load(b))},ready:function(a){layer.use("skin/layer.css",a)},alert:function(a,b,c,d){var f="function"==typeof c,g={dialog:{msg:a,type:b,yes:f?c:d},area:["auto","auto"]};return f||(g.title=c),e.layer(g)},confirm:function(a,b,c,d){var f="function"==typeof c,g={dialog:{msg:a,type:4,btns:2,yes:b,no:f?c:d}};return f||(g.title=c),e.layer(g)},msg:function(a,c,d,f){var g={title:!1,closeBtn:!1,time:c===b?2:c,dialog:{msg:""===a||a===b?" ":a},end:f};return"object"==typeof d?(g.dialog.type=d.type,g.shade=d.shade,g.success=function(){layer.shift(d.rate)}):"function"==typeof d?g.end=d:g.dialog.type=d,e.layer(g)},load:function(a,b){return"string"==typeof a?layer.msg(a,b||0,16):e.layer({time:a,loading:{type:b},bgcolor:b?"#fff":"",shade:b?[.1,"#000"]:[0],border:3!==b&&b?[6,.3,"#000"]:!1,type:3,title:["",!1],closeBtn:[0,!1]})},tips:function(a,b,c,d,f,g){var h={type:4,shade:!1,success:function(a){this.closeBtn||a.find(".xubox_tips").css({"padding-right":10})},bgcolor:"",tips:{msg:a,follow:b}};return c=c||{},h.time=c.time||c,h.closeBtn=c.closeBtn||!1,h.maxWidth=c.maxWidth||d,h.tips.guide=c.guide||f,h.tips.style=c.style||g,e.layer(h)}},h={lay:"xubox_layer",ifr:"xubox_iframe",title:".xubox_title",text:".xubox_text",page:".xubox_page"},i=function(a){var b=this,c=b.config;layer.index++,b.index=layer.index,b.config=e.extend({},c,a),b.config.dialog=e.extend({},c.dialog,a.dialog),b.config.page=e.extend({},c.page,a.page),b.config.iframe=e.extend({},c.iframe,a.iframe),b.config.loading=e.extend({},c.loading,a.loading),b.config.tips=e.extend({},c.tips,a.tips),b.creat()},i.pt=i.prototype,i.pt.config=layer.config||{type:0,shade:[.3,"#000"],shadeClose:!1,fix:!0,move:".xubox_title",moveOut:!1,title:["信息",!0],offset:["200px","50%"],area:["310px","auto"],closeBtn:[0,!0],time:0,bgcolor:"#fff",border:[6,.3,"#000"],zIndex:19891014,maxWidth:400,dialog:{btns:1,btn:["确定","取消"],type:8,msg:"",yes:function(a){layer.close(a)},no:function(a){layer.close(a)}},page:{dom:"#xulayer",html:"",url:""},iframe:{src:"http://sentsin.com",scrolling:"auto"},loading:{type:0},tips:{msg:"",follow:"",guide:0,isGuide:!0,style:["background-color:#FF9900; color:#fff;","#FF9900"]},success:function(){},close:function(a){layer.close(a)},end:function(){}},i.pt.space=function(a){var c,d,e,f,g,i,j,k,l,m,n,o,b=this;return a=a||"",c=b.index,d=b.config,e=d.dialog,f=-1===e.type?"":'<span class="xubox_msg xulayer_png32 xubox_msgico xubox_msgtype'+e.type+'"></span>',g=['<div class="xubox_dialog">'+f+'<span class="xubox_msg xubox_text" style="'+(f?"":"padding-left:20px")+'">'+e.msg+"</span></div>",'<div class="xubox_page">'+a+"</div>",'<iframe scrolling="'+d.iframe.scrolling+'" allowtransparency="true" ,a.seajs?define([j],function(b,c){g.run(),c.layer=[a.layer,a.$.layer]}):g.run()}(window);