From 84695ac13a34ade6a7752b127ff93ca8a3ffddf9 Mon Sep 17 00:00:00 2001 From: SkyArrow Date: Wed, 25 Jan 2012 01:18:01 +0800 Subject: include fancybox --- sass/_plugin.scss | 1 + sass/parts/_article.scss | 14 +- sass/plugin/_fancybox.scss | 218 ++++++++++++++++++++++++++++ sass/screen.scss | 3 +- source/_includes/custom/after_footer.html | 5 +- source/images/fancybox/blank.gif | Bin 0 -> 43 bytes source/images/fancybox/fancybox_loading.gif | Bin 0 -> 5969 bytes source/images/fancybox/fancybox_sprite.png | Bin 0 -> 2750 bytes source/javascripts/caption.js | 16 +- source/javascripts/jquery.fancybox.pack.js | 32 ++++ 10 files changed, 274 insertions(+), 15 deletions(-) create mode 100644 sass/_plugin.scss create mode 100644 sass/plugin/_fancybox.scss create mode 100644 source/images/fancybox/blank.gif create mode 100644 source/images/fancybox/fancybox_loading.gif create mode 100644 source/images/fancybox/fancybox_sprite.png create mode 100644 source/javascripts/jquery.fancybox.pack.js diff --git a/sass/_plugin.scss b/sass/_plugin.scss new file mode 100644 index 0000000..746ffd0 --- /dev/null +++ b/sass/_plugin.scss @@ -0,0 +1 @@ +@import "plugin/fancybox"; \ No newline at end of file diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss index 09555f4..eae9eaf 100644 --- a/sass/parts/_article.scss +++ b/sass/parts/_article.scss @@ -59,13 +59,6 @@ article{ img{ max-width: 100%; height: auto; - & + .caption{ - background: image-url('caption.png') 0 4px no-repeat; - display: block; - font-size: 12px; - color: #999; - padding-left: 25px; - } } blockquote{ background: $border; @@ -94,6 +87,13 @@ article{ pre{ line-height: 1.5; } + .caption{ + background: image-url('caption.png') 0 4px no-repeat; + display: block; + font-size: 12px; + color: #999; + padding-left: 25px; + } } .meta{ position: absolute; diff --git a/sass/plugin/_fancybox.scss b/sass/plugin/_fancybox.scss new file mode 100644 index 0000000..89dec97 --- /dev/null +++ b/sass/plugin/_fancybox.scss @@ -0,0 +1,218 @@ +/*! fancyBox v2.0.4 fancyapps.com | fancyapps.com/fancybox/#license */ +.fancybox-tmp iframe, .fancybox-tmp object { + vertical-align: top; + padding: 0; + margin: 0; +} + +.fancybox-wrap { + position: absolute; + top: 0; + left: 0; + z-index: 1002; +} + +.fancybox-outer { + padding: 0; + margin: 0; + background: #f9f9f9; + color: #444; + text-shadow: none; + @include border-radius(4px); +} + +.fancybox-opened { + z-index: 1003; +} + +.fancybox-opened .fancybox-outer { + @include box-shadow(0 10px 25px rgba(0, 0, 0, 0.5)); +} + +.fancybox-inner { + width: 100%; + height: 100%; + padding: 0; + margin: 0; + position: relative; + outline: none; + overflow: hidden; +} + +.fancybox-error { + color: #444; + font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; + margin: 0; + padding: 10px; +} + +.fancybox-image, .fancybox-iframe { + display: block; + width: 100%; + height: 100%; + border: 0; + padding: 0; + margin: 0; + vertical-align: top; +} + +.fancybox-image { + max-width: 100%; + max-height: 100%; +} + +#fancybox-loading { + position: fixed; + top: 50%; + left: 50%; + margin-top: -21px; + margin-left: -21px; + width: 42px; + height: 42px; + background: image-url('fancybox/fancybox_loading.gif'); + opacity: 0.8; + cursor: pointer; + z-index: 1010; +} + +.fancybox-close, .fancybox-prev span, .fancybox-next span { + background-image: image-url('fancybox/fancybox_sprite.png'); +} + +.fancybox-close { + position: absolute; + top: -18px; + right: -18px; + width: 36px; + height: 36px; + cursor: pointer; + z-index: 1004; +} + +.fancybox-prev, .fancybox-next { + position: absolute; + top: 0; + width: 40%; + height: 100%; + cursor: pointer; + background: transparent image-url('fancybox/blank.gif'); /* helps IE */ + z-index: 1003; +} + +.fancybox-prev { + left: 0; +} + +.fancybox-next { + right: 0; +} + +.fancybox-prev span, .fancybox-next span { + position: absolute; + top: 50%; + left: -9999px; + width: 36px; + height: 36px; + margin-top: -18px; + cursor: pointer; + z-index: 1003; +} + +.fancybox-prev span { + background-position: 0 -36px; +} + +.fancybox-next span { + background-position: 0 -72px; +} + +.fancybox-prev:hover, .fancybox-next:hover { + visibility: visible; +} + +.fancybox-prev:hover span { + left: 20px; +} + +.fancybox-next:hover span { + left: auto; + right: 20px; +} + +.fancybox-tmp { + position: absolute; + top: -9999px; + left: -9999px; + padding: 0; + overflow: visible; + visibility: hidden; +} + +/* Overlay helper */ + +#fancybox-overlay { + position: absolute; + top: 0; + left: 0; + overflow: hidden; + display: none; + z-index: 1001; + background: #000; +} + +/* Title helper */ + +.fancybox-title { + visibility: hidden; + font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; + position: relative; + text-shadow: none; + z-index: 1005; +} + +.fancybox-opened .fancybox-title { + visibility: visible; +} + +.fancybox-title-float-wrap { + position: absolute; + bottom: 0; + right: 50%; + margin-bottom: -35px; + z-index: 1003; + text-align: center; +} + +.fancybox-title-float-wrap .child { + display: inline-block; + margin-right: -100%; + padding: 2px 20px; + background: transparent; /* Fallback for web browsers that doesn't support RGBa */ + background: rgba(0, 0, 0, 0.8); + text-shadow: 0 1px 2px #222; + color: #FFF; + font-weight: bold; + line-height: 24px; + white-space: nowrap; + @include border-radius(15px); +} + +.fancybox-title-outside-wrap { + position: relative; + margin-top: 10px; + color: #fff; +} + +.fancybox-title-inside-wrap { + margin-top: 10px; +} + +.fancybox-title-over-wrap { + position: absolute; + bottom: 0; + left: 0; + color: #fff; + padding: 10px; + background: #000; + background: rgba(0, 0, 0, .8); +} \ No newline at end of file diff --git a/sass/screen.scss b/sass/screen.scss index 1c20d06..ebc9d41 100644 --- a/sass/screen.scss +++ b/sass/screen.scss @@ -1,4 +1,5 @@ @import "compass"; @import "base"; -@import "parts"; \ No newline at end of file +@import "parts"; +@import "plugin"; \ No newline at end of file diff --git a/source/_includes/custom/after_footer.html b/source/_includes/custom/after_footer.html index 059b593..cb1277b 100644 --- a/source/_includes/custom/after_footer.html +++ b/source/_includes/custom/after_footer.html @@ -1,4 +1,5 @@ - - \ No newline at end of file + + + \ No newline at end of file diff --git a/source/images/fancybox/blank.gif b/source/images/fancybox/blank.gif new file mode 100644 index 0000000..35d42e8 Binary files /dev/null and b/source/images/fancybox/blank.gif differ diff --git a/source/images/fancybox/fancybox_loading.gif b/source/images/fancybox/fancybox_loading.gif new file mode 100644 index 0000000..641a269 Binary files /dev/null and b/source/images/fancybox/fancybox_loading.gif differ diff --git a/source/images/fancybox/fancybox_sprite.png b/source/images/fancybox/fancybox_sprite.png new file mode 100644 index 0000000..ae59713 Binary files /dev/null and b/source/images/fancybox/fancybox_sprite.png differ diff --git a/source/javascripts/caption.js b/source/javascripts/caption.js index 271c428..70614b1 100644 --- a/source/javascripts/caption.js +++ b/source/javascripts/caption.js @@ -1,9 +1,15 @@ (function($){ - $('.entry img').each(function(){ - var alt = $(this).attr('alt'); + $('.entry').each(function(i){ + var _i = i; + $(this).find('img').each(function(){ + var alt = $(this).attr('alt'); - if (alt != ''){ - $(this).after(''+alt+''); - } + if (alt != ''){ + $(this).after(''+alt+'').wrap(''); + } else { + $(this).wrap(''); + } + }); }); + $('.fancybox').fancybox(); })(jQuery); \ No newline at end of file diff --git a/source/javascripts/jquery.fancybox.pack.js b/source/javascripts/jquery.fancybox.pack.js new file mode 100644 index 0000000..ff34249 --- /dev/null +++ b/source/javascripts/jquery.fancybox.pack.js @@ -0,0 +1,32 @@ +/*! fancyBox v2.0.4 fancyapps.com | fancyapps.com/fancybox/#license */ +(function(u,q,e){var l=e(u),r=e(q),a=e.fancybox=function(){a.open.apply(this,arguments)},s=!1,t=null;e.extend(a,{version:"2.0.4",defaults:{padding:15,margin:20,width:800,height:600,minWidth:200,minHeight:200,maxWidth:9999,maxHeight:9999,autoSize:!0,fitToView:!0,aspectRatio:!1,topRatio:0.5,fixed:!e.browser.msie||6
',image:'',iframe:'',swf:'', +error:'

The requested content cannot be loaded.
Please try again later.

',closeBtn:'
',next:'',prev:''},openEffect:"fade",openSpeed:250,openEasing:"swing",openOpacity:!0,openMethod:"zoomIn",closeEffect:"fade",closeSpeed:250,closeEasing:"swing",closeOpacity:!0,closeMethod:"zoomOut", +nextEffect:"elastic",nextSpeed:300,nextEasing:"swing",nextMethod:"changeIn",prevEffect:"elastic",prevSpeed:300,prevEasing:"swing",prevMethod:"changeOut",helpers:{overlay:{speedIn:0,speedOut:300,opacity:0.8,css:{cursor:"pointer"},closeClick:!0},title:{type:"float"}}},group:{},opts:{},coming:null,current:null,isOpen:!1,isOpened:!1,wrap:null,outer:null,inner:null,player:{timer:null,isActive:!1},ajaxLoad:null,imgPreload:null,transitions:{},helpers:{},open:function(b,c){e.isArray(b)||(b=[b]);if(b.length)a.close(!0), +a.opts=e.extend(!0,{},a.defaults,c),a.group=b,a._start(a.opts.index||0)},cancel:function(){if(!(a.coming&&!1===a.trigger("onCancel"))&&(a.coming=null,a.hideLoading(),a.ajaxLoad&&a.ajaxLoad.abort(),a.ajaxLoad=null,a.imgPreload))a.imgPreload.onload=a.imgPreload.onabort=a.imgPreload.onerror=null},close:function(b){a.cancel();if(a.current&&!1!==a.trigger("beforeClose"))a.unbindEvents(),!a.isOpen||b&&!0===b[0]?(e(".fancybox-wrap").stop().trigger("onReset").remove(),a._afterZoomOut()):(a.isOpen=a.isOpened= +!1,e(".fancybox-item").remove(),a.wrap.stop(!0).removeClass("fancybox-opened"),a.inner.css("overflow","hidden"),a.transitions[a.current.closeMethod]())},play:function(b){var c=function(){clearTimeout(a.player.timer)},d=function(){c();if(a.current&&a.player.isActive)a.player.timer=setTimeout(a.next,a.current.playSpeed)},g=function(){c();e("body").unbind(".player");a.player.isActive=!1;a.trigger("onPlayEnd")};if(a.player.isActive||b&&!1===b[0])g();else if(a.current&&(a.current.loop||a.current.index< +a.group.length-1))a.player.isActive=!0,e("body").bind({"afterShow.player onUpdate.player":d,"onCancel.player beforeClose.player":g,"beforeLoad.player":c}),d(),a.trigger("onPlayStart")},next:function(){a.current&&a.jumpto(a.current.index+1)},prev:function(){a.current&&a.jumpto(a.current.index-1)},jumpto:function(b){a.current&&(b=parseInt(b,10),1=a.group.length?b=0:0>b&&(b=a.group.length-1)),"undefined"!==typeof a.group[b]&&(a.cancel(),a._start(b)))},reposition:function(b){a.isOpen&& +a.wrap.css(a._getPosition(b))},update:function(){a.isOpen&&(s||(t=setInterval(function(){if(s&&(s=!1,clearTimeout(t),a.current)){if(a.current.autoSize)a.inner.height("auto"),a.current.height=a.inner.height();a._setDimension();a.current.canGrow&&a.inner.height("auto");a.reposition();a.trigger("onUpdate")}},100)),s=!0)},toggle:function(){if(a.isOpen)a.current.fitToView=!a.current.fitToView,a.update()},hideLoading:function(){e("#fancybox-loading").remove()},showLoading:function(){a.hideLoading();e('
').click(a.cancel).appendTo("body")}, +getViewport:function(){return{x:l.scrollLeft(),y:l.scrollTop(),w:l.width(),h:l.height()}},unbindEvents:function(){a.wrap&&a.wrap.unbind(".fb");r.unbind(".fb");l.unbind(".fb")},bindEvents:function(){var b=a.current,c=b.keys;b&&(l.bind("resize.fb, orientationchange.fb",a.update),c&&r.bind("keydown.fb",function(b){var g;if(!b.ctrlKey&&!b.altKey&&!b.shiftKey&&!b.metaKey&&0>e.inArray(b.target.tagName.toLowerCase(),["input","textarea","select","button"]))g=b.keyCode,-1').appendTo(e("body")).append(b),d.width=c.outerWidth(),d.height=c.outerHeight(!0),b=c.contents().detach(),c.remove();break;case "image":b=d.tpl.image.replace("{href}", +d.href);d.aspectRatio=!0;break;case "swf":b=d.tpl.swf.replace(/\{width\}/g,d.width).replace(/\{height\}/g,d.height).replace(/\{href\}/g,d.href);break;case "iframe":b=d.tpl.iframe.replace("{href}",d.href).replace("{scrolling}",d.scrolling).replace("{rnd}",(new Date).getTime())}if(-1o&&(h=o,j=(h-i)/l+i),j>m&&(j=m,h=(j-i)*l+i),ho||k>m)for(;(h>o||k>m)&&h>n&&k>p;)j-=10,g.aspectRatio?(h=Math.round((j-i)*l+i),hp&&jf.w||k>f.h)&&h>n&&j>p)g.canShrink=!0;b=k-i;a.innerSpace=b-d.height();a.outerSpace=b- +c.height()},_getPosition:function(b){var c=a.current,d=a.getViewport(),e=c.margin,f=a.wrap.width()+e[1]+e[3],k=a.wrap.height()+e[0]+e[2],i={position:"absolute",top:e[0]+d.y,left:e[3]+d.x};if(c.fixed&&(!b||!1===b[0])&&k<=d.h&&f<=d.w)i={position:"fixed",top:e[0],left:e[3]};i.top=Math.ceil(Math.max(i.top,i.top+(d.h-k)*c.topRatio))+"px";i.left=Math.ceil(Math.max(i.left,i.left+0.5*(d.w-f)))+"px";return i},_afterZoomIn:function(){var b=a.current;a.isOpen=a.isOpened=!0;a.wrap.addClass("fancybox-opened").css("overflow", +"visible");a.update();a.inner.css("overflow","auto"===b.scrolling?"auto":"yes"===b.scrolling?"scroll":"hidden");if(b.closeClick||b.nextClick)a.inner.css("cursor","pointer").bind("click.fb",b.nextClick?a.next:a.close);b.closeBtn&&e(b.tpl.closeBtn).appendTo(a.wrap).bind("click.fb",a.close);b.arrows&&1c.end&&(d=1-d),e-=a.innerSpace*d,f-=a.outerSpace*d),a.inner[c.prop](e),a.outer[c.prop](f)},zoomIn:function(){var b=a.wrap,c=a.current,d,g;d=c.dim;if("elastic"===c.openEffect){g=e.extend({}, +d,a._getPosition(!0));delete g.position;d=this.getOrigPosition();if(c.openOpacity)d.opacity=0,g.opacity=1;b.css(d).show().animate(g,{duration:c.openSpeed,easing:c.openEasing,step:this.step,complete:a._afterZoomIn})}else b.css(e.extend({},d,a._getPosition())),"fade"===c.openEffect?b.fadeIn(c.openSpeed,a._afterZoomIn):(b.show(),a._afterZoomIn())},zoomOut:function(){var b=a.wrap,c=a.current,d;if("elastic"===c.closeEffect){"fixed"===b.css("position")&&b.css(a._getPosition(!0));d=this.getOrigPosition(); +if(c.closeOpacity)d.opacity=0;b.animate(d,{duration:c.closeSpeed,easing:c.closeEasing,step:this.step,complete:a._afterZoomOut})}else b.fadeOut("fade"===c.closeEffect?c.closeSpeed:0,a._afterZoomOut)},changeIn:function(){var b=a.wrap,c=a.current,d;"elastic"===c.nextEffect?(d=a._getPosition(!0),d.opacity=0,d.top=parseInt(d.top,10)-200+"px",b.css(d).show().animate({opacity:1,top:"+=200px"},{duration:c.nextSpeed,complete:a._afterZoomIn})):(b.css(a._getPosition()),"fade"===c.nextEffect?b.hide().fadeIn(c.nextSpeed, +a._afterZoomIn):(b.show(),a._afterZoomIn()))},changeOut:function(){var b=a.wrap,c=a.current,d=function(){e(this).trigger("onReset").remove()};b.removeClass("fancybox-opened");"elastic"===c.prevEffect?b.animate({opacity:0,top:"+=200px"},{duration:c.prevSpeed,complete:d}):b.fadeOut("fade"===c.prevEffect?c.prevSpeed:0,d)}};a.helpers.overlay={overlay:null,update:function(){var a,c;this.overlay.width(0).height(0);e.browser.msie?(a=Math.max(q.documentElement.scrollWidth,q.body.scrollWidth),c=Math.max(q.documentElement.offsetWidth, +q.body.offsetWidth),a=a').css(b.css||{background:"black"}).appendTo("body"),this.update(),b.closeClick&&this.overlay.bind("click.fb",a.close),l.bind("resize.fb",e.proxy(this.update,this)),this.overlay.fadeTo(b.speedIn||"fast",b.opacity||1)},onUpdate:function(){this.update()},afterClose:function(a){this.overlay&&this.overlay.fadeOut(a.speedOut|| +"fast",function(){e(this).remove()});this.overlay=null}};a.helpers.title={beforeShow:function(b){var c;if(c=a.current.title)c=e('
'+c+"
").appendTo("body"),"float"===b.type&&(c.width(c.width()),c.wrapInner(''),a.current.margin[2]+=Math.abs(parseInt(c.css("margin-bottom"),10))),c.appendTo("over"===b.type?a.inner:"outside"===b.type?a.wrap:a.outer)}};e.fn.fancybox=function(b){function c(b){var c=[],i,h=this.rel; +if(!b.ctrlKey&&!b.altKey&&!b.shiftKey&&!b.metaKey)b.preventDefault(),b=e(this).data("fancybox-group"),"undefined"!==typeof b?i=b?"data-fancybox-group":!1:h&&""!==h&&"nofollow"!==h&&(b=h,i="rel"),i&&(c=g.length?e(g).filter("["+i+'="'+b+'"]'):e("["+i+'="'+b+'"]')),c.length?(d.index=c.index(this),a.open(c.get(),d)):a.open(this,d)}var d=b||{},g=this.selector||"";g?r.undelegate(g,"click.fb-start").delegate(g,"click.fb-start",c):e(this).unbind("click.fb-start").bind("click.fb-start",c);return this}})(window, +document,jQuery); \ No newline at end of file -- cgit v1.1-2-g2b99