Display navigation arrows for image gallery block (Bug 1246933)

Change-Id: Ia606ff452d027882c1f4bd9acb969c6105948207
Signed-off-by: Son Nguyen <son.nguyen@catalyst.net.nz>

htdocs/artefact/file/blocktype/gallery/js/slideshow.js

@@ -7,29 +7,32 @@ function Slideshow(id, count) {
         if (to == this.current || to < 0 || to > this.count) {
             return false;
         }
-        $j(this.id).height($j(this.id + " img:eq(" + this.current + ")").height());
+        $j(this.id).height($j(this.id + " img:eq(" + this.current + ")").height() + 10);
         $j(this.id + " img:eq(" + this.current + ")").fadeOut(500, function() {
             self.current = to;
             $j(self.id + " img:eq(" + self.current + ")").fadeIn(500);
             $j(self.id).height($j(self.id + " img:eq(" + self.current + ")").height() + 10);
         });
         $j(this.id + ' td.control span').removeClass('disabled');
-        $j(this.id + ' td.control span.first').addClass('hidden');
         if (to == 0) {
             $j(this.id + ' td.control span.prev').addClass('disabled');
+            $j(this.id + ' td.control span.first').addClass('disabled');
         }
         else if (to == this.count) {
             $j(this.id + ' td.control span.next').addClass('disabled');
-            $j(this.id + ' td.control span.first').removeClass('hidden');
+            $j(this.id + ' td.control span.last').addClass('disabled');
         }
         return false;
     }
     $j(this.id + ' td.control span.next').click(function() {return self.change(self.current + 1);});
     $j(this.id + ' td.control span.prev').click(function() {return self.change(self.current - 1);});
     $j(this.id + ' td.control span.first').click(function() {return self.change(0);});
-    // $j(this.id + ' td.control span.last').click(function() {return self.change(self.count);});
+    $j(this.id + ' td.control span.last').click(function() {return self.change(self.count);});
     $j(this.id + " img").hide();
     $j(this.id + " img:eq(" + this.current + ")").show();
-    $j(this.id + ' td.control span.next').removeClass('disabled');
+    if (this.current < this.count) {
+        $j(this.id + ' td.control span.next').removeClass('disabled');
+        $j(this.id + ' td.control span.last').removeClass('disabled');
+    }
 }
 

htdocs/artefact/file/blocktype/gallery/theme/raw/slideshow.tpl

@@ -3,8 +3,8 @@
     <table class="images fullwidth">
     <tr>
     <td class="control">
-        <span class="first hidden">&laquo;</span>
         <span class="prev disabled">&lsaquo;</span>
+        <span class="first disabled">&laquo;</span>
     </td>
     <td>
     {foreach from=$images item=image name=images}
@@ -13,7 +13,7 @@
     </td>
     <td class="control">
         <span class="next disabled">&rsaquo;</span>
-        {*<span class="last">&raquo;</span>*}
+        <span class="last disabled">&raquo;</span>
     </td>
     </tr>
     </table>

htdocs/theme/views.css

@@ -1006,6 +1006,7 @@ td.incomplete {
 .slideshow .control {
     font-size: 3em;
     width: 20px;
+    line-height: 90%;
 }
 .slideshow .control .disabled:hover,
 .slideshow .control .disabled {