Refactored galleries using the jquery-collagePlus plugin

build/client/main.js

@@ -10,6 +10,10 @@ require('codemirror/mode/xml/xml');
 require('codemirror/mode/htmlmixed/htmlmixed');
 require('./cm-skin-mode');
 
+require('jquery-collagePlus/jquery.collagePlus');
+require('jquery-collagePlus/extras/jquery.collageCaption');
+require('jquery-collagePlus/extras/jquery.removeWhitespace');
+
 $(function() {
 
   setLayoutMode();

build/client/main.less

@@ -3,3 +3,20 @@
 @import "node_modules/uikit/themes/almost-flat/form-password";
 
 @import (inline) "node_modules/codemirror/lib/codemirror.css";
+
+.av-gallery {
+   .av-gallery-wrapper {
+      opacity: 0;
+   }
+   img {
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+      vertical-align: bottom;
+      opacity: 1;
+   }
+   .Caption_Content {
+      color: #fff;
+      padding: 10px;
+   }
+}

code/Image/$Image.skin

@@ -18,6 +18,11 @@
    </td>
 </tr>
 
+<% #tagged %>
+<div class='av-gallery-wrapper' data-caption='<% image.description default=<% image.fileName %> %>'>
+   <% image.render | image.link %>
+</div>
+
 <% #edit %>
 <h1>
    <% response.title %>

code/Story/$Story.skin

@@ -37,6 +37,9 @@ else
    <% story.skin Story#permalink %>
 %>
 
+<% #tagged %>
+<% story.skin Story#preview %>
+
 <% #search %>
 <dt><% this.abstract | this.link %></dt>
 <dd>Posted <% this.created text %> by <% this.creator %>.</dd>

code/Tag/$Tag.skin

@@ -14,13 +14,37 @@
 <% if <% tag.permission edit %> is true then
    <% tag.skin $Tag#controls prefix=<div> suffix="</div><br />" %>
 %>
-<div class="pagelink">
-   <% list.prevLink text=<% gettext "Previous page" %> prefix='<div class="pagelinkTop">... ' suffix="</div>" %>
-</div>
-<% list.render skin="$TagHub#main" %>
-<div class="pagelink">
-   <% list.nextLink text=<% gettext "Next page" %> prefix='<div class="pagelinkBottom">... ' suffix="</div>" %>
+<%  %>
+<div class='av-gallery'>
+   <% list.render skin="$TagHub#main" %>
 </div>
+<ul class='uk-pagination uk-text-left'>
+  <% list.prevLink text="<i class='uk-icon-arrow-left'></i>" prefix=<li> suffix=</li> default="<li class='uk-disabled'><span><i class='uk-icon-arrow-left'></i></span></li>" %>
+  <% list.nextLink text="<i class='uk-icon-arrow-right'></i>" prefix=<li> suffix=</li> default="<li class='uk-disabled'><span><i class='uk-icon-arrow-right'></i></span></li>" %>
+</ul>
+<script type='text/javascript'>
+(function () {
+   $(function() {
+      var resizeTimer = null;
+      $('.av-gallery').collageCaption();
+      $(window).bind('resize', function() {
+         $('.av-gallery-wrapper').css('opacity', 0);
+         if (resizeTimer) clearTimeout(resizeTimer);
+         resizeTimer = setTimeout(collage, 200);
+      });
+
+   });
+
+   collage();
+
+   function collage() {
+      $('.av-gallery').removeWhitespace().collagePlus({
+         allowPartialLastRow: true,
+         fadeSpeed: 'slow'
+      });
+   }
+})();
+</script>
 
 <% #admin %>
 <tr>

code/TagHub/$TagHub.skin

@@ -1,3 +1,3 @@
 <% #main %>
-<% taghub.tagged.skin <% taghub.tagged.type suffix='#date' %> %>
-<% taghub.tagged.skin <% taghub.tagged.type suffix="#preview" %> %>
+<% taghub.tagged.skin <% taghub.tagged.type prefix=$ suffix='#date' %> %>
+<% taghub.tagged.skin <% taghub.tagged.type prefix=$ suffix="#tagged" %> %>

package.json

@@ -18,7 +18,8 @@
   "author": "The Ant Queens",
   "license": "Apache 2",
   "napa": {
-    "uikit-bower": "uikit/bower-uikit#2.15.0"
+    "uikit-bower": "uikit/bower-uikit#2.15.0",
+    "jquery-collagePlus": "ed-lea/jquery-collagePlus#0.3.3"
   },
   "browserify-css": {
     "minify": true