Use lightbox to preview images

Js/css/image files from https://github.com/lokesh/lightbox2

_includes/lightbox-img.html

+<a href="{{site.baseurl}}/assets/{{include.img_name}}" data-lightbox="lightbox" data-title="{{include.img_alt}}">
+    ![{{include.img_alt}}]({{site.baseurl}}/assets/{{include.img_name}})
+</a>

_includes/scripts.html

 	<script src="{{ "/static/javascripts/vendor/custom.modernizr.js" | prepend: site.baseurl }}"></script>			 
 	<script src="{{ "/static/javascripts/vendor/jquery.js" | prepend: site.baseurl }}"></script>			 
 	<script src="{{ "/static/javascripts/retina.js" | prepend: site.baseurl }}"></script>			 
+	<script src="{{ "/static/javascripts/lightbox.min.js" | prepend: site.baseurl}}"></script> 
 	<script src="{{ "/static/javascripts/common.js" | prepend: site.baseurl}}"></script>			 
 
  <script type="text/javascript">

_posts/2013-02-11-we-are-happy-to-announce-that-synnefo_11.md

@@ -23,7 +23,7 @@ An obvious choice would be to use a distributed filesystem running over commodit
 So, we decided to test RADOS, since we had already been following the progress of [Ceph](http://ceph.com/) from mid 2010. For the VM disks part, we implemented RBD support inside Ganeti and merged it into the official upstream. Starting with version 2.6, Ganeti supports instance disks on RADOS out of the box. It uses the RBD kernel driver and the RBD tools to do that. Furthermore, we implemented a RADOS backend driver for our Storage service. We chose not to go with [RadosGW](http://ceph.com/docs/master/radosgw/) since we already had in production a storage frontend that implemented the OpenStack Object Storage API and also allowed for more advanced features such as deduplication via content hashing, file sharing among users etc.  
 By late 2011, we had it all up and running for testing. The architecture looked like this:
 
-![Synnefo Architecture]({{ "/assets/synnefo_arch.png" | prepend: site.baseurl }})
+{% include lightbox-img.html img_name="synnefo_arch.png" img_alt="Synnefo Archipelago" %}
 
 The above made two things possible:  
 a) it enabled selection of the storage type for VMs, either RBD or DRBD, as an option for Synnefo end users, and  
@@ -44,7 +44,7 @@ To integrate with Ganeti, we stopped using Ganeti's native RBD support to talk t
 
 To integrate with RADOS, we implemented a RADOS driver for Archipelago. Finally, by late 2012 we had the code completed and have been testing it ever since. The architecture now looks like this:
 
-![Archipelago]({{ "/assets/synnefo_arch1.png" | prepend: site.baseurl }})
+{% include lightbox-img.html img_name="synnefo_arch1.png" img_alt="Synnefo Archipelago" %}
 
 
 After 3 months of stress testing, we are now in the process of moving everything into [~okeanos production](http://okeanos.grnet.gr/), which is running more than 2700 active VMs for more than 1900 users, at the time of this writing.
@@ -53,4 +53,4 @@ For the impatient, the new feature is already up and running on our free trial d
 So, [create a free trial account](https://accounts.demo.synnefo.org/ui/login) and choose the "Archipelago" disk option when creating your new VM. You will see it coming up in seconds, thinly!  
 Backed by RADOS :)
 
-Enjoy!
\ No newline at end of file
+Enjoy!

_posts/2013-03-15-synnefo-plugin-for-thunderbird.md

@@ -10,8 +10,7 @@ blogger_id: tag:blogger.com,1999:blog-8518489485419439663.post-45269367466593887
 blogger_orig_url: http://synnefo-software.blogspot.com/2013/03/synnefo-plugin-for-thunderbird.html
 ---
 
-
-![Filelink plugin]({{ "/assets/okeanos-filelink-plugin-1.png" | prepend: site.baseurl }})<!--break-->
+{% include lightbox-img.html img_name="okeanos-filelink-plugin-1.png" img_alt="Filelink plugin" %}
 
 Starting in version 13, [Thunderbird](https://www.mozilla.org/EN/thunderbird/) added support for online storage services through  [Filelink](https://support.mozillamessaging.com/en-US/kb/filelink-large-attachments). It allows you to upload attachments to an online storage service and then replaces the attachment in the message with a link. Filelink can be configured to use many of the well known storage services out there and it can now be configured to support Synnefo deployments, too.
 
@@ -19,4 +18,5 @@ We created the [~okeanos filelink plugin](https://addons.mozilla.org/addon/~okea
 
 Feel free to clone its [code](https://github.com/grnet/okeanos-filelink.git) and create your own Thunderbird plugin by only changing the endpoint URLs. You can then use it with your Synnefo powered cloud service. 
 
-![Filelink plugin]({{ "/assets/okeanos-filelink-plugin-2.png" | prepend: site.baseurl }})
+
+{% include lightbox-img.html img_name="okeanos-filelink-plugin-2.png" img_alt="Filelink plugin" %}

_posts/2013-04-05-objpool-introducing-generic-pooling-in.md

@@ -67,7 +67,7 @@ We created a [generic object pool class](https://github.com/grnet/objpool/blob/d
 
 Here's a diagram of the pooling we have currently deployed:
 
-![pooling]({{ "/assets/synnefo1.png" | prepend: site.baseurl }})
+{% include lightbox-img.html img_name="synnefo1.png" img_alt="Pooling" %}
 
 As you can see there are quite a few places for pooling, and it's nice we have them all covered with minimal effort.
 
@@ -110,4 +110,4 @@ We have released the generic pooling class as open source. It may prove to be as
 `deb http://apt2.dev.grnet.gr stable/`  
 `deb-src http://apt2.dev.grnet.gr stable/`  
 
-The code is already in action in our production and in our free trial service: [demo.synnefo.org](http://demo.synnefo.org).
\ No newline at end of file
+The code is already in action in our production and in our free trial service: [demo.synnefo.org](http://demo.synnefo.org).

_posts/2013-04-23-synnefo-services-and-rest-apis.md

@@ -21,12 +21,12 @@ Synnefo has three (3) basic components that provide all its Services. These comp
 
 Synnefo exposes the OpenStack APIs for most of its operations. Also, extensions have been written for advanced operations wherever needed, and minor changes for things that were missing or change frequently. Specifically:
 
-![Synnefo API]({{ "/assets/synnefo_api.png" | prepend: site.baseurl }})
+{% include lightbox-img.html img_name="synnefo_api.png" img_alt="Synnefo API" %}
 
 The following diagram shows the layered approach of Synnefo and the various APIs for each Service. The corresponding Synnefo component that implements each Service also appears in the diagram:
 
-![Synnefo layers]({{ "/assets/synnefo_layers_all.png" | prepend: site.baseurl }})
+{% include lightbox-img.html img_name="synnefo_layers_all.png" img_alt="Synnefo layers" %}
 
 As shown above, the Synnefo Web UI is a standalone Javascript client that speaks the Synnefo APIs. There is also an intuitive command line client called [kamaki](http://www.synnefo.org/docs/kamaki/latest/index.html), that speaks the APIs and can be used to access Synnefo. Furthermore, one can use the kamaki library for programmatic access.
 
-To learn more about the APIs, please take a look at the detailed [Developer's Guide](http://www.synnefo.org/docs/synnefo/latest/dev-guide.html). If you want to learn more about the Synnefo architecture, please take a look at the [official documentation](http://www.synnefo.org/docs).
\ No newline at end of file
+To learn more about the APIs, please take a look at the detailed [Developer's Guide](http://www.synnefo.org/docs/synnefo/latest/dev-guide.html). If you want to learn more about the Synnefo architecture, please take a look at the [official documentation](http://www.synnefo.org/docs).

_posts/2014-02-26-synnefo-architecture.md

@@ -16,12 +16,11 @@ Hello everybody,
 On a [previous post](/2013/04/23/synnefo-services-and-rest-apis/), almost a year ago, we described the services and REST APIs of Synnefo.  <!--break-->
 Today, we have 2 new diagrams that show Synnefo's layered approach and overall architecture in more detail. First, we extended the diagram from the previous post that presented the zoom-out view, to include all layers from the hypervisor up to the clients (Web UI or command line). We also updated the API layer to reflect the complete OpenStack compatibility that has been included in the latest version. We have now fully integrated Neutron, Cinder and Keystone  along with the previously implemented Nova, Glance and Swift:
 
-![Synnefo Architecture]({{ "/assets/synnefo_architecture1.png" | prepend: site.baseurl }})
+{% include lightbox-img.html img_name="synnefo_architecture1.png" img_alt="Synnefo Architecture" %}
 
 The second diagram is created from scratch and zooms in to unveil the whole internal Synnefo architecture, showing all Synnefo components and the interconnections between them:
 
-![Synnefo Architecture]({{ "/assets/synnefo_architecture2.png" | prepend: site.baseurl }})
-
+{% include lightbox-img.html img_name="synnefo_architecture2.png" img_alt="Synnefo Architecture" %}
 
 Note that in the left part (Compute/Network) the cloud layer (Synnefo) interacts with the cluster layer (Ganeti clusters) only via HTTP in the effect path and only via AMQP in the update path. The cluster layer does not access any DB, allowing us to scale linearly by adding new nodes on a Ganeti cluster or new Ganeti clusters altogether, even in geographically distinct locations. 
 
@@ -35,4 +34,4 @@ Just to give you a preview on what's coming next, along with many new features,
 
 So, hope you find the above interesting and hope the diagrams help everybody to understand the Synnefo architecture a little better.  
 Thanks,  
-Constantinos
\ No newline at end of file
+Constantinos

features.md

@@ -48,7 +48,11 @@ sections:
 <ul class="small-block-grid-1 large-block-grid-2 screenshot-links">
 {% for s in page.sections %}
     <li>
-		<a href="{{ s.url | prepend: site.baseurl}}"><span>&nbsp;</span><img src="{{ s.img | prepend:'/assets/' | prepend: site.baseurl}}" alt="{{ s.alt }}"></a>
+
+        <a href="{{site.baseurl}}/assets/{{s.img}}" data-lightbox="lightbox" data-title="{{s.alt}}">
+            <span>&nbsp;</span>
+            <img src="{{site.baseurl}}/assets/{{s.img}}" alt="{{s.alt}}">
+        </a>
         <p>{{ s.text }}</p>
     </li>
 {% endfor %}

static/javascripts/lightbox.min.js

+/**
+ * Lightbox v2.7.1
+ * by Lokesh Dhakar - http://lokeshdhakar.com/projects/lightbox2/
+ *
+ * @license http://creativecommons.org/licenses/by/2.5/
+ * - Free for use in both personal and commercial projects
+ * - Attribution requires leaving author name, author link, and the license info intact
+ */
+(function(){var a=jQuery,b=function(){function a(){this.fadeDuration=500,this.fitImagesInViewport=!0,this.resizeDuration=700,this.positionFromTop=50,this.showImageNumberLabel=!0,this.alwaysShowNavOnTouchDevices=!1,this.wrapAround=!1}return a.prototype.albumLabel=function(a,b){return"Image "+a+" of "+b},a}(),c=function(){function b(a){this.options=a,this.album=[],this.currentImageIndex=void 0,this.init()}return b.prototype.init=function(){this.enable(),this.build()},b.prototype.enable=function(){var b=this;a("body").on("click","a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]",function(c){return b.start(a(c.currentTarget)),!1})},b.prototype.build=function(){var b=this;a("<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>").appendTo(a("body")),this.$lightbox=a("#lightbox"),this.$overlay=a("#lightboxOverlay"),this.$outerContainer=this.$lightbox.find(".lb-outerContainer"),this.$container=this.$lightbox.find(".lb-container"),this.containerTopPadding=parseInt(this.$container.css("padding-top"),10),this.containerRightPadding=parseInt(this.$container.css("padding-right"),10),this.containerBottomPadding=parseInt(this.$container.css("padding-bottom"),10),this.containerLeftPadding=parseInt(this.$container.css("padding-left"),10),this.$overlay.hide().on("click",function(){return b.end(),!1}),this.$lightbox.hide().on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$outerContainer.on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$lightbox.find(".lb-prev").on("click",function(){return b.changeImage(0===b.currentImageIndex?b.album.length-1:b.currentImageIndex-1),!1}),this.$lightbox.find(".lb-next").on("click",function(){return b.changeImage(b.currentImageIndex===b.album.length-1?0:b.currentImageIndex+1),!1}),this.$lightbox.find(".lb-loader, .lb-close").on("click",function(){return b.end(),!1})},b.prototype.start=function(b){function c(a){d.album.push({link:a.attr("href"),title:a.attr("data-title")||a.attr("title")})}var d=this,e=a(window);e.on("resize",a.proxy(this.sizeOverlay,this)),a("select, object, embed").css({visibility:"hidden"}),this.sizeOverlay(),this.album=[];var f,g=0,h=b.attr("data-lightbox");if(h){f=a(b.prop("tagName")+'[data-lightbox="'+h+'"]');for(var i=0;i<f.length;i=++i)c(a(f[i])),f[i]===b[0]&&(g=i)}else if("lightbox"===b.attr("rel"))c(b);else{f=a(b.prop("tagName")+'[rel="'+b.attr("rel")+'"]');for(var j=0;j<f.length;j=++j)c(a(f[j])),f[j]===b[0]&&(g=j)}var k=e.scrollTop()+this.options.positionFromTop,l=e.scrollLeft();this.$lightbox.css({top:k+"px",left:l+"px"}).fadeIn(this.options.fadeDuration),this.changeImage(g)},b.prototype.changeImage=function(b){var c=this;this.disableKeyboardNav();var d=this.$lightbox.find(".lb-image");this.$overlay.fadeIn(this.options.fadeDuration),a(".lb-loader").fadeIn("slow"),this.$lightbox.find(".lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption").hide(),this.$outerContainer.addClass("animating");var e=new Image;e.onload=function(){var f,g,h,i,j,k,l;d.attr("src",c.album[b].link),f=a(e),d.width(e.width),d.height(e.height),c.options.fitImagesInViewport&&(l=a(window).width(),k=a(window).height(),j=l-c.containerLeftPadding-c.containerRightPadding-20,i=k-c.containerTopPadding-c.containerBottomPadding-120,(e.width>j||e.height>i)&&(e.width/j>e.height/i?(h=j,g=parseInt(e.height/(e.width/h),10),d.width(h),d.height(g)):(g=i,h=parseInt(e.width/(e.height/g),10),d.width(h),d.height(g)))),c.sizeContainer(d.width(),d.height())},e.src=this.album[b].link,this.currentImageIndex=b},b.prototype.sizeOverlay=function(){this.$overlay.width(a(window).width()).height(a(document).height())},b.prototype.sizeContainer=function(a,b){function c(){d.$lightbox.find(".lb-dataContainer").width(g),d.$lightbox.find(".lb-prevLink").height(h),d.$lightbox.find(".lb-nextLink").height(h),d.showImage()}var d=this,e=this.$outerContainer.outerWidth(),f=this.$outerContainer.outerHeight(),g=a+this.containerLeftPadding+this.containerRightPadding,h=b+this.containerTopPadding+this.containerBottomPadding;e!==g||f!==h?this.$outerContainer.animate({width:g,height:h},this.options.resizeDuration,"swing",function(){c()}):c()},b.prototype.showImage=function(){this.$lightbox.find(".lb-loader").hide(),this.$lightbox.find(".lb-image").fadeIn("slow"),this.updateNav(),this.updateDetails(),this.preloadNeighboringImages(),this.enableKeyboardNav()},b.prototype.updateNav=function(){var a=!1;try{document.createEvent("TouchEvent"),a=this.options.alwaysShowNavOnTouchDevices?!0:!1}catch(b){}this.$lightbox.find(".lb-nav").show(),this.album.length>1&&(this.options.wrapAround?(a&&this.$lightbox.find(".lb-prev, .lb-next").css("opacity","1"),this.$lightbox.find(".lb-prev, .lb-next").show()):(this.currentImageIndex>0&&(this.$lightbox.find(".lb-prev").show(),a&&this.$lightbox.find(".lb-prev").css("opacity","1")),this.currentImageIndex<this.album.length-1&&(this.$lightbox.find(".lb-next").show(),a&&this.$lightbox.find(".lb-next").css("opacity","1"))))},b.prototype.updateDetails=function(){var b=this;"undefined"!=typeof this.album[this.currentImageIndex].title&&""!==this.album[this.currentImageIndex].title&&this.$lightbox.find(".lb-caption").html(this.album[this.currentImageIndex].title).fadeIn("fast").find("a").on("click",function(){location.href=a(this).attr("href")}),this.album.length>1&&this.options.showImageNumberLabel?this.$lightbox.find(".lb-number").text(this.options.albumLabel(this.currentImageIndex+1,this.album.length)).fadeIn("fast"):this.$lightbox.find(".lb-number").hide(),this.$outerContainer.removeClass("animating"),this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration,function(){return b.sizeOverlay()})},b.prototype.preloadNeighboringImages=function(){if(this.album.length>this.currentImageIndex+1){var a=new Image;a.src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){var b=new Image;b.src=this.album[this.currentImageIndex-1].link}},b.prototype.enableKeyboardNav=function(){a(document).on("keyup.keyboard",a.proxy(this.keyboardAction,this))},b.prototype.disableKeyboardNav=function(){a(document).off(".keyboard")},b.prototype.keyboardAction=function(a){var b=27,c=37,d=39,e=a.keyCode,f=String.fromCharCode(e).toLowerCase();e===b||f.match(/x|o|c/)?this.end():"p"===f||e===c?0!==this.currentImageIndex?this.changeImage(this.currentImageIndex-1):this.options.wrapAround&&this.album.length>1&&this.changeImage(this.album.length-1):("n"===f||e===d)&&(this.currentImageIndex!==this.album.length-1?this.changeImage(this.currentImageIndex+1):this.options.wrapAround&&this.album.length>1&&this.changeImage(0))},b.prototype.end=function(){this.disableKeyboardNav(),a(window).off("resize",this.sizeOverlay),this.$lightbox.fadeOut(this.options.fadeDuration),this.$overlay.fadeOut(this.options.fadeDuration),a("select, object, embed").css({visibility:"visible"})},b}();a(function(){{var a=new b;new c(a)}})}).call(this);
+//# sourceMappingURL=lightbox.min.map
\ No newline at end of file

static/sass/_app.scss

@@ -6,3 +6,4 @@
 @import "homepage";
 @import "content";
 @import "footer";
+@import "lightbox";

static/sass/_content.scss

@@ -251,7 +251,8 @@ pre     {
     text-align: center;
 }
 
-.screenshot-links a {
+a[data-lightbox]{
+
     position: relative;
     display:block;
     cursor: default;
@@ -267,7 +268,8 @@ pre     {
         background:url(../images/eye.png) no-repeat center center;
     }
 }
-.screenshot-links a:hover{
+
+a[data-lightbox]:hover{
     @media #{$small}{ 
         cursor: pointer;
         span {

static/sass/_lightbox.scss

+/* Preload images */
+body:after {
+  content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);
+  display: none;
+}
+
+.lightboxOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  background-color: black;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+  opacity: 0.8;
+  display: none;
+}
+
+.lightbox {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: 10000;
+  text-align: center;
+  line-height: 0;
+  font-weight: normal;
+}
+
+.lightbox .lb-image {
+  display: block;
+  height: auto;
+  max-width: inherit;
+}
+
+.lightbox a images {
+  border: none;
+}
+
+.lb-outerContainer {
+  position: relative;
+  background-color: white;
+  *zoom: 1;
+  width: 250px;
+  height: 250px;
+  margin: 0 auto;
+}
+
+.lb-outerContainer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.lb-container {
+  padding: 4px;
+}
+
+.lb-loader {
+  position: absolute;
+  top: 43%;
+  left: 0;
+  height: 25%;
+  width: 100%;
+  text-align: center;
+  line-height: 0;
+}
+
+.lb-cancel {
+  display: block;
+  width: 32px;
+  height: 32px;
+  margin: 0 auto;
+  background: url(../images/loading.gif) no-repeat;
+}
+
+.lb-nav {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 10;
+}
+
+.lb-container > .nav {
+  left: 0;
+}
+
+.lb-nav a {
+  outline: none;
+  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
+}
+
+.lb-prev, .lb-next {
+  height: 100%;
+  cursor: pointer;
+  display: block;
+}
+
+.lb-nav a.lb-prev {
+  width: 34%;
+  left: 0;
+  float: left;
+  background: url(../images/prev.png) left 48% no-repeat;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition: opacity 0.6s;
+  -moz-transition: opacity 0.6s;
+  -o-transition: opacity 0.6s;
+  transition: opacity 0.6s;
+}
+
+.lb-nav a.lb-prev:hover {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+
+.lb-nav a.lb-next {
+  width: 64%;
+  right: 0;
+  float: right;
+  background: url(../images/next.png) right 48% no-repeat;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  opacity: 0;
+  -webkit-transition: opacity 0.6s;
+  -moz-transition: opacity 0.6s;
+  -o-transition: opacity 0.6s;
+  transition: opacity 0.6s;
+}
+
+.lb-nav a.lb-next:hover {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}
+
+.lb-dataContainer {
+  margin: 0 auto;
+  padding-top: 5px;
+  *zoom: 1;
+  width: 100%;
+}
+
+.lb-dataContainer:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.lb-data {
+  padding: 0 4px;
+  color: #ccc;
+}
+
+.lb-data .lb-details {
+  width: 85%;
+  float: left;
+  text-align: left;
+  line-height: 1.1em;
+}
+
+.lb-data .lb-caption {
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 1em;
+}
+
+.lb-data .lb-number {
+  display: block;
+  clear: left;
+  padding-bottom: 1em;
+  font-size: 12px;
+  color: #999999;
+}
+
+.lb-data .lb-close {
+  display: block;
+  float: right;
+  width: 30px;
+  height: 30px;
+  background: url(../images/close.png) top right no-repeat;
+  text-align: right;
+  outline: none;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+  opacity: 0.7;
+  -webkit-transition: opacity 0.2s;
+  -moz-transition: opacity 0.2s;
+  -o-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+}
+
+.lb-data .lb-close:hover {
+  cursor: pointer;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  opacity: 1;
+}