add slide widget

app/assets/javascripts/theater-widget.js

@@ -0,0 +1,527 @@
+var GalleryTheaterWidget = function(widget){
+  var parent_divs = widget,
+      parent_div_z_index = parent_divs.eq(parent_divs.length-1).css('z-index')
+  parent_divs.eq(parent_divs.length-1).css('z-index','2000')
+  var gt = this,
+      currentPic = {},
+      windowHeight = 0,
+      windowWidth = 0,
+      swipeController = null,
+      resizing = null;
+      loadingInterval = null,
+      mainPicLoading = 0,
+      nextPicLoading = 0,
+      prevPicLoading = 0,
+      currentSwipeImageDom = null,
+      currentSwipeImageDomLeftPos = 0,
+      windowScreenThresholdForTouch = 0,
+      loadingProcess = 0;
+      gt.stage = null;
+      gt.stripNextBtn = null;
+      gt.stripPrevBtn = null;
+      gt.thumbToggle = null;
+      gt.descriptionToggle = null;
+      gt.closeBtn = null;
+      gt.imageContainer = null;
+      gt.albumData = {};
+      gt.loader = null;
+      gt.thumbStrip = null;
+      gt.descriptionArea = null;
+      gt.isTheaterInitialized = false;
+
+  var play_flag = false;
+  var button_left_string = '<button id ="theaterPreviousButton" class="theaterButton">< </button>',
+      button_right_string = '<button id ="theaterNextButton" class="theaterButton">> </button>',
+      button_play_string = '<button id ="theaterPlayButton" class="theaterButton">▶ </button>',
+      button_stop_string = '<button id ="theaterStopButton" class="theaterButton">|| </button>',
+      playtimeoutID;
+  var initialize = function(){
+    gt.stage = widget.find('#gallery-theater-stage');
+    gt.closeBtn = gt.stage.find(".gallery-close");
+    gt.switchBtn = gt.stage.find(".gallery-theme-switch");
+    gt.imageContainer = gt.stage.find(".image-container");
+    gt.thumbStrip = gt.stage.find(".gallery-thumb-wrap");
+    gt.thumbToggle = gt.stage.find(".gallery-thumb-toggle");
+    gt.loader = gt.stage.find(".gallery-loader");
+    gt.stripNextBtn = gt.stage.find(".gallery-thumb-next");
+    gt.stripPrevBtn = gt.stage.find(".gallery-thumb-prev");
+    gt.descriptionArea = gt.stage.find(".gallery-img-desc");
+    gt.descriptionToggle = gt.stage.find(".gallery-toggle-desc");
+    windowScreenThresholdForTouch = windowWidth / 3;
+    startLoading();
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    var addButton = function () {
+      widget.find('.theaterButton').remove();
+      if (!play_flag){
+        $(button_left_string+button_play_string+button_right_string).insertAfter(widget.find('img.gal-active'));
+      }
+      else{
+        $(button_left_string+button_stop_string+button_right_string).insertAfter(widget.find('img.gal-active'));
+      }
+      if (!widget.find(".gal-prev").length) { widget.find('#theaterPreviousButton').remove(); }
+      if (!widget.find(".gal-next").length) { widget.find('#theaterNextButton').remove(); }
+
+      widget.find('#theaterPreviousButton').click(function () {
+        gt.previousPic();
+        addButton()
+      });
+      widget.find('#theaterNextButton').click(function () {
+        gt.nextPic();
+        addButton()
+      });
+      widget.find('#theaterPlayButton').click(function () {
+        play_flag = true;
+        playtimeoutID = window.setInterval(function(){
+          gt.playallPic();
+        },3000)
+        addButton()
+      });
+      widget.find('#theaterStopButton').click(function () {
+        play_flag = false;
+        addButton()
+        window.clearInterval(playtimeoutID)
+      });
+    }
+    bindHandler();
+    gt.createTheater();
+    
+    addButton();
+
+  }
+
+  var bindHandler = function(){
+    // handler to close the theater
+    gt.closeBtn.on("click",gt.destroyTheater);
+
+    // handler to show theater
+    widget.find("div[data-list=images] a").on("click",function(){
+      gt.createTheater();
+      return false;
+    })
+
+     gt.switchBtn.on("click",gt.switchTheme);
+     gt.descriptionToggle.on("click", gt.toggleDescription)
+     gt.stripPrevBtn.on("click", gt.scrollStripRight);
+     gt.stripNextBtn.on("click", gt.scrollStripLeft);
+
+     if(Modernizr.touch){
+      gt.imageContainer.swipe({
+        swipe : function(event, direction, distance, duration, fingerCount){
+          if(direction == "left"){
+            gt.nextPic();
+          }else if(direction == "right"){
+            gt.previousPic();
+          }
+        }
+      })
+      gt.thumbToggle.swipe({
+        swipe : function(event, direction, distance, duration, fingerCount){
+          if(direction == "up"){
+            gt.thumbStrip.parent().addClass("show");
+            gt.thumbToggle.addClass("up");
+            gt.thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
+          }else if(direction == "down"){
+            gt.thumbStrip.parent().removeClass("show");
+            gt.thumbToggle.removeClass("up");
+            gt.thumbToggle.find("i").removeClass("fa-angle-double-down").addClass("fa-angle-double-up");
+          }
+        }
+      })
+     }
+
+     //handler for window resize
+     $(window).resize(function(){
+       clearTimeout(resizing);
+       resizing = setTimeout(doneResizing,1000);
+     })
+  }
+
+  var bindKeyHandlers = function(){
+    if(!Modernizr.touch){
+      widget.on("click",".gal-active", gt.nextPic);
+      widget.on("click",".gal-prev", gt.previousPic);
+      widget.on("click",".gal-next", gt.nextPic);
+      $(document).on("keyup",function(e){
+        switch(e.keyCode){
+          case 39:
+            gt.nextPic();
+            break;
+          case 37:
+            gt.previousPic();
+            break;
+          case 27:
+            gt.destroyTheater();
+          break;
+        }
+       })
+    }
+  }
+
+
+  var doneResizing = function(){
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    setThumbNavs();
+  }
+
+  var unBindKeyHandlers = function(){
+    $(document).unbind("keyup");
+  }
+
+  gt.destroyTheater = function(){
+    parent_divs.eq(parent_divs.length-1).css('z-index',parent_div_z_index)
+    gt.stage.hide();
+    widget.removeClass("gallery-mode-on");
+    gt.imageContainer.empty()
+    unBindKeyHandlers();
+  }
+
+  gt.createTheater = function(){
+    gt.stage.show();
+    widget.addClass("gallery-mode-on");
+    bindKeyHandlers();
+	  gt.isTheaterInitialized = false;
+    gt.albumData = {}
+    gt.albumData.images = $.map(widget.find('img.gallery-thumb'),function(v){
+     var url = $(v).attr('data-link'),
+         theater_url = $(v).attr('data-theater-url'),
+         thumb_url = $(v).attr('src')
+     return {'url': url, 
+              'file': {'theater': {url: theater_url},
+                       'thumb': {url: thumb_url}
+                      }
+            }
+    })
+    var cp =  gt.albumData.images[0];
+    currentPic = {"image" : cp, "index" : 0};
+    createThumbStrip();
+
+	  currentPic = currentPic;
+  }
+
+  gt.hasNextImage = function(){
+    return (currentPic.index + 1) <= (gt.albumData.images.length - 1);
+  }
+
+  gt.hasPreviousImage = function(){
+    return (currentPic.index > 0);
+  }
+
+  gt.nextPic = function(){
+    if(loadingProcess == 0){
+      if(gt.hasNextImage()){
+        startLoading();
+        currentPic.image = gt.albumData.images[currentPic.index + 1];
+        currentPic.index = currentPic.index + 1;
+        setMainPic("next");
+      }
+    }
+  }
+  gt.playallPic = function(){
+    if(loadingProcess == 0){
+      mainPicLoading = 1;
+      nextPicLoading = 1;
+      prevPicLoading = 1;
+      if(gt.hasNextImage()){
+        currentPic.image = gt.albumData.images[currentPic.index + 1];
+        currentPic.index = currentPic.index + 1;
+        setMainPic("next");
+      }
+      else{
+        currentPic.image = gt.albumData.images[0];
+        currentPic.index = 0;
+        setMainPic();
+        gt.isTheaterInitialized = false;
+        setTimeout(function(){
+          loadingProcess = 0;
+          nextPicLoading = 0;
+          widget.find('.theaterButton').remove()
+          widget.find("img.gallery-image.gal-prev.gal-inactive").remove();
+          img = widget.find("img.gallery-image.gal-active");
+          img.eq(0).remove();
+        },100)
+      }
+    }
+  }
+
+
+   gt.previousPic = function(){
+    if(loadingProcess == 0){
+      if(gt.hasPreviousImage()) {
+        startLoading();
+        currentPic.image = gt.albumData.images[currentPic.index - 1];
+        currentPic.index = currentPic.index - 1;
+        setMainPic("prev");
+      }
+    }
+   }
+
+   gt.scrollStripLeft = function(){
+      pixels_to_move = parseInt(gt.thumbStrip.css("left")) - (66 * 3);
+      maximum_pixels = (windowWidth / 2) - (66 * (gt.albumData.images.length - 1));
+      if(pixels_to_move < maximum_pixels){
+        pixels_to_move = maximum_pixels;
+      }
+      gt.thumbStrip.css("left",pixels_to_move + "px");
+   }
+
+    gt.scrollStripRight = function(){
+      pixels_to_move = parseInt(gt.thumbStrip.css("left")) + (66 * 3);
+      maximum_pixels = (windowWidth / 2);
+      if(pixels_to_move > maximum_pixels){
+        pixels_to_move = maximum_pixels;
+      }
+      gt.thumbStrip.css("left",pixels_to_move + "px");
+   }
+
+
+   gt.switchTheme = function(){
+     var themeWhiteKlass = "theme-white",
+          nightKlass = "fa fa-circle",
+          dayKlass = "fa fa-circle-o",
+          $body = widget;
+
+      if (!gt.switchBtn.hasClass(themeWhiteKlass)) {
+        gt.switchBtn
+          .addClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", dayKlass);
+
+        $body.addClass(themeWhiteKlass);
+
+      } else {
+        gt.switchBtn
+          .removeClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", nightKlass);
+
+        $body.removeClass(themeWhiteKlass);
+
+      }
+   }
+
+   gt.toggleDescription = function(){
+    $(this).toggleClass("active");
+     gt.descriptionArea.toggleClass("active");
+   }
+
+   var startLoading = function(){
+    loadingProcess = 1;
+    mainPicLoading = 0;
+    nextPicLoading = 0;
+    prevPicLoading = 0;
+    gt.loader.show();
+    loadingInterval = setInterval(stopLoading, 300);
+
+   }
+
+   var stopLoading = function(){
+    if(mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1){
+      clearInterval(loadingInterval);
+      setTimeout(function(){
+        loadingProcess = 0;
+        gt.loader.hide();
+      },100)
+    }
+   }
+
+  var createThumbStrip = function(){
+    if(!gt.isTheaterInitialized){
+      gt.thumbStrip.html('')
+      $.each(gt.albumData.images,function(index, image){
+        var li = $("<li class='gallery-item'></li>"),
+            a = $("<a style=\"cursor: pointer;\"></a>"),
+            img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
+          a.on("click",function(){ 
+            startLoading();
+            var old_index = currentPic.index;
+            currentPic.image = gt.albumData.images[index];
+            currentPic.index = index;
+            if(old_index > index){
+              setMainPic("prev",true);
+            }else if(old_index < index){
+              setMainPic("next",true);
+            }
+            return false;
+          })
+          
+          img.attr("src",image.file.thumb.url);
+          img.attr("alt",image.alt_title);
+          li.attr("data-index",index);
+          a.append(img);
+          li.append(a);
+          gt.thumbStrip.append(li);
+      })
+      setThumbNavs();
+    }
+    setMainPic();
+  }
+
+
+  var setThumbNavs = function() {
+    var $thumbNav = gt.stage.find('.gallery-thumb-navs'),
+        $thumb = gt.thumbStrip.find('img'),
+        thumbs = $thumb.length,
+        thumbWidth = $thumb.eq(0).width(),
+        thumbGap = parseInt($thumb.closest('li').css('margin-right'), 10),
+        widthSum = (thumbWidth + thumbGap) * thumbs,
+        margin = widthSum * 0.1,
+        totalWidth = widthSum + margin;
+
+    if (windowWidth < totalWidth) {
+      $thumbNav.addClass('show');
+    }else{
+      $thumbNav.removeClass('show');
+    }
+  };
+  function one_load(img){
+    if (img[0].complete){
+      setTimeout(loaded(img),100)
+    }else{
+      setTimeout(one_load,20)
+    }
+  }
+  function loaded(img){
+    calculateHeight(img);
+    mainPicLoading = 1;
+    img.fadeIn(100);
+  }
+  window.setMainPic = function(direction,selectedFromStrip){
+    var img = null;
+    widget.find('div.gallery-show-original a').eq(0).attr('href',currentPic.image.url)
+    if(direction == null){
+      img = $("<img class='gallery-image gal-active'>");
+      img.hide();
+      img.attr("src", currentPic.image.file.theater.url);
+      gt.imageContainer.append(img);
+      img.one("load", function(){
+        one_load(img)
+      })
+      gt.isTheaterInitialized = true;
+    }else{
+      img =  gt.imageContainer.find(".gal-active");
+      if(selectedFromStrip){
+        gt.imageContainer.find(".gal-" + direction).attr("src",currentPic.image.file.theater.url);  
+      }
+      if(direction == "next"){
+        gt.imageContainer.find(".gal-prev").remove();
+        img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
+        gt.imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
+        gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) - 66) + "px");
+      }else if(direction == "prev"){
+        gt.imageContainer.find(".gal-next").remove();
+        img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
+        gt.imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
+        gt.thumbStrip.css("left",(parseInt(gt.thumbStrip.css("left")) + 66) + "px");
+      }
+      mainPicLoading = 1;
+    }
+    gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>");
+    if(currentPic.image.description == null){
+      gt.descriptionArea.addClass("hide");
+    }else{
+      gt.descriptionArea.removeClass("hide");
+    }
+    if (direction!=null){
+      calculateHeight(gt.imageContainer.find(".gal-active"));
+    }
+    gt.thumbStrip.find("li.active").removeClass("active");
+    gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
+
+    setStripToCenter();
+    setNextPic();
+    setPrevPic();
+  }
+
+  var calculateHeight = function(img){
+    var h = 0,
+        w = 0,
+        new_width = 0;
+    if(!Modernizr.touch){
+      if(typeof currentPic.image.height == "undefined"){
+        h = img.height();
+        currentPic.image.height = h;
+        w = img.width();
+        currentPic.image.width = w;
+      }else{
+        h = currentPic.image.height;
+        w = currentPic.image.width;
+      }
+    }else{
+      h = img.height();
+      w = img.width();
+    }
+    if(h > (windowHeight - 150)){
+      new_width = Math.round((windowHeight - 100) * w / h);
+      new_width = (new_width / windowWidth) * 100;
+      img.width(new_width + "%");
+    }else{
+      if(windowWidth < 770){
+        img.width("90%");
+      }else{
+        img.width("65%");
+      }
+    }
+    if (typeof set_gallery_height != 'undefined'){
+      set_gallery_height(widget)
+    }
+  }
+
+  var setStripToCenter = function(){
+    left = (windowWidth / 2) - (66 * currentPic.index);
+    gt.thumbStrip.css("left",left + "px");
+  }
+
+  var setNextPic = function(){
+    gt.imageContainer.find(".gal-next.temp").remove()
+    if(gt.hasNextImage()) {
+      var obj = gt.albumData.images[currentPic.index + 1],
+          nextImg = $("<img class='gallery-image gal-next gal-inactive'>");
+      nextImg.attr("src",obj.file.theater.url);
+      nextImg.hide();
+      gt.imageContainer.append(nextImg);
+      nextImg.on("load",function(){
+        calculateHeight(nextImg);
+        nextPicLoading = 1;
+        nextImg.fadeIn(100);
+      })
+    }else{
+      nextPicLoading = 1;
+    }
+  }
+
+  var setPrevPic = function(){
+    gt.imageContainer.find(".gal-prev.temp").remove()
+    if(gt.hasPreviousImage()) {
+      var obj = gt.albumData.images[currentPic.index - 1],
+          prevImg = $("<img class='gallery-image gal-prev gal-inactive'>");
+      prevImg.attr("src",obj.file.theater.url);
+      prevImg.hide();
+      gt.imageContainer.prepend(prevImg);
+      prevImg.on("load",function(){
+        calculateHeight(prevImg);
+        prevPicLoading = 1;
+        prevImg.fadeIn(100);
+      })
+    }else{
+      prevPicLoading = 1;
+    }
+  }
+
+  var l = function(x){
+    console.log(x)
+  }
+
+  initialize();
+}
+if (typeof bind_gallery_widget_slide == 'undefined'){
+  var bind_gallery_widget_slide = function(){
+    $('.widget-gallery.widget5').trigger('onload')
+  }
+  $(document).ready(function(){
+    bind_gallery_widget_slide()
+  })
+}
+
+// gallery-image gal-prev gal-inactive

app/controllers/galleries_controller.rb

@@ -126,7 +126,7 @@ class GalleriesController < ApplicationController
     params = OrbitHelper.params
     counts = OrbitHelper.widget_data_count
     images = AlbumImage.where({album_id:{"$in"=>album_ids}}).desc(:id).limit(counts *5).sample(counts)
-    images = images.collect do |a|
+    images = images.each_with_index.collect do |a,i|
       colors = album_color_map[a.album_id]
       alt_text = (a.description.nil? || a.description == "" ? "gallery image" : Nokogiri::HTML(a.description).text())
       {
@@ -141,7 +141,8 @@ class GalleriesController < ApplicationController
         "theater-src" => a.file.theater.url,
         "album-name" => a.album.name_translations[I18n.locale],
         "album_color" => iterate_data(colors[1],colors[0],@album_setting.album_card_background_color,'transparent'),
-        "album_card_text_color" => iterate_data(colors[2],@album_setting.album_card_text_color)
+        "album_card_text_color" => iterate_data(colors[2],@album_setting.album_card_text_color),
+        "i" => i
       }
     end
     {

app/views/galleries/show.html.erb

@@ -80,108 +80,6 @@
     set_gallery_height()
   })
 </script>
-<% elsif @layout_type==nil %>
-<div class="show-gallery-2 gallery" style="margin-top: 2.4em;">
-    <div class="gallery-loader" style="display: none;">
-      <div class="spinner">
-          <div class="rect1"></div>
-          <div class="rect2"></div>
-          <div class="rect3"></div>
-          <div class="rect4"></div>
-          <div class="rect5"></div>
-      </div>
-    </div>
-    <div class="gallery-actions">
-      <div class="gallery-show-original gallery-actions-btn">
-        <a title="在新視窗開啟 顯示原始圖片" href="/uploads/album_image/file/606574f19bb8189e640000ac/49b36_245.jpg"><i class="fa fa-image"></i></a>
-      </div>
-      <div class="gallery-toggle-desc gallery-actions-btn">
-        <i class="fa fa-comment"></i>
-      </div>
-      <div class="gallery-theme-switch gallery-actions-btn">
-        <i class="fa fa-circle"></i>
-      </div>
-       <div class="gallery-close gallery-actions-btn">
-         <i class="fa fa-times"></i>
-       </div>
-    </div>
-    <div class="image-container" id="image-container">
-      <img class="gallery-image gal-prev gal-inactive" src="/uploads/album_image/file/606574ea9bb8189e640000ab/theater_cbea4_249.jpg" style="display: inline;">
-      <img class="gallery-image gal-active" src="/uploads/album_image/file/606574f19bb8189e640000ac/theater_49b36_245.jpg" style="display: inline;">
-      <div class="theaterButtonGroup">
-        <button id="theaterPreviousButton" class="theaterButton">&lt; </button>
-        <button id="theaterPlayButton" class="theaterButton">▶ </button>
-        <button id="theaterNextButton" class="theaterButton">&gt; </button>
-      </div>
-      <img class="gallery-image gal-next gal-inactive" src="/uploads/album_image/file/606574f79bb8189e640000ad/theater_ab1d2_244.jpg" style="display: inline;">
-    </div>
-    <div class="gallery-thumb-toggle gallery-thumb-line">
-      <i class="fa fa-angle-double-up"></i>
-    </div>
-    <div class="gallery-thumb-container">
-        <div class="gallery-thumb-navs show">
-          <div class="gallery-thumb-prev gallery-thumb-nav">
-            <i class="fa fa-arrow-circle-o-left"></i> 
-          </div>
-          <div class="gallery-thumb-next gallery-thumb-nav">
-            <i class="fa fa-arrow-circle-o-right"></i> 
-          </div>
-        </div>
-        <ul class="gallery-thumb-wrap" style="left: -908.5px;">
-        <li class="gallery-item" data-index="0"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/6065746d9bb8189e64000096/thumb_d987b_258.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="1"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574769bb8189e64000097/thumb_2a046_257.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="2"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/6065747c9bb8189e64000098/thumb_5076d_256.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="3"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574849bb8189e64000099/thumb_d834a_255.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="4"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574889bb8189e6400009a/thumb_ea2df_254.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="5"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/6065748c9bb8189e6400009b/thumb_40bf9_253.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="6"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574909bb8189e6400009c/thumb_3a8bb_252.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="7"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574969bb8189e6400009d/thumb_4551b_251.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="8"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/6065749d9bb8189e6400009e/thumb_4f713_250.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="9"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574a39bb8189e6400009f/thumb_cbea4_249.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="10"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574a99bb8189e640000a0/thumb_49b36_245.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="11"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574af9bb8189e640000a1/thumb_ab1d2_244.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="12"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574b69bb8189e640000a2/thumb_d987b_258.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="13"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574be9bb8189e640000a3/thumb_2a046_257.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="14"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574c49bb8189e640000a4/thumb_5076d_256.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="15"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574cc9bb8189e640000a5/thumb_d834a_255.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="16"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574d09bb8189e640000a6/thumb_ea2df_254.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="17"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574d49bb8189e640000a7/thumb_40bf9_253.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="18"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574d89bb8189e640000a8/thumb_3a8bb_252.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="19"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574de9bb8189e640000a9/thumb_4551b_251.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="20"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574e59bb8189e640000aa/thumb_4f713_250.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="21"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574ea9bb8189e640000ab/thumb_cbea4_249.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item active" data-index="22"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574f19bb8189e640000ac/thumb_49b36_245.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li><li class="gallery-item" data-index="23"><a href=""><img class="gallery-thumb" src="/uploads/album_image/file/606574f79bb8189e640000ad/thumb_ab1d2_244.jpg" alt="<div class=&quot;mt-1&quot;>
-                  
-                </div>"></a></li></ul>
-    </div>
-    <div class="gallery-img-desc"><p></p><div class="mt-1">
-                  
-                </div><p></p></div>
-    </div>
 <% end %>
 <% OrbitHelper.render_css_in_head(["theater.css"]) %>
 <%= javascript_include_tag "jquery.touchSwipe.min" %>

modules/gallery/_gallery_widget5.html.erb

@@ -0,0 +1,75 @@
+<script type="text/javascript">
+  function set_gallery_height(widget){
+    var h = widget.find('.gallery-thumb-container').height()+widget.find('.gallery-image.gal-active').height()+widget.find('.gallery-actions').height()+widget.find('.theaterButton').height()+20
+    widget.find('.show-gallery-2.gallery').css('height',h)
+  }
+</script>
+<% OrbitHelper.render_css_in_head(["theater.css"]) %>
+<%= javascript_include_tag "jquery.touchSwipe.min" %>
+<%= javascript_include_tag "theater-widget" %>
+<% OrbitHelper.render_meta_tags([{"name" => "mobile-web-app-capable","content" => "yes"},{"name" => "apple-mobile-web-app-status-bar-style","content" => "black-translucent"}]) %>
+<div class="widget-gallery gallery widget5 no-print" onload="GalleryTheaterWidget($(this));$(window).resize(function(){set_gallery_height($(this))});">
+  <div id="gallery-theater-stage">
+    <div class="show-gallery-2 gallery" style="margin-top: 2.4em;">
+      <div class="gallery-loader">
+        <div class="spinner">
+            <div class="rect1"></div>
+            <div class="rect2"></div>
+            <div class="rect3"></div>
+            <div class="rect4"></div>
+            <div class="rect5"></div>
+        </div>
+      </div>
+      <div class="gallery-actions">
+        <div class="gallery-show-original gallery-actions-btn">
+          <a title="<%= t('gallery.show_original_image') %>" href="/uploads/album_image/file/606574f19bb8189e640000ac/49b36_245.jpg"><i class="fa fa-image"></i></a>
+        </div>
+        <div class="gallery-toggle-desc gallery-actions-btn">
+          <i class="fa fa-comment"></i>
+        </div>
+        <div class="gallery-theme-switch gallery-actions-btn">
+          <i class="fa fa-circle"></i>
+        </div>
+         <div class="gallery-close gallery-actions-btn">
+           <i class="fa fa-times"></i>
+         </div>
+      </div>
+      <div class="image-container" id="image-container">
+      </div>
+      <div class="gallery-thumb-toggle gallery-thumb-line">
+        <i class="fa fa-angle-double-up"></i>
+      </div>
+      <div class="gallery-thumb-container">
+          <div class="gallery-thumb-navs show">
+            <div class="gallery-thumb-prev gallery-thumb-nav">
+              <i class="fa fa-arrow-circle-o-left"></i> 
+            </div>
+            <div class="gallery-thumb-next gallery-thumb-nav">
+              <i class="fa fa-arrow-circle-o-right"></i> 
+            </div>
+          </div>
+          <ul class="gallery-thumb-wrap" data-level="0" data-list="images">
+            <li class="gallery-item" data-index="{{i}}">
+              <a style="cursor: pointer;">
+                <img class="gallery-thumb" src="{{thumb-src}}" data-theater-url="{{theater-src}}" data-link="{{src}}" alt="{{alt_title}}">
+              </a>
+            </li>
+          </ul>
+      </div>
+      <div class="gallery-img-desc">
+        <div class="gallery-img-desc-inner">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script type="text/javascript">
+if(typeof Modernizr == "undefined"){
+  var script = $("<script>");
+  script.attr("src","/assets/modernizr.js");
+  $("head").append(script);
+}
+
+</script>
+</div>

modules/gallery/info.json

@@ -73,6 +73,14 @@
                 "en" : "4. Card"
             },
             "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "gallery_widget5",
+            "name" : {
+                "zh_tw" : "5. 投影片式輪播",
+                "en" : "5. Slide"
+            },
+            "thumbnail" : "thumb.png"
         }
     ]
 }