Fix bug.

success furthor more and let show description tag can also work for image

README.rdoc

@@ -1,3 +1,6 @@
 = Gallery
 
 This project rocks and uses MIT-LICENSE.
+
+
+### 20190116 jason Join edit

app/assets/javascripts/gallery.js

@@ -1,3 +1,84 @@
+function rotate(){
+  $("#crop_div").dialog("open");
+}
+function change_degree(degree_change){
+  var degree_org = parseInt($('#show_degree').text())
+  degree_org+=degree_change
+  if (degree_org==360 || degree_org==-360){
+    degree_org = 0
+  }
+  $('#show_degree').text(degree_org)
+}
+function init_upload(temp_length){
+  var value = $("input[name='all_upload_length']")
+  if (value.val()==''){
+    value.val(temp_length)
+    $.ajax({
+      type : "post",
+      url : "/admin/galleries/init_upload",
+      dataType : "json",
+      data:{all_length: value.val()},
+      async: false,
+      global:false,
+      success: function()
+             {
+             },
+      error : function(data){
+        alert('init upload process failed, please try again later.')
+      }
+    });
+    if (value.val()=='1'){
+      value.val('')
+    }
+  }
+}
+function form_submit() {
+  var temp_length = $('#file-list').find('li.template-upload').length
+  init_upload(temp_length)
+  var length_upload
+  var count_upload
+  var send_start
+  if (temp_length>1){
+    $( 'form#fileupload' ).ajaxSuccess(function() {
+      if (typeof length_upload == "undefined"){
+        count_upload = 1
+        length_upload = $('#file-list').find('li.template-upload').length
+      }
+      else{
+        count_upload ++
+      }
+      if (count_upload === length_upload){
+        send_start = undefined
+        $.ajax({
+          url : "/admin/galleries/start_upload_process",
+          dataType : "json",
+          type : "post",
+          error: function(){
+            alert('init upload process failed, please try again later.')
+          },
+          success: function(){
+            window.location.href = '/admin/galleries/upload_process'
+          }
+        })
+        $.ajax({
+          url : "/admin/galleries/start_upload_process",
+          dataType : "json",
+                type : "post",
+          error: function(){
+            alert('init upload process failed, please try again later.')
+          },
+          success: function(){
+            window.location.href = '/admin/galleries/upload_process'
+          }
+        })
+      }
+    });
+  }
+}
+function form_only_one_submit() {
+    var temp_length = 1
+  init_upload(temp_length)
+}
 !function ($) {
   $.fn.checkListLength = function (param){
       _defaultSettings = {
@@ -7,13 +88,13 @@
       $this = this;
       $li = this.children('li');
       $dropzone = $('#dropzone');
-        if(($li.length - _set.onlyOne) == 0) {
+      if(($li.length - _set.onlyOne) === 0) {
       $('#dropzone').fadeIn(300);
   } else {
       $('#dropzone').fadeOut(300);
-		};
-		$('#file-list').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
   }
+  $('#file-list').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
+  };
 }(window.jQuery);
 
 $(function () {
@@ -21,7 +102,7 @@ $(function () {
   // Initialize the jQuery File Upload widget:
   if($('#fileupload').length){
     $('#fileupload').fileupload({
-	        maxFileSize: 5000000,
+        //maxFileSize: 5000000,=
         acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
         dropZone: $('#dropzone'),
         headers:{
@@ -30,19 +111,115 @@ $(function () {
     });
   }
 });
+Array.prototype.uniq = function(){
+  var attr = this
+  attr = $.grep(attr, function(v, k){
+      return $.inArray(v ,attr) === k;
+  });
+  return attr;
+}
+
+function batch_crop(){
+  var check_li = $('#imgholder').find("input[type='checkbox']:checked").parents('li');
+  var image_ids =[];
+  if (check_li.length>0){
+    check_li.each(function(){
+        image_ids.push($(this).data('image-id'));
+    });
+    if (navigator.onLine) {
+        window.location.href = '/admin/galleries/batch_crop?image_ids=' + image_ids.join(',') 
+    } else {
+        alert('Please connect the network and try again later!')
+    }
+  }else{
+      alert('Please select at least one')
+  }
+}
+function select_all() {
+  $('#imgholder').find("input[type='checkbox']:not(:checked)").trigger('click')
+}
+function translate(ele,pretext,text,return_flag){
+  var return_value
+  if (navigator.onLine) {
+    $.ajax({
+      url : "/admin/galleries/translate",
+      dataType : "json",
+      type : "post",
+      async: false,
+      data:{text:text},
+      success:function(data){
+        if (return_flag){
+          return_value = data.translate
+        }
+        else{
+          ele.html(pretext + data.translate)
+        }
+      },
+      error:function(){
+        var back = text.split('.')[1].split('_')
+        var result = []
+        for (i=0;i<back.length;i++){
+            result.push(back[i].charAt(0).toUpperCase() + back[i].slice(1))
+        }
+        if (return_flag){
+          return_value = result.join(' ')
+        }
+        else{
+            ele.html(pretext + result.join(' '))
+        }
+        alert('Your server has some problem, please try again later!')
+      }
+    })
+  } else {
+    var back = text.split('.')[1].split('_')
+    var result = []
+    for (i=0;i<back.length;i++){
+      result.push(back[i].charAt(0).toUpperCase() + back[i].slice(1))
+    }
+    if (return_flag){
+      return_value = result.join(' ')
+    }
+    else{
+      ele.html(pretext + result.join(' '))
+    }
+    alert('Please connect the network and try again later!')
+  }
+  if (return_flag){
+    return return_value
+  }
+}
 
 $(function() {
+  var config = {}
+  config.autoGrow_minHeight = 50;
+  config.allowedContent = false;
+  config.disallowedContent = 'img';
+  config.toolbar = [
+    { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
+    { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
+    
+    { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ] },
+    '/',
+    { name: 'insert', items: [ 'SpecialChar'] },
+    { name: 'styles', items: [ 'Font' ] },
+    { name: 'colors', items: [ 'TextColor', 'BGColor' ] }
+  ];
+
   var $container = $('.gallery'),
     $containerData = $container.data();
+  $container.data("order-edit","0");
+  $container.sortable({
+     disabled: true
+  });
   $container.imagesLoaded(function(){
     var $albumname = $('.albumname'),
     $img = $('.rgalbum img');
     $('.rgalbum > a').rsImg();
     if($containerData.galleryId == 'gallery') {
-			$container.masonry({
-				itemSelector : '.rgalbum',
-				isAnimated: true,
-			});
+      // $container.masonry({
+      //  itemSelector : '.rgalbum',
+      //  isAnimated: true,
+      // });
       $albumname.each(function(i) {
         var $albumblock = $(this).closest('a').height(),
           $H = $(this).outerHeight(true);
@@ -65,12 +242,28 @@ $(function() {
         };
       });
       $('#orbit_gallery').delegate('.icons-tag', clickEvent, function(){
-				$(this).parents('.gallery_info').nextAll('.albumtag').slideToggle(300, function() {
-					$container.masonry({
-						itemSelector : '.rgalbum',
-						isAnimated: true,
-					});
+        var tmp = $(this).parents('.rgalbum').eq(0)
+        var now_this = $(this)
+        if (tmp.find('.albumtag').eq(0).find('li.label').length == 0){
+          var ele_id = tmp.attr('data-image-id')
+          $.ajax({
+            type : "post",
+            url : "/admin/galleries/get_tag",
+            dataType : "text",
+            data:{ele_id: ele_id},
+            global:false,
+            success: function(data)
+                   {
+                    tmp.find('.albumtag').eq(0).html(data)
+                    now_this.parents('.gallery_info').nextAll('.albumtag').slideToggle(300);
+                   },
+            error : function(data){
+              alert('init process failed, please try again later.')
+            }
           });
+        }else{
+          $(this).parents('.gallery_info').nextAll('.albumtag').slideToggle(300);
+        }
       });
     };
   });
@@ -83,18 +276,34 @@ $(function() {
           })[0];
     switch($e.attr("for")){
       case "description":
-				if(obj.description){
-					instance.find("textarea").each(function(){
-						if(obj.description[$(this).attr("for")])
-							$(this).val(obj.description[$(this).attr("for")]);
+        instance.find(".description-editor").each(function(){
+          var locale = $(this).attr("for")
+          $(this).html(obj.description ? obj.description[locale] : '');
+          CKEDITOR.replace(this,config);
         })
         
-				}
+        instance.find(".title-editor").each(function(){
+          var locale = $(this).attr("for")
+          $(this).html(obj.title ? obj.title[locale] : '');
+          CKEDITOR.replace(this,config);
+        })
+        instance.find("a[data-toggle=\"tab\"],div[role=\"tabpanel\"]").each(function(){
+          $(this).attr('id',$(this).attr('id').replace('-fake',''))
+        })
         instance.find("input[type=hidden]").val(image_id);
         instance.find("form").bind("ajax:success",function(evt, data, status){
           $.pageslide.close();
           photosData = data;
         })
+        instance.find('.btn-group a[data-toggle="tab"]').click(function(){
+          $(this).tab('show');
+          $(this).parents('.btn-group').eq(0).children('a[data-toggle="tab"]').removeClass('active in');
+          $(this).addClass('active in')
+          var inst = $($(this).attr('href')).find('textarea')
+          window.setTimeout(function(){
+            CKEDITOR.instances[inst.attr('name')].execCommand('autogrow')
+          },300)
+        })
         break;
       case "tags":
         instance.find('.tags-groups').cardCheck({
@@ -112,7 +321,6 @@ $(function() {
             checkboxes.each(function(){
               tag_ids.push($(this).val());
             })          
-    				
             $.post("/admin/galleries/image_tagging",{"image_ids":image_ids,"tag_ids":tag_ids},function(json){
               $.pageslide.close();
               photosData = json;
@@ -147,14 +355,12 @@ $(function() {
 
   if($("#imgholder").length){
       $('.open').pageslide({
+        W: '40vw',
         loadComplete: function(instance,elem) {
           bindEvent(instance,elem);
         }
       })
   }
-	
-	
-
   $("#imgholder").on(clickEvent, '.photo_cover', function(event) {
     var image_id = $(this).closest(".rgalbum").data("image-id"),
       album_id = $("#imgholder").data("gallery-id"),
@@ -202,7 +408,7 @@ $(function() {
   $('#imgholder').on(clickEvent, '.checkbox', function() {
     $(this).prop('checked') ? $(this).closest('.rgalbum').addClass('active') : $(this).closest('.rgalbum').removeClass('active');
     var checkLength = $("#imgholder .rgalbum.active");
-		checkLength.length ? $('.deletephoto, .deselect, .addtags').removeClass('hide') : $('.deletephoto, .deselect, .addtags').addClass('hide');
+    checkLength.length ? $('.deletephoto, .deselect, .addtags, .crop').removeClass('hide') : $('.deletephoto, .deselect, .addtags, .crop').addClass('hide');
   });
   $('.deselect').on(clickEvent, function(event) {
     $('.rgalbum').removeClass('active');
@@ -215,19 +421,60 @@ $(function() {
     $('.rgalbum').removeClass('active');
     $('.deletephoto, .deselect, .addtags').removeClass('hide')
   });
+  var images_order = [];
+  $("#edit-order-btn").on("click",function(){
+    var el = $(this);
+    if($container.data("order-edit") == "0"){
+      $container.sortable("enable");
+      $(".order-edit-notification").slideDown();
+      images_order = $container.sortable( "toArray", { attribute: "data-image-id" });
+      images_order = images_order.uniq();
+      $container.data("order-edit","1");
+      translate(el,'','gallery.save_order',false)
+    }else{
+      var temp = $container.sortable( "toArray", { attribute: "data-image-id" }),
+        type = $container.attr("id");
+        temp = temp.uniq()
+      if(images_order.toString() != temp.toString()){
+        $.ajax({
+          url : "/admin/galleries/order",
+          data : {"imageids" : temp, "type" : type},
+          type : "post",
+          dataType : "json"
+        })
+      }
+      $(".order-edit-notification").slideUp();
+      $container.sortable("disable");
+      $container.data("order-edit","0");
+      translate(el,'','gallery.edit_order',false)
+    }
+    return false;
+  })
 
     // 
+
+    var last_image_id = null;
   $('.add-imgs').on({
     click: function() {
       $('#fileupload').slideToggle(300, function() {
         if(!$(this).is(':hidden')) {
-					$('.add-imgs').html('<i class="icons-cross-2"></i> Close panel');
+            translate($('.add-imgs'),'<i class="icons-cross-2"></i> ','gallery.close_panel',false)
           $('.rgbody').stop(true, false).animate({'padding-bottom': 280}, 300);
+          $("#edit-order-btn").hide();
+          $.ajax({
+            url : "/admin/galleries/last_image_id",
+            data : {"albumid" : $("#fileupload_aid").val()},
+            dataType : "json",
+            type : "get"
+          }).done(function(d){
+            last_image_id = d.last_image_id;
+          })
         } else {
-					$('.add-imgs').html('<i class="icons-plus"></i> Add Image');
+            translate($('.add-imgs'),'<i class="icons-plus"></i> ','gallery.add_image',false)
           $('.files').empty()
           $('#file-list').checkListLength();
           $('.rgbody').stop(true, false).animate({'padding-bottom': 0}, 300);
+          $("#edit-order-btn").show();
           fetchNewImages();
         };
       });
@@ -235,22 +482,22 @@ $(function() {
     }
   });
   var fetchNewImages = function(){
-		var lastid = ( $("li.rgalbum:last").length ? $("li.rgalbum:last").data("image-id") : null),
-			albumid = $("#fileupload_aid").val();
+    var albumid = $("#fileupload_aid").val();
       
     $.getJSON('/admin/galleries/get_photoData_json?id='+albumid, function(json, textStatus) {
       photosData = json;
     });
 
     $.ajax({
-			url : "/admin/new_images",
-			data : {"last_image_id" : lastid, "album_id" : albumid},
+      url : "/admin/galleries/new_images",
+      data : {"last_image_id" : last_image_id, "album_id" : albumid},
       success : function(data){
         var $e = $(data);
         $imgs = $e.find("img");
-				$("#imgholder").append($e);
+        $("#imgholder").prepend($e);
         $os = $e.find("a.open");
         $os.pageslide({
+          W: '40vw',
           loadComplete: function(instance,elem) {
             bindEvent(instance,elem);
           }
@@ -259,5 +506,43 @@ $(function() {
     })
 
   }
+  var buttons_option={}
+  var op_fn1 = function() { 
+    var check_img = $('#imgholder').find("input[type='checkbox']:checked").parents('li').find('img');
+    check_img.each(function(){
+            check_img.css('transform','rotate('+$('#show_degree').text()+'deg)');
+        });
+  }
+  var op_fn2 = function() { 
+    var confirm_msg = translate('','','gallery.confirm_msg',true)
+    if ( confirm (confirm_msg) ){
+      var check_li = $('#imgholder').find("input[type='checkbox']:checked").parents('li');
+      var image_ids =[];
+      check_li.each(function(){
+              image_ids.push($(this).data('image-id'));
+          });
+          if (navigator.onLine) {
+              window.location.href = '/admin/galleries/rotate_images?image_ids=' + image_ids.join(',') +'&rotate_angle=' + $('#show_degree').text()
+          } else {
+              alert('Please connect the network and try again later!')
+          }
+          console.log(image_ids)
+      $(this).dialog("close"); 
+    }
+    
+  }
+  var op_fn3 = function() { $(this).dialog("close"); }
+  var op1 = translate('','','gallery.review',true)
+  var op2 = translate('','','gallery.rotate',true)
+  var op3 = translate('','','gallery.close_panel',true)
+  buttons_option[op1] = op_fn1
+  buttons_option[op2] = op_fn2
+  buttons_option[op3] = op_fn3
+  $("#crop_div").dialog({
+        autoOpen: false,
+        show: "blind",
+        hide: "explode",
+        buttons: buttons_option
+    });
 });
 

app/assets/javascripts/galleryAPI.js.erb

@@ -17,7 +17,7 @@ var galleryAPI = function(){
 	this.loadTheater = function(id){
 		
 		g.loadstart();
-		var imageArray;
+		var imageArray = [];
 		var imagecount = 0;
 		var picHeight = 0;
 		var bindHandlers = function(){
@@ -255,8 +255,9 @@ var galleryAPI = function(){
 		
 		var preparestage = function(albumid){
 			$.getJSON("../galleries/"+albumid+"/imgs",function(album){
-				imageArray = eval(album.images);
+				// imageArray = eval(album.images);
 				$.each(album.images,function(i,image){
+					imageArray.push(image)
 					if(image._id == id)
 						imagecount = i;
 				})

app/assets/javascripts/galleryAPI_frontend.js.erb

@@ -4,6 +4,7 @@ $.extend($.expr[':'], {
 		return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
 	}
 });
+
 var galleryAPI = function(){
 	g = this;
 	this.urlVars = rcom.getUrlVars();

app/assets/javascripts/jquery-cropper.js

@@ -0,0 +1,75 @@
+/*!
+ * jQuery Cropper v1.0.0
+ * https://github.com/fengyuanchen/jquery-cropper
+ *
+ * Copyright (c) 2018 Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2018-04-01T06:20:13.168Z
+ */
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery'), require('cropperjs')) :
+  typeof define === 'function' && define.amd ? define(['jquery', 'cropperjs'], factory) :
+  (factory(global.jQuery,global.Cropper));
+}(this, (function ($,Cropper) { 'use strict';
+
+  $ = $ && $.hasOwnProperty('default') ? $['default'] : $;
+  Cropper = Cropper && Cropper.hasOwnProperty('default') ? Cropper['default'] : Cropper;
+
+  if ($.fn) {
+    var AnotherCropper = $.fn.cropper;
+    var NAMESPACE = 'cropper';
+
+    $.fn.cropper = function jQueryCropper(option) {
+      for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+
+      var result = void 0;
+
+      this.each(function (i, element) {
+        var $element = $(element);
+        var isDestroy = option === 'destroy';
+        var cropper = $element.data(NAMESPACE);
+
+        if (!cropper) {
+          if (isDestroy) {
+            return;
+          }
+
+          var options = $.extend({}, $element.data(), $.isPlainObject(option) && option);
+
+          cropper = new Cropper(element, options);
+          $element.data(NAMESPACE, cropper);
+        }
+
+        if (typeof option === 'string') {
+          var fn = cropper[option];
+
+          if ($.isFunction(fn)) {
+            result = fn.apply(cropper, args);
+
+            if (result === cropper) {
+              result = undefined;
+            }
+
+            if (isDestroy) {
+              $element.removeData(NAMESPACE);
+            }
+          }
+        }
+      });
+
+      return result !== undefined ? result : this;
+    };
+
+    $.fn.cropper.Constructor = Cropper;
+    $.fn.cropper.setDefaults = Cropper.setDefaults;
+    $.fn.cropper.noConflict = function noConflict() {
+      $.fn.cropper = AnotherCropper;
+      return this;
+    };
+  }
+
+})));

app/assets/javascripts/theater-widget.js

@@ -0,0 +1,549 @@
+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 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,
+        stage = null,
+        stripNextBtn = null,
+        stripPrevBtn = null,
+        thumbToggle = null,
+        descriptionToggle = null,
+        closeBtn = null,
+        switchBtn = null,
+        imageContainer = null,
+        albumData = {},
+        loader = null,
+        thumbStrip = null,
+        descriptionArea = null,
+        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() {
+        stage = widget.find('#gallery-theater-stage');
+        closeBtn = stage.find(".gallery-close");
+        switchBtn = stage.find(".gallery-theme-switch");
+        imageContainer = stage.find(".image-container");
+        thumbStrip = stage.find(".gallery-thumb-wrap");
+        thumbToggle = stage.find(".gallery-thumb-toggle");
+        loader = stage.find(".gallery-loader");
+        stripNextBtn = stage.find(".gallery-thumb-next");
+        stripPrevBtn = stage.find(".gallery-thumb-prev");
+        descriptionArea = stage.find(".gallery-img-desc");
+        descriptionToggle = 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() {
+                previousPic();
+                addButton()
+            });
+            widget.find('#theaterNextButton').click(function() {
+                nextPic();
+                addButton()
+            });
+            widget.find('#theaterPlayButton').click(function() {
+                play_flag = true;
+                playtimeoutID = window.setInterval(function() {
+                    playallPic();
+                }, 3000)
+                addButton()
+            });
+            widget.find('#theaterStopButton').click(function() {
+                play_flag = false;
+                addButton()
+                window.clearInterval(playtimeoutID)
+            });
+        }
+        bindHandler();
+        createTheater();
+
+        addButton();
+
+    }
+
+    var bindHandler = function() {
+        // handler to close the theater
+        closeBtn.on("click", destroyTheater);
+
+        // handler to show theater
+        widget.find("div[data-list=images] a").on("click", function() {
+            createTheater();
+            return false;
+        })
+
+        switchBtn.on("click", switchTheme);
+        descriptionToggle.on("click", toggleDescription)
+        stripPrevBtn.on("click", scrollStripRight);
+        stripNextBtn.on("click", scrollStripLeft);
+
+        if (Modernizr.touch) {
+            imageContainer.swipe({
+                swipe: function(event, direction, distance, duration, fingerCount) {
+                    if (direction == "left") {
+                        nextPic();
+                    } else if (direction == "right") {
+                        previousPic();
+                    }
+                }
+            })
+            thumbToggle.swipe({
+                swipe: function(event, direction, distance, duration, fingerCount) {
+                    if (direction == "up") {
+                        thumbStrip.parent().addClass("show");
+                        thumbToggle.addClass("up");
+                        thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
+                    } else if (direction == "down") {
+                        thumbStrip.parent().removeClass("show");
+                        thumbToggle.removeClass("up");
+                        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", nextPic);
+            widget.on("click", ".gal-prev", previousPic);
+            widget.on("click", ".gal-next", nextPic);
+            $(document).on("keyup", function(e) {
+                switch (e.keyCode) {
+                    case 39:
+                        nextPic();
+                        break;
+                    case 37:
+                        previousPic();
+                        break;
+                    case 27:
+                        destroyTheater();
+                        break;
+                }
+            })
+        }
+    }
+
+
+    var doneResizing = function() {
+        windowHeight = $(window).height();
+        windowWidth = $(window).width();
+        setThumbNavs();
+    }
+
+    var unBindKeyHandlers = function() {
+        $(document).unbind("keyup");
+    }
+
+    var destroyTheater = function() {
+        parent_divs.eq(parent_divs.length - 1).css('z-index', parent_div_z_index)
+        stage.hide();
+        widget.removeClass("gallery-mode-on");
+        imageContainer.empty()
+        unBindKeyHandlers();
+    }
+
+    var createTheater = function() {
+        stage.show();
+        widget.addClass("gallery-mode-on");
+        bindKeyHandlers();
+        isTheaterInitialized = false;
+        albumData = {}
+        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 = albumData.images[0];
+        currentPic = {
+            "image": cp,
+            "index": 0
+        };
+        createThumbStrip();
+
+        currentPic = currentPic;
+    }
+
+    var hasNextImage = function() {
+        return (currentPic.index + 1) <= (albumData.images.length - 1);
+    }
+
+    var hasPreviousImage = function() {
+        return (currentPic.index > 0);
+    }
+
+    var nextPic = function() {
+        if (loadingProcess == 0) {
+            if (hasNextImage()) {
+                startLoading();
+                currentPic.image = albumData.images[currentPic.index + 1];
+                currentPic.index = currentPic.index + 1;
+                setMainPic("next");
+            }
+        }
+    }
+    var playallPic = function() {
+        if (loadingProcess == 0) {
+            mainPicLoading = 1;
+            nextPicLoading = 1;
+            prevPicLoading = 1;
+            if (hasNextImage()) {
+                currentPic.image = albumData.images[currentPic.index + 1];
+                currentPic.index = currentPic.index + 1;
+                setMainPic("next");
+            } else {
+                currentPic.image = albumData.images[0];
+                currentPic.index = 0;
+                setMainPic();
+                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)
+            }
+        }
+    }
+
+
+    var previousPic = function() {
+        if (loadingProcess == 0) {
+            if (hasPreviousImage()) {
+                startLoading();
+                currentPic.image = albumData.images[currentPic.index - 1];
+                currentPic.index = currentPic.index - 1;
+                setMainPic("prev");
+            }
+        }
+    }
+
+    var scrollStripLeft = function() {
+        pixels_to_move = parseInt(thumbStrip.css("left")) - (66 * 3);
+        maximum_pixels = (windowWidth / 2) - (66 * (albumData.images.length - 1));
+        if (pixels_to_move < maximum_pixels) {
+            pixels_to_move = maximum_pixels;
+        }
+        thumbStrip.css("left", pixels_to_move + "px");
+    }
+
+    var scrollStripRight = function() {
+        pixels_to_move = parseInt(thumbStrip.css("left")) + (66 * 3);
+        maximum_pixels = (windowWidth / 2);
+        if (pixels_to_move > maximum_pixels) {
+            pixels_to_move = maximum_pixels;
+        }
+        thumbStrip.css("left", pixels_to_move + "px");
+    }
+
+
+    var switchTheme = function() {
+        var themeWhiteKlass = "theme-white",
+            nightKlass = "fa fa-circle",
+            dayKlass = "fa fa-circle-o",
+            $body = widget;
+
+        if (!switchBtn.hasClass(themeWhiteKlass)) {
+            switchBtn
+                .addClass(themeWhiteKlass)
+                .find("i")
+                .attr("class", dayKlass);
+
+            $body.addClass(themeWhiteKlass);
+
+        } else {
+            switchBtn
+                .removeClass(themeWhiteKlass)
+                .find("i")
+                .attr("class", nightKlass);
+
+            $body.removeClass(themeWhiteKlass);
+
+        }
+    }
+
+    var toggleDescription = function() {
+        $(this).toggleClass("active");
+        descriptionArea.toggleClass("active");
+    }
+
+    var startLoading = function() {
+        loadingProcess = 1;
+        mainPicLoading = 0;
+        nextPicLoading = 0;
+        prevPicLoading = 0;
+        loader.show();
+        loadingInterval = setInterval(stopLoading, 300);
+
+    }
+
+    var stopLoading = function() {
+        if (mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1) {
+            clearInterval(loadingInterval);
+            setTimeout(function() {
+                loadingProcess = 0;
+                loader.hide();
+            }, 100)
+        }
+    }
+
+    var createThumbStrip = function() {
+        if (!isTheaterInitialized) {
+            thumbStrip.html('')
+            $.each(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 = 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);
+                thumbStrip.append(li);
+            })
+            setThumbNavs();
+        }
+        setMainPic();
+    }
+
+
+    var setThumbNavs = function() {
+        var $thumbNav = stage.find('.gallery-thumb-navs'),
+            $thumb = 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);
+            imageContainer.append(img);
+            img.one("load", function() {
+                one_load(img)
+            })
+            isTheaterInitialized = true;
+        } else {
+            img = imageContainer.find(".gal-active");
+            if (selectedFromStrip) {
+                imageContainer.find(".gal-" + direction).attr("src", currentPic.image.file.theater.url);
+            }
+            if (direction == "next") {
+                imageContainer.find(".gal-prev").remove();
+                img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
+                imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
+                thumbStrip.css("left", (parseInt(thumbStrip.css("left")) - 66) + "px");
+            } else if (direction == "prev") {
+                imageContainer.find(".gal-next").remove();
+                img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
+                imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
+                thumbStrip.css("left", (parseInt(thumbStrip.css("left")) + 66) + "px");
+            }
+            mainPicLoading = 1;
+        }
+        descriptionArea.html("<p>" + currentPic.image.description + "</p>");
+        if (currentPic.image.description == null) {
+            descriptionArea.addClass("hide");
+        } else {
+            descriptionArea.removeClass("hide");
+        }
+        if (direction != null) {
+            calculateHeight(imageContainer.find(".gal-active"));
+        }
+        thumbStrip.find("li.active").removeClass("active");
+        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);
+        thumbStrip.css("left", left + "px");
+    }
+
+    var setNextPic = function() {
+        imageContainer.find(".gal-next.temp").remove()
+        if (hasNextImage()) {
+            var obj = albumData.images[currentPic.index + 1],
+                nextImg = $("<img class='gallery-image gal-next gal-inactive'>");
+            nextImg.attr("src", obj.file.theater.url);
+            nextImg.hide();
+            imageContainer.append(nextImg);
+            nextImg.on("load", function() {
+                calculateHeight(nextImg);
+                nextPicLoading = 1;
+                nextImg.fadeIn(100);
+            })
+        } else {
+            nextPicLoading = 1;
+        }
+    }
+
+    var setPrevPic = function() {
+        imageContainer.find(".gal-prev.temp").remove()
+        if (hasPreviousImage()) {
+            var obj = albumData.images[currentPic.index - 1],
+                prevImg = $("<img class='gallery-image gal-prev gal-inactive'>");
+            prevImg.attr("src", obj.file.theater.url);
+            prevImg.hide();
+            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') {
+    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)
+    }
+    var bind_gallery_widget_slide = function() {
+        $('.widget-gallery.widget5').each(function() {
+            GalleryTheaterWidget($(this));
+            $(window).resize(function() {
+                set_gallery_height($(this))
+            });
+        })
+    }
+    $(document).ready(function() {
+        bind_gallery_widget_slide()
+    })
+}
+
+// gallery-image gal-prev gal-inactive

app/assets/javascripts/theater.js

@@ -0,0 +1,576 @@
+$('.show-gallery .show-content.col-sm-2').ready(function() {
+    if ($('.show-gallery .show-content.col-sm-2').eq(0).css('float') == 'left') {
+        $('.show-gallery .show-content.col-sm-2').eq(0).parent().css('float', 'left');
+        $('.show-gallery .show-content.col-sm-2').eq(0).parent().css('width', '100%');
+    }
+})
+window.GalleryTheater = function() {
+    var parent_divs = $('.gallery').parents('div'),
+        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 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,
+        stage = null,
+        stripNextBtn = null,
+        stripPrevBtn = null,
+        thumbToggle = null,
+        descriptionToggle = null,
+        closeBtn = null,
+        switchBtn = null,
+        imageContainer = null,
+        albumData = {},
+        loader = null,
+        thumbStrip = null,
+        descriptionArea = null,
+        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 set_margin = function () {
+        if ($('#orbit-bar').height()>0){ //for show page
+            $('#gallery-theater-stage>.gallery').css('margin-top','2.4em')
+        }else{
+            $('#gallery-theater-stage>.gallery').css('margin-top','')
+        }
+    }
+    var initialize = function() {
+        set_margin();
+        stage = $("#gallery-theater-stage");
+        closeBtn = stage.find(".gallery-close");
+        switchBtn = stage.find(".gallery-theme-switch");
+        imageContainer = stage.find(".image-container");
+        thumbStrip = stage.find(".gallery-thumb-wrap");
+        thumbToggle = stage.find(".gallery-thumb-toggle");
+        loader = stage.find(".gallery-loader");
+        stripNextBtn = stage.find(".gallery-thumb-next");
+        stripPrevBtn = stage.find(".gallery-thumb-prev");
+        descriptionArea = stage.find(".gallery-img-desc");
+        descriptionToggle = stage.find(".gallery-toggle-desc");
+        windowScreenThresholdForTouch = windowWidth / 3;
+        startLoading();
+        windowHeight = $(window).height();
+        windowWidth = $(window).width();
+        var addButton = function() {
+            $('.theaterButton').remove();
+            if (!play_flag) {
+                $(button_left_string + button_play_string + button_right_string).insertAfter($('img.gal-active'));
+            } else {
+                $(button_left_string + button_stop_string + button_right_string).insertAfter($('img.gal-active'));
+            }
+            if (!$(".gal-prev").length) {
+                $('#theaterPreviousButton').remove();
+            }
+            if (!$(".gal-next").length) {
+                $('#theaterNextButton').remove();
+            }
+
+            $('#theaterPreviousButton').click(function() {
+                previousPic();
+            });
+            $('#theaterNextButton').click(function() {
+                nextPic();
+            });
+            $('#theaterPlayButton').click(function() {
+                play_flag = true;
+                playtimeoutID = window.setInterval(function() {
+                    playallPic();
+                }, 3000)
+                window.onhashchange()
+            });
+            $('#theaterStopButton').click(function() {
+                play_flag = false;
+                window.onhashchange()
+                window.clearInterval(playtimeoutID)
+            });
+        }
+        window.onhashchange = locationHashChanged;
+        bindHandler();
+        if (window.location.hash != "" && window.location.hash != "#") {
+            var id = window.location.hash.split("#")[1];
+            createTheater("/xhr/galleries/theater/" + id);
+        }
+
+
+        addButton();
+
+        function locationHashChanged() {
+            addButton();
+        }
+
+    }
+
+    var bindHandler = function() {
+        // handler to close the theater
+        closeBtn.off('click').on("click", destroyTheater);
+
+        // handler to show theater
+        $("div[data-list=images] a").filter(":not(.preview)").off('click').on("click", function() {
+            var id = $(this).attr('href').split("#")[1];
+            createTheater("/xhr/galleries/theater/" + id);
+            window.location.hash = '#' + id;
+            return false;
+        })
+
+        switchBtn.off('click').on("click", switchTheme);
+        descriptionToggle.off('click').on("click", toggleDescription)
+        stripPrevBtn.off('click').on("click", scrollStripRight);
+        stripNextBtn.off('click').on("click", scrollStripLeft);
+
+        if (Modernizr.touch) {
+            imageContainer.swipe({
+                swipe: function(event, direction, distance, duration, fingerCount) {
+                    if (direction == "left") {
+                        nextPic();
+                    } else if (direction == "right") {
+                        previousPic();
+                    }
+                }
+            })
+            thumbToggle.swipe({
+                swipe: function(event, direction, distance, duration, fingerCount) {
+                    if (direction == "up") {
+                        thumbStrip.parent().addClass("show");
+                        thumbToggle.addClass("up");
+                        thumbToggle.find("i").removeClass("fa-angle-double-up").addClass("fa-angle-double-down");
+                    } else if (direction == "down") {
+                        thumbStrip.parent().removeClass("show");
+                        thumbToggle.removeClass("up");
+                        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) {
+            $(document.body).on("click", ".gal-active", nextPic);
+            $(document.body).on("click", ".gal-prev", previousPic);
+            $(document.body).on("click", ".gal-next", nextPic);
+            $(document).on("keyup", function(e) {
+                switch (e.keyCode) {
+                    case 39:
+                        nextPic();
+                        break;
+                    case 37:
+                        previousPic();
+                        break;
+                    case 27:
+                        destroyTheater();
+                        break;
+                }
+            })
+        }
+    }
+
+
+    var doneResizing = function() {
+        windowHeight = $(window).height();
+        windowWidth = $(window).width();
+        setThumbNavs();
+    }
+
+    var unBindKeyHandlers = function() {
+        $(document).unbind("keyup");
+    }
+
+    var destroyTheater = function() {
+        parent_divs.eq(parent_divs.length - 1).css('z-index', parent_div_z_index)
+        stage.hide();
+        $("body").removeClass("gallery-mode-on");
+        imageContainer.empty()
+        unBindKeyHandlers();
+        window.location.hash = "";
+    }
+
+    var createTheater = function(link) {
+        $('.gallery-img-desc').removeClass('active');
+        bindKeyHandlers();
+        stage.show();
+        $("body").addClass("gallery-mode-on");
+        if (!isTheaterInitialized) {
+            $.ajax({
+                url: link,
+                dataType: "json",
+                type: "get",
+                async: false
+            }).done(function(data) {
+                albumData = data.data;
+                var cp = albumData.images.filter(function(x) {
+                    return x._id == albumData.image
+                })[0];
+                currentPic = {
+                    "image": cp,
+                    "index": albumData.images.indexOf(cp)
+                };
+                createThumbStrip();
+            })
+            isTheaterInitialized = false;
+        } else {
+            var id = link.split("/")[4],
+                cp = albumData.images.filter(function(x) {
+                    return x._id == id
+                })[0];
+            currentPic = {
+                "image": cp,
+                "index": albumData.images.indexOf(cp)
+            };
+            createThumbStrip();
+        }
+    }
+
+    var hasNextImage = function() {
+        return (currentPic.index + 1) <= (albumData.images.length - 1);
+    }
+
+    var hasPreviousImage = function() {
+        return (currentPic.index > 0);
+    }
+
+    var nextPic = function() {
+        if (loadingProcess == 0) {
+            if (hasNextImage()) {
+                startLoading();
+                currentPic.image = albumData.images[currentPic.index + 1];
+                currentPic.index = currentPic.index + 1;
+                setMainPic("next");
+            }
+        }
+    }
+    var playallPic = function() {
+        if (loadingProcess == 0) {
+            mainPicLoading = 1;
+            nextPicLoading = 1;
+            prevPicLoading = 1;
+            if (hasNextImage()) {
+                currentPic.image = albumData.images[currentPic.index + 1];
+                currentPic.index = currentPic.index + 1;
+                setMainPic("next");
+            } else {
+                currentPic.image = albumData.images[0];
+                currentPic.index = 0;
+                setMainPic();
+            }
+        }
+    }
+
+
+    var previousPic = function() {
+        if (loadingProcess == 0) {
+            if (hasPreviousImage()) {
+                startLoading();
+                currentPic.image = albumData.images[currentPic.index - 1];
+                currentPic.index = currentPic.index - 1;
+                setMainPic("prev");
+            }
+        }
+    }
+
+    var scrollStripLeft = function() {
+        pixels_to_move = parseInt(thumbStrip.css("left")) - (66 * 3);
+        maximum_pixels = (windowWidth / 2) - (66 * (albumData.images.length - 1));
+        if (pixels_to_move < maximum_pixels) {
+            pixels_to_move = maximum_pixels;
+        }
+        thumbStrip.css("left", pixels_to_move + "px");
+    }
+
+    var scrollStripRight = function() {
+        pixels_to_move = parseInt(thumbStrip.css("left")) + (66 * 3);
+        maximum_pixels = (windowWidth / 2);
+        if (pixels_to_move > maximum_pixels) {
+            pixels_to_move = maximum_pixels;
+        }
+        thumbStrip.css("left", pixels_to_move + "px");
+    }
+
+
+    var switchTheme = function() {
+        var themeWhiteKlass = "theme-white",
+            nightKlass = "fa fa-circle",
+            dayKlass = "fa fa-circle-o",
+            $body = $("body");
+
+        if (!switchBtn.hasClass(themeWhiteKlass)) {
+            switchBtn
+                .addClass(themeWhiteKlass)
+                .find("i")
+                .attr("class", dayKlass);
+
+            $body.addClass(themeWhiteKlass);
+
+        } else {
+            switchBtn
+                .removeClass(themeWhiteKlass)
+                .find("i")
+                .attr("class", nightKlass);
+
+            $body.removeClass(themeWhiteKlass);
+
+        }
+    }
+
+    var toggleDescription = function() {
+        $(this).toggleClass("active");
+        descriptionArea.toggleClass("active");
+    }
+
+    var startLoading = function() {
+        loadingProcess = 1;
+        mainPicLoading = 0;
+        nextPicLoading = 0;
+        prevPicLoading = 0;
+        loader.show();
+        loadingInterval = setInterval(stopLoading, 300);
+
+    }
+
+    var stopLoading = function() {
+        if (mainPicLoading == 1 && nextPicLoading == 1 && prevPicLoading == 1) {
+            clearInterval(loadingInterval);
+            setTimeout(function() {
+                loadingProcess = 0;
+                loader.hide();
+            }, 100)
+        }
+    }
+
+    var createThumbStrip = function() {
+        if (!isTheaterInitialized) {
+            thumbStrip.html("")
+            $.each(albumData.images, function(index, image) {
+                var li = $("<li class='gallery-item'></li>"),
+                    a = $("<a href=''></a>"),
+                    img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
+                a.on("click", function() {
+                    startLoading();
+                    var old_index = currentPic.index;
+                    currentPic.image = albumData.images[index];
+                    currentPic.index = index;
+                    if (old_index > index) {
+                        setMainPic("prev", true);
+                    } else if (old_index < index) {
+                        setMainPic("next", true);
+                    }else{
+                        setMainPic();
+                    }
+                    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);
+                thumbStrip.append(li);
+            })
+            setThumbNavs();
+        }
+        setMainPic();
+        if (!$('.theaterButton').length) {
+            window.onhashchange()
+        }
+    }
+
+
+    var setThumbNavs = function() {
+        var $thumbNav = stage.find('.gallery-thumb-navs'),
+            $thumb = 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;
+        $('div.gallery-show-original a').eq(0).attr('href', currentPic.image.url)
+        img = imageContainer.find(".gal-active");
+        if (direction == null) {
+            if (img.length==0){                
+                img = $("<img class='gallery-image gal-active'>");
+                img.hide();
+                imageContainer.append(img);
+                img.one("load", function() {
+                    one_load(img)
+                })
+            }
+            img.attr("src", currentPic.image.file.theater.url);
+            img.attr("alt", currentPic.image.alt_title);
+            isTheaterInitialized = true;
+        } else {
+            if (selectedFromStrip) {
+                img.attr("src", currentPic.image.file.theater.url);
+                img.attr("alt", currentPic.image.alt_title);
+            }else{
+                if (direction == "next") {
+                    imageContainer.find(".gal-prev").remove();
+                    img.removeClass("gal-active").addClass("gal-prev gal-inactive temp");
+                    imageContainer.find(".gal-next").removeClass("gal-inactive gal-next").addClass("gal-active");
+                    thumbStrip.css("left", (parseInt(thumbStrip.css("left")) - 66) + "px");
+                } else if (direction == "prev") {
+                    imageContainer.find(".gal-next").remove();
+                    img.removeClass("gal-active").addClass("gal-next gal-inactive temp");
+                    imageContainer.find(".gal-prev").removeClass("gal-inactive gal-prev").addClass("gal-active");
+                    thumbStrip.css("left", (parseInt(thumbStrip.css("left")) + 66) + "px");
+                } 
+            }
+            
+            mainPicLoading = 1;
+        }
+        descriptionArea.html("<p>" + currentPic.image.description + "</p>");
+        if (currentPic.image.description == null) {
+            descriptionArea.addClass("hide");
+        } else {
+            descriptionArea.removeClass("hide");
+        }
+        if (direction != null) {
+            calculateHeight(imageContainer.find(".gal-active"));
+        }
+        thumbStrip.find("li.active").removeClass("active");
+        thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
+
+        setStripToCenter();
+        setNextPic();
+        setPrevPic();
+        changeUrl();
+    }
+
+    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()
+        }
+    }
+
+    var changeUrl = function() {
+        window.location.hash = currentPic.image._id
+    }
+
+    var setStripToCenter = function() {
+        left = (windowWidth / 2) - (66 * currentPic.index);
+        thumbStrip.css("left", left + "px");
+    }
+
+    var setNextPic = function() {
+        imageContainer.find(".gal-next.temp").remove()
+        if (hasNextImage()) {
+            var obj = albumData.images[currentPic.index + 1],
+                nextImg = $("<img class='gallery-image gal-next gal-inactive'>");
+            nextImg.attr("src", obj.file.theater.url);
+            nextImg.attr("alt", obj.alt_title);
+            nextImg.hide();
+            imageContainer.append(nextImg);
+            nextImg.on("load", function() {
+                calculateHeight(nextImg);
+                nextPicLoading = 1;
+                nextImg.fadeIn(100);
+            })
+        } else {
+            nextPicLoading = 1;
+            $("img.gallery-image.gal-next.gal-inactive").remove();
+        }
+    }
+
+    var setPrevPic = function() {
+        imageContainer.find(".gal-prev.temp").remove()
+        if (hasPreviousImage()) {
+            var obj = albumData.images[currentPic.index - 1],
+                prevImg = $("<img class='gallery-image gal-prev gal-inactive'>");
+            prevImg.attr("src", obj.file.theater.url);
+            prevImg.attr("alt", obj.alt_title);
+            prevImg.hide();
+            imageContainer.prepend(prevImg);
+            prevImg.on("load", function() {
+                calculateHeight(prevImg);
+                prevPicLoading = 1;
+                prevImg.fadeIn(100);
+            })
+        } else {
+            prevPicLoading = 1;
+            $("img.gallery-image.gal-prev.gal-inactive").remove();
+        }
+    }
+
+    var l = function(x) {
+        console.log(x)
+    }
+
+    $(document).ready(function() {
+        initialize();
+    });
+    $(window).load(function() {
+        set_margin();
+    });
+}
+
+// gallery-image gal-prev gal-inactive

app/assets/javascripts/theater_bak.js

@@ -0,0 +1,261 @@
+var GalleryTheater = function(){
+  var gt = this,
+      currentPic = {},
+      windowHeight = 0,
+      windowWidth = 0;
+      gt.stage = null;
+      gt.closeBtn = null;
+      gt.mainStageImage = null;
+      gt.prevStageImage = null;
+      gt.nextStageImage = null;
+      gt.albumData = {};
+      gt.thumbStrip = null;
+      gt.isTheaterInitialized = false;
+
+  var initialize = function(){
+    gt.stage = $("#gallery-theater-stage");
+    gt.closeBtn = gt.stage.find(".gallery-close");
+    gt.switchBtn = gt.stage.find(".gallery-theme-switch");
+    gt.mainStageImage = gt.stage.find(".gal-active");
+    gt.prevStageImage = gt.stage.find(".gal-prev");
+    gt.nextStageImage = gt.stage.find(".gal-next");
+    gt.thumbStrip = gt.stage.find(".gallery-thumb-wrap");
+    windowHeight = $(window).height();
+    windowWidth = $(window).width();
+    bindHandler();
+    if(window.location.hash != "" && window.location.hash != "#"){
+      var id = window.location.hash.split("#")[1];
+      gt.createTheater("/xhr/galleries/theater/" + id);
+    }
+  }
+
+  var bindHandler = function(){
+    // handler to close the theater
+    gt.closeBtn.on("click",function(){
+      gt.destroyTheater();
+    })
+
+    // handler to show theater
+    $("div[data-list=images] a").on("click",function(){
+      gt.createTheater($(this).attr("href"));
+      return false;
+    })
+
+    // handler to show next image
+     gt.nextStageImage.on("click",function(){
+      if($(this).attr("src") != "#"){
+        gt.nextPic();
+      }
+     })
+     // handler to show prev image
+     gt.prevStageImage.on("click",function(){
+      if($(this).attr("src") != "#"){
+        gt.previousPic();
+      }
+     })
+
+     // handler to go to next image on center image click
+     gt.mainStageImage.on("click",gt.nextPic);
+
+     gt.switchBtn.on("click", function() {
+      var themeWhiteKlass = "theme-white",
+          nightKlass = "fa fa-circle",
+          dayKlass = "fa fa-circle-o",
+          $body = $("body");
+
+      if (!$(this).hasClass(themeWhiteKlass)) {
+        $(this)
+          .addClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", dayKlass);
+
+        $body.addClass(themeWhiteKlass);
+
+      } else {
+        $(this)
+          .removeClass(themeWhiteKlass)
+          .find("i")
+          .attr("class", nightKlass);
+
+        $body.removeClass(themeWhiteKlass);
+
+      }
+
+      });
+
+     //handler for window resize
+     $(window).resize(function(){
+       windowHeight = $(window).height();
+       windowWidth = $(window).width();
+     })
+  }
+
+  var bindKeyHandlers = function(){
+    $(document).on("keyup",function(e){
+      switch(e.keyCode){
+        case 39:
+          gt.nextPic();
+          break;
+        case 37:
+          gt.previousPic();
+          break;
+        case 27:
+          gt.destroyTheater();
+        break;
+      }
+     })
+  }
+
+  var unBindKeyHandlers = function(){
+    $(document).unbind("keypress");
+  }
+
+  gt.destroyTheater = function(){
+    gt.stage.hide();
+    $("body").removeClass("gallery-mode-on");
+    unBindKeyHandlers();
+    window.location.hash = "";
+  }
+
+  gt.createTheater = function(link){
+    gt.stage.show();
+    $("body").addClass("gallery-mode-on");
+    bindKeyHandlers();
+    if(!gt.isTheaterInitialized){
+      $.ajax({
+        url : link,
+        dataType : "json",
+        type : "get"
+      }).done(function(data){
+        gt.albumData = data.data;
+        var cp =  gt.albumData.images.filter(function(x){return x._id == gt.albumData.image})[0];
+        currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)};
+        createThumbStrip();
+      })
+    }else{
+      var id = link.split("/")[4],
+          cp =  gt.albumData.images.filter(function(x){return x._id == id})[0];
+      currentPic = {"image" : cp, "index" : gt.albumData.images.indexOf(cp)};
+      createThumbStrip();
+    }
+  }
+
+  gt.nextPic = function(){
+    if((currentPic.index + 1) <= (gt.albumData.images.length - 1)){
+      currentPic.image = gt.albumData.images[currentPic.index + 1];
+      currentPic.index = currentPic.index + 1;
+      setMainPic();
+    }
+  }
+
+   gt.previousPic = function(){
+    if(currentPic.index > 0) {
+      currentPic.image = gt.albumData.images[currentPic.index - 1];
+      currentPic.index = currentPic.index - 1;
+      setMainPic();
+    }
+   }
+
+  var createThumbStrip = function(){
+    if(!gt.isTheaterInitialized){
+      $.each(gt.albumData.images,function(index, image){
+        var li = $("<li class='gallery-item'></li>"),
+            a = $("<a href=''></a>"),
+            img = $("<img class='gallery-thumb' src='' alt='Image Thumb'>");
+          a.on("click",function(){ 
+            currentPic.image = gt.albumData.images[index];
+            currentPic.index = index;
+            setMainPic();
+            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);
+      })
+      gt.isTheaterInitialized = true;
+    }
+    setMainPic();
+  }
+
+  var setMainPic = function(){
+    var obj = currentPic.image;
+    gt.mainStageImage.fadeOut(100,function(){
+      gt.mainStageImage.attr("src",obj.file.theater.url);
+      gt.mainStageImage.attr("alt",obj.alt_title);
+      gt.mainStageImage.one("load",function(){
+        var h = 0,
+            w = 0,
+            new_width = 0;
+        if(typeof currentPic.image.height == "undefined"){
+          h = gt.mainStageImage.height();
+          currentPic.image.height = h;
+          w = gt.mainStageImage.width();
+          currentPic.image.width = w;
+        }else{
+          h = currentPic.image.height;
+          w = currentPic.image.width;
+        }
+        if(h > (windowHeight - 100)){
+          new_width = Math.round((windowHeight - 100) * w / h);
+          new_width = (new_width / windowWidth) * 100;
+          gt.mainStageImage.width(new_width + "%");
+        }else{
+          if(windowWidth < 770){
+           gt.mainStageImage.width("90%");
+          }else{
+            gt.mainStageImage.width("65%");
+          }
+        }
+        gt.mainStageImage.fadeIn(100);
+      })
+    });
+    gt.thumbStrip.find("li.active").removeClass("active");
+    gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
+    changeUrl();
+    setNextPic();
+    setPrevPic();
+  }
+
+  var changeUrl = function(){
+    window.location.hash = currentPic.image._id
+  }
+
+  var setNextPic = function(){
+    gt.nextStageImage.attr("src","#");
+    if((currentPic.index + 1) <= (gt.albumData.images.length - 1)) {
+      gt.nextStageImage.hide();
+      var obj = gt.albumData.images[currentPic.index + 1];
+      gt.nextStageImage.attr("src",obj.file.theater.url);
+      gt.nextStageImage.on("load",function(){
+        gt.nextStageImage.show();
+      });
+    }else{
+      gt.nextStageImage.hide();
+    }
+  }
+
+  var setPrevPic = function(){
+    gt.prevStageImage.attr("src","#");
+    if(currentPic.index > 0) {
+      gt.prevStageImage.hide();
+      var obj = gt.albumData.images[currentPic.index - 1];
+      gt.prevStageImage.attr("src",obj.file.theater.url);
+      gt.prevStageImage.on("load",function(){
+        gt.prevStageImage.show();
+      });
+    }else{
+      gt.prevStageImage.hide();
+    }
+  }
+
+  var l = function(x){
+    console.log(x)
+  }
+
+  $(document).ready(function(){
+    initialize();
+  })
+}

app/assets/stylesheets/cropper.css

@@ -0,0 +1,304 @@
+/*!
+ * Cropper.js v1.5.5
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2019-08-04T02:26:27.232Z
+ */
+
+.cropper-container {
+  direction: ltr;
+  font-size: 0;
+  line-height: 0;
+  position: relative;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cropper-container img {
+  display: block;
+  height: 100%;
+  image-orientation: 0deg;
+  max-height: none !important;
+  max-width: none !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  width: 100%;
+}
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cropper-wrap-box,
+.cropper-canvas {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+
+.cropper-modal {
+  background-color: #000;
+  opacity: 0.5;
+}
+
+.cropper-view-box {
+  display: block;
+  height: 100%;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+  overflow: hidden;
+  width: 100%;
+}
+
+.cropper-dashed {
+  border: 0 dashed #eee;
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+}
+
+.cropper-dashed.dashed-h {
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  height: calc(100% / 3);
+  left: 0;
+  top: calc(100% / 3);
+  width: 100%;
+}
+
+.cropper-dashed.dashed-v {
+  border-left-width: 1px;
+  border-right-width: 1px;
+  height: 100%;
+  left: calc(100% / 3);
+  top: 0;
+  width: calc(100% / 3);
+}
+
+.cropper-center {
+  display: block;
+  height: 0;
+  left: 50%;
+  opacity: 0.75;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+
+.cropper-center::before,
+.cropper-center::after {
+  background-color: #eee;
+  content: ' ';
+  display: block;
+  position: absolute;
+}
+
+.cropper-center::before {
+  height: 1px;
+  left: -3px;
+  top: 0;
+  width: 7px;
+}
+
+.cropper-center::after {
+  height: 7px;
+  left: 0;
+  top: -3px;
+  width: 1px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  display: block;
+  height: 100%;
+  opacity: 0.1;
+  position: absolute;
+  width: 100%;
+}
+
+.cropper-face {
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+  cursor: ew-resize;
+  right: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-n {
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+  top: -3px;
+}
+
+.cropper-line.line-w {
+  cursor: ew-resize;
+  left: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-s {
+  bottom: -3px;
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+}
+
+.cropper-point {
+  background-color: #39f;
+  height: 5px;
+  opacity: 0.75;
+  width: 5px;
+}
+
+.cropper-point.point-e {
+  cursor: ew-resize;
+  margin-top: -3px;
+  right: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-n {
+  cursor: ns-resize;
+  left: 50%;
+  margin-left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-w {
+  cursor: ew-resize;
+  left: -3px;
+  margin-top: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-s {
+  bottom: -3px;
+  cursor: s-resize;
+  left: 50%;
+  margin-left: -3px;
+}
+
+.cropper-point.point-ne {
+  cursor: nesw-resize;
+  right: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-nw {
+  cursor: nwse-resize;
+  left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-sw {
+  bottom: -3px;
+  cursor: nesw-resize;
+  left: -3px;
+}
+
+.cropper-point.point-se {
+  bottom: -3px;
+  cursor: nwse-resize;
+  height: 20px;
+  opacity: 1;
+  right: -3px;
+  width: 20px;
+}
+
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    height: 10px;
+    width: 10px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    height: 5px;
+    opacity: 0.75;
+    width: 5px;
+  }
+}
+
+.cropper-point.point-se::before {
+  background-color: #39f;
+  bottom: -50%;
+  content: ' ';
+  display: block;
+  height: 200%;
+  opacity: 0;
+  position: absolute;
+  right: -50%;
+  width: 200%;
+}
+
+.cropper-invisible {
+  opacity: 0;
+}
+
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}

app/assets/stylesheets/gallery.css

@@ -4,10 +4,17 @@
 	list-style: none;
 }
 #orbit_gallery .rgalbum {
+	position: relative;
+	float: left;
 	margin: 5px;
-	padding: 10px;
+	padding: 5px;
 	width: 200px;
 	background: #FFFFFF;
+	overflow: hidden;
+	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+	-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+	box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
+	-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
 	-webkit-transition-property: left, right, top;
 	-moz-transition-property: left, right, top;
 	-ms-transition-property: left, right, top;
@@ -66,7 +73,7 @@
 	color: #F2F2F2;
 	text-shadow: 0px -1px 0 rgba(0,0,0,0.4);
 	letter-spacing: -0.5px;
-	font-size: 30px;
+	font-size: 2.5em;
 	font-family: 'Playfair Display SC', sans-serif;
 	line-height: 28px;
 	z-index: 1;
@@ -136,6 +143,9 @@
 
 
 /* Gallery Body */
+div.rgbody{
+    margin-bottom:50px;
+}
 .rgbody .gallery-info {
 	padding: 0 5px;
 }
@@ -154,6 +164,13 @@
 	padding: 0 0 10px;
 	list-style: none;
 }
+.rgalbum .photo_edit{
+    right: 100%;
+    transition-duration: 0.5s;
+}
+.rgalbum:hover .photo_edit{
+    transform: translate(100%);
+}
 #imgholder .rgalbum {
 	position: relative;
 	float: left;
@@ -203,7 +220,6 @@
 	display: inline-block;
 	float: left;
 	color: #777;
-	font-size: 11px;
 	line-height: 30px;
 	cursor: pointer;
 	width: 33%;
@@ -365,7 +381,7 @@
 	top: 0;
 	right: 0;
 	margin: 0;
-	font-size: 23px;
+	font-size: 1.92em;
 	opacity: 0;
 	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 	filter: alpha(opacity=0);
@@ -405,7 +421,7 @@
 	text-align: right;
 	text-shadow: 0 1px 0 #ffffff;
 	letter-spacing: -0.1em;
-	font-size: 12px;
+	font-size: 1em;
 	font-family: 'Varela Round', sans-serif;
 	line-height: 40px;
 }
@@ -460,7 +476,7 @@
 }
 #fileupload #file-list {
 	position: relative;
-	z-index: 1;
+	z-index: 4;
 	height: 209px;
 	margin: 2px 0;
 }
@@ -519,3 +535,22 @@
 #fileupload #file-list .action-bnt {
 	text-align: right;
 }
+.cke_contents.cke_reset{
+	position: relative;
+}
+.order-edit-notification{
+	background-color: #ffffd5;
+	z-index: 10;
+	display: none;
+	height: 25px;
+	margin-left: 40%;
+	position: fixed;
+	text-align: center;
+	margin-top: 5px;
+	top: 85px;
+	width: 250px;
+	font-size: 1.08em;
+}
+.bottomnav{
+	z-index: 4;
+}

app/assets/stylesheets/gallery_card.css

@@ -0,0 +1,93 @@
+.gallery.card-group .card-body img {
+  object-fit: cover;
+}
+.gallery.card-group .row {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+.gallery.card-group .card-back {
+  transform: rotateY(180deg) translateX(-100%);
+  position: absolute;
+  backface-visibility: hidden;
+  transition: transform 300ms;
+  transition-timing-function: linear;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  background: white;
+  color: black;
+}
+.gallery.card-group .card.card-flip.h-100:nth-child(4n) {
+  margin-right: 0em;
+}
+
+.gallery.card-group .card.card-flip.h-100 {
+  position: relative;
+  width: 25%;
+  width: calc( 25% - 0.75em);
+  background: white;
+  margin-right: 1em;
+  margin-bottom: 1em;
+}
+@media (max-width: 768px){
+  .gallery.card-group .card.card-flip.h-100 {
+    width: 50%;
+    width: calc( 50% - 0.5em);
+  }
+  .gallery.card-group .card.card-flip.h-100:nth-child(2n) {
+    margin-right: 0em;
+  }
+}
+@media (max-width: 575px){
+  .gallery.card-group .card.card-flip.h-100 {
+    width: 100%;
+    margin-right: 0em;
+  }
+}
+.gallery.card-group h3.card-title {
+  padding: 0.5em;
+  margin: 0;
+  font-size: 1.2em;
+}
+.gallery.card-group .card-front{
+	backface-visibility: hidden;
+  width: 100%;
+  height: 100%;
+}
+.gallery.card-group .card.card-flip.h-100:hover .card-back {
+  transform: rotateY(0deg);
+}
+.gallery.card-group .card-button-group{
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  display: flex;  
+}
+.gallery.card-group .card-body{
+  width: 100%;
+  position: inherit;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.gallery.card-group .card-button-group a {
+  color: #fff;
+  display: block;
+  background: #6c757d;
+  padding: 0.5em;
+  width: 2.3em;
+  height: 2.3em;
+  margin-right: 0.1em;
+  border-radius: 0;
+}
+.gallery.card-group .card-button-group a:hover {
+  color: #fff;
+  background-color: #5a6268;
+  border-color: #545b62;
+}
+.gallery.card-group .card-button-group a:focus {
+  color: #fff;
+  outline: 0.1em dotted !important;
+}

app/assets/stylesheets/jquery.minicolors.css

@@ -0,0 +1,432 @@
+.minicolors {
+  position: relative;
+}
+
+.minicolors-sprite {
+  background-image: url(jquery.minicolors.png);
+}
+
+.minicolors-swatch {
+  position: absolute;
+  vertical-align: middle;
+  background-position: -80px 0;
+  border: solid 1px #ccc;
+  cursor: text;
+  padding: 0;
+  margin: 0;
+  display: inline-block;
+}
+
+.minicolors-swatch-color {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.minicolors input[type=hidden] + .minicolors-swatch {
+  width: 28px;
+  position: static;
+  cursor: pointer;
+}
+
+.minicolors input[type=hidden][disabled] + .minicolors-swatch {
+  cursor: default;
+}
+
+/* Panel */
+.minicolors-panel {
+  position: relative;
+  width: 173px;
+  background: white;
+  border: solid 1px #CCC;
+  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
+  z-index: 99999;
+  box-sizing: content-box;
+  display: none;
+}
+
+.minicolors-panel.minicolors-visible {
+  display: block;
+}
+
+/* Panel positioning */
+.minicolors-position-top .minicolors-panel {
+  top: -154px;
+}
+
+.minicolors-position-right .minicolors-panel {
+  right: 0;
+}
+
+.minicolors-position-bottom .minicolors-panel {
+  top: auto;
+}
+
+.minicolors-position-left .minicolors-panel {
+  left: 0;
+}
+
+.minicolors-with-opacity .minicolors-panel {
+  width: 194px;
+}
+
+.minicolors .minicolors-grid {
+  position: relative;
+  top: 1px;
+  left: 1px; /* LTR */
+  width: 150px;
+  height: 150px;
+  margin-bottom: 2px;
+  background-position: -120px 0;
+  cursor: crosshair;
+}
+[dir=rtl] .minicolors .minicolors-grid {
+  right: 1px;
+}
+
+.minicolors .minicolors-grid-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 150px;
+  height: 150px;
+}
+
+.minicolors-slider-saturation .minicolors-grid {
+  background-position: -420px 0;
+}
+
+.minicolors-slider-saturation .minicolors-grid-inner {
+  background-position: -270px 0;
+  background-image: inherit;
+}
+
+.minicolors-slider-brightness .minicolors-grid {
+  background-position: -570px 0;
+}
+
+.minicolors-slider-brightness .minicolors-grid-inner {
+  background-color: black;
+}
+
+.minicolors-slider-wheel .minicolors-grid {
+  background-position: -720px 0;
+}
+
+.minicolors-slider,
+.minicolors-opacity-slider {
+  position: absolute;
+  top: 1px;
+  left: 152px; /* LTR */
+  width: 20px;
+  height: 150px;
+  background-color: white;
+  background-position: 0 0;
+  cursor: row-resize;
+}
+[dir=rtl] .minicolors-slider,
+[dir=rtl] .minicolors-opacity-slider {
+  right: 152px;
+}
+
+.minicolors-slider-saturation .minicolors-slider {
+  background-position: -60px 0;
+}
+
+.minicolors-slider-brightness .minicolors-slider {
+  background-position: -20px 0;
+}
+
+.minicolors-slider-wheel .minicolors-slider {
+  background-position: -20px 0;
+}
+
+.minicolors-opacity-slider {
+  left: 173px; /* LTR */
+  background-position: -40px 0;
+  display: none;
+}
+[dir=rtl] .minicolors-opacity-slider {
+  right: 173px;
+}
+
+.minicolors-with-opacity .minicolors-opacity-slider {
+  display: block;
+}
+
+/* Pickers */
+.minicolors-grid .minicolors-picker {
+  position: absolute;
+  top: 70px;
+  left: 70px;
+  width: 12px;
+  height: 12px;
+  border: solid 1px black;
+  border-radius: 10px;
+  margin-top: -6px;
+  margin-left: -6px;
+  background: none;
+}
+
+.minicolors-grid .minicolors-picker > div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 8px;
+  border: solid 2px white;
+  box-sizing: content-box;
+}
+
+.minicolors-picker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 18px;
+  height: 2px;
+  background: white;
+  border: solid 1px black;
+  margin-top: -2px;
+  box-sizing: content-box;
+}
+
+/* Swatches */
+.minicolors-swatches,
+.minicolors-swatches li {
+  margin: 5px 0 3px 5px; /* LTR */
+  padding: 0;
+  list-style: none;
+  overflow: hidden;
+}
+[dir=rtl] .minicolors-swatches,
+[dir=rtl] .minicolors-swatches li {
+  margin: 5px 5px 3px 0;
+}
+
+.minicolors-swatches .minicolors-swatch {
+  position: relative;
+  float: left; /* LTR */
+  cursor: pointer;
+  margin:0 4px 0 0; /* LTR */
+}
+[dir=rtl] .minicolors-swatches .minicolors-swatch {
+  float: right;
+  margin:0 0 0 4px;
+}
+
+.minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
+  margin-right: 7px; /* LTR */
+}
+[dir=rtl] .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
+  margin-right: 0;
+  margin-left: 7px;
+}
+
+.minicolors-swatch.selected {
+  border-color: #000;
+}
+
+/* Inline controls */
+.minicolors-inline {
+  display: inline-block;
+}
+
+.minicolors-inline .minicolors-input {
+  display: none !important;
+}
+
+.minicolors-inline .minicolors-panel {
+  position: relative;
+  top: auto;
+  left: auto; /* LTR */
+  box-shadow: none;
+  z-index: auto;
+  display: inline-block;
+}
+[dir=rtl] .minicolors-inline .minicolors-panel {
+  right: auto;
+}
+
+/* Default theme */
+.minicolors-theme-default .minicolors-swatch {
+  top: 5px;
+  left: 5px; /* LTR */
+  width: 18px;
+  height: 18px;
+}
+[dir=rtl] .minicolors-theme-default .minicolors-swatch {
+  right: 5px;
+}
+.minicolors-theme-default .minicolors-swatches .minicolors-swatch {
+  margin-bottom: 2px;
+  top: 0;
+  left: 0; /* LTR */
+  width: 18px;
+  height: 18px;
+}
+[dir=rtl] .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
+  right: 0;
+}
+.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
+  left: auto; /* LTR */
+  right: 5px; /* LTR */
+}
+[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-swatch {
+  right: auto;
+  left: 5px;
+}
+.minicolors-theme-default.minicolors {
+  width: auto;
+  display: inline-block;
+}
+.minicolors-theme-default .minicolors-input {
+  height: 20px;
+  width: auto;
+  display: inline-block;
+  padding-left: 26px; /* LTR */
+}
+[dir=rtl] .minicolors-theme-default .minicolors-input {
+  text-align: right;
+  unicode-bidi: plaintext;
+  padding-left: 1px;
+  padding-right: 26px;
+}
+.minicolors-theme-default.minicolors-position-right .minicolors-input {
+  padding-right: 26px; /* LTR */
+  padding-left: inherit; /* LTR */
+}
+[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-input {
+  padding-right: inherit;
+  padding-left: 26px;
+}
+
+/* Bootstrap theme */
+.minicolors-theme-bootstrap .minicolors-swatch {
+  z-index: 2;
+  top: 3px;
+  left: 3px; /* LTR */
+  width: 28px;
+  height: 28px;
+  border-radius: 3px;
+}
+[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatch {
+  right: 3px;
+}
+.minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
+  margin-bottom: 2px;
+  top: 0;
+  left: 0; /* LTR */
+  width: 20px;
+  height: 20px;
+}
+[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
+  right: 0;
+}
+.minicolors-theme-bootstrap .minicolors-swatch-color {
+  border-radius: inherit;
+}
+.minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
+  left: auto; /* LTR */
+  right: 3px; /* LTR */
+}
+[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left > .minicolors-swatch {
+  right: auto;
+  left: 3px;
+}
+.minicolors-theme-bootstrap .minicolors-input {
+  float: none;
+  padding-left: 44px; /* LTR */
+}
+[dir=rtl] .minicolors-theme-bootstrap .minicolors-input {
+  text-align: right;
+  unicode-bidi: plaintext;
+  padding-left: 12px;
+  padding-right: 44px;
+}
+.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
+  padding-right: 44px; /* LTR */
+  padding-left: 12px; /* LTR */
+}
+[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left .minicolors-input {
+  padding-right: 12px;
+  padding-left: 44px;
+}
+.minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
+  top: 4px;
+  left: 4px; /* LTR */
+  width: 37px;
+  height: 37px;
+  border-radius: 5px;
+}
+[dir=rtl] .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
+  right: 4px;
+}
+.minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
+  width: 24px;
+  height: 24px;
+}
+.minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
+  width: 18px;
+  height: 18px;
+}
+.input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
+  border-top-left-radius: 0; /* LTR */
+  border-bottom-left-radius: 0; /* LTR */
+}
+[dir=rtl] .input-group .minicolors-theme-bootstrap .minicolors-input {
+  border-radius: 4px;
+}
+[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:last-child) .minicolors-input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+/* bootstrap input-group rtl override */
+[dir=rtl] .input-group .form-control,
+[dir=rtl] .input-group-addon,
+[dir=rtl] .input-group-btn > .btn,
+[dir=rtl] .input-group-btn > .btn-group > .btn,
+[dir=rtl] .input-group-btn > .dropdown-toggle {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+[dir=rtl] .input-group .form-control:first-child,
+[dir=rtl] .input-group-addon:first-child,
+[dir=rtl] .input-group-btn:first-child > .btn,
+[dir=rtl] .input-group-btn:first-child > .btn-group > .btn,
+[dir=rtl] .input-group-btn:first-child > .dropdown-toggle,
+[dir=rtl] .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+[dir=rtl] .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 0;
+}
+[dir=rtl] .input-group .form-control:last-child,
+[dir=rtl] .input-group-addon:last-child,
+[dir=rtl] .input-group-btn:last-child > .btn,
+[dir=rtl] .input-group-btn:last-child > .btn-group > .btn,
+[dir=rtl] .input-group-btn:last-child > .dropdown-toggle,
+[dir=rtl] .input-group-btn:first-child > .btn:not(:first-child),
+[dir=rtl] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Semantic Ui theme */
+.minicolors-theme-semanticui .minicolors-swatch {
+  top: 0;
+  left: 0; /* LTR */
+  padding: 18px;
+}
+[dir=rtl] .minicolors-theme-semanticui .minicolors-swatch {
+  right: 0;
+}
+.minicolors-theme-semanticui input {
+  text-indent: 30px;
+}

app/assets/stylesheets/theater.css

@@ -0,0 +1,531 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto);
+
+/* Reset and basic styles */
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+.gallery-mode-on {
+  /*overflow-y: hidden;*/
+}
+
+
+/* Gallery */
+
+#gallery-theater-stage {
+  display: none;
+}
+
+#gallery-theater-stage > .gallery {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #000;
+  z-index: 2000;
+}
+
+.gallery-loader {
+  padding: 10px;
+  position: absolute;
+  display: none;
+  left: 50%;
+  top: 10px;
+  -webkit-transform: translate(-50%, 50%);
+  transform: translate(-50%, 50%);
+  border-radius: 2px;
+  z-index: 2000;
+  background-color: rgba(0, 0, 0, .6);
+  -webkit-transition: .3s all;
+  transition: .3s all;
+}
+
+.spinner {
+  margin: 0 auto;
+  width: 50px;
+  height: 20px;
+  text-align: center;
+  font-size: 0.625rem;
+}
+
+.spinner > div {
+  background-color: #e8e8e8;
+  height: 100%;
+  width: 4px;
+  display: inline-block;
+  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+  animation: stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
+}
+
+@-webkit-keyframes stretchdelay {
+  0%,
+  40%,
+  100% {
+    -webkit-transform: scaleY(0.4)
+  }
+  20% {
+    -webkit-transform: scaleY(1.0)
+  }
+}
+
+@keyframes stretchdelay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
+}
+
+.gallery-actions {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  cursor: pointer;
+  background: rgba(255, 255, 255, .7);
+  border-radius: 2px;
+  z-index: 2000;
+}
+
+.gallery-actions-btn {
+  padding: 8px 12px 8px 10px;
+  display: inline-block;
+}
+
+.gallery-actions-btn:hover {
+  color: #fff;
+}
+
+.touch .gallery-actions-btn {
+  padding: 12px 15px 12px 15px;
+}
+
+.gallery-toggle-desc.active {
+  color: #fff;
+}
+
+.gallery-theme-switch {
+  border-right: 1px solid rgba(255, 255, 255, .2);
+  border-left: 1px solid rgba(255, 255, 255, .2);
+}
+
+.gallery-close {
+  color: #000;
+}
+
+.touch .image-container {
+  height: 100%;
+  padding-bottom: 150px;
+  z-index: 800;
+}
+
+.gallery-image {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  width: 60%;
+  height: auto;
+  cursor: pointer;
+}
+
+.no-touch .gallery-image {
+  -webkit-transition: .3s all;
+  transition: .3s all;
+}
+
+.gal-prev {
+  display: none;
+  left: 0;
+  -webkit-transform: translate(-95%, -50%);
+  transform: translate(-95%, -50%);
+}
+
+.gal-prev:hover {
+  -webkit-transform: translate(-94%, -50%);
+  transform: translate(-94%, -50%);
+}
+
+.gal-next {
+  display: none;
+  left: auto;
+  right: 0;
+  -webkit-transform: translate(95%, -50%);
+  transform: translate(95%, -50%);
+}
+
+.gal-next:hover {
+  -webkit-transform: translate(94%, -50%);
+  transform: translate(94%, -50%);
+}
+
+.gal-inactive {
+  -webkit-transition: .3s all;
+  transition: .3s all;
+  opacity: .3;
+}
+
+.gal-inactive:hover {
+  opacity: 1;
+}
+
+.gal-active {
+  display: none;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+
+/* Thumbnails */
+
+.gallery-thumb-toggle {
+  position: absolute;
+  bottom: -1000px;
+}
+
+.gallery-thumb-wrap {
+  overflow-y: hidden;
+  overflow-x: hidden;
+  list-style: none;
+  margin: 0 auto;
+  padding: 10px 0;
+  text-align: center;
+  white-space: nowrap;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  -webkit-transition: .3s all;
+  transition: .3s all;
+}
+
+.gallery-item {
+  margin-right: 1em;
+  display: inline-block;
+}
+
+.gallery-item.active {
+  border-radius: 2px;
+  border-radius: 0.125rem;
+  border: 5px solid #fff;
+}
+
+.gallery-thumb {
+  width: 50px;
+  height: 50px;
+  opacity: .5;
+  -webkit-transition: .3s opacity;
+  transition: .3s opacity;
+}
+
+.gallery-thumb:hover {
+  opacity: 1;
+}
+
+.gallery-thumb-container {
+  height: 80px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: #1b1b1b;
+}
+
+.gallery-thumb-navs {
+  display: none;
+}
+
+.gallery-thumb-navs.show {
+  display: block;
+}
+
+.gallery-thumb-nav {
+  position: absolute;
+  cursor: pointer;
+  font-size: 1.4rem;
+  color: rgba(255, 255, 255, .7);
+  background: #222;
+  height: 80px;
+  line-height: 80px;
+  width: 50px;
+  text-align: center;
+  z-index: 900;
+}
+
+.gallery-thumb-nav:hover {
+  color: #fff;
+}
+
+.gallery-thumb-prev {
+  left: 0;
+}
+
+.gallery-thumb-next {
+  right: 0;
+}
+
+.active .gallery-thumb {
+  opacity: 1;
+}
+
+.gallery-img-desc {
+  color: #000;
+  line-height: 1.7;
+  padding: 1rem 1.5rem;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.8125rem;
+  position: fixed;
+  top: 4rem;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border-radius: 2px;
+  width: 90%;
+  background-color: #bdbdbd;
+  opacity: 0;
+  -webkit-transition: .3s all;
+  transition: .3s all;
+  z-index: 1000;
+}
+
+.gallery-img-desc p {
+  overflow: hidden;
+  height: 90px;
+}
+
+.gallery-img-desc:empty {
+  display: none;
+}
+
+.gallery-img-desc.active {
+  opacity: 1;
+}
+
+
+/* White theme */
+
+.theme-white #gallery-theater-stage > .gallery {
+  background-color: #fffdf7;
+}
+
+.theme-white .gallery-actions {
+  background-color: #eee;
+  border: 1px solid #ddd;
+}
+
+.theme-white .gallery-toggle-desc.active {
+  color: #ff4444;
+}
+
+.theme-white .gallery-theme-switch {
+  border-right: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+}
+
+.theme-white .gallery-thumb-toggle,
+.theme-white .gallery-thumb-toggle:before,
+.theme-white .gallery-thumb-toggle:after {
+  color: #777;
+  border-color: #aaa;
+}
+
+.theme-white .gallery-thumb-container {
+  background-color: #e2e2e2;
+  border-top: 1px solid #c7c7c7;
+}
+
+.theme-white .gallery-actions-btn {
+  color: #777;
+}
+
+.theme-white .gallery-actions-btn:hover {
+  color: #ff4444;
+}
+
+.theme-white .gallery-item.active {
+  border-color: #ff4444;
+}
+
+.theme-white .gallery-thumb-nav {
+  color: #777;
+  background-color: #eee;
+}
+
+.theme-white .gallery-thumb-prev {
+  border-right: 1px solid #c7c7c7;
+}
+
+.theme-white .gallery-thumb-next {
+  border-left: 1px solid #c7c7c7;
+}
+
+.theme-white .gallery-thumb-nav:hover {
+  color: #ff4444;
+}
+
+.theme-white .gallery-img-desc {
+  background-color: #eee;
+}
+
+.theme-white .gallery-loader {
+  background-color: #777;
+}
+
+.theme-white .spinner > div {
+  color: #ff4444;
+}
+
+@media screen and (max-width: 768px) {
+  .gal-prev {
+    -webkit-transform: translate(-101%, -50%);
+    transform: translate(-101%, -50%);
+  }
+  .gal-next {
+    -webkit-transform: translate(101%, -50%);
+    transform: translate(101%, -50%);
+  }
+  .gallery-thumb-toggle {
+    bottom: 50px;
+    left: 0;
+    color: #fff;
+    width: 100%;
+    text-align: center;
+    -webkit-transition: .1s all;
+    transition: .1s all;
+  }
+  .gallery-thumb-toggle.up {
+    bottom: 96px;
+  }
+  .gallery-thumb-toggle:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 10%;
+    margin: auto;
+    width: 38%;
+    border-top: 1px solid rgba(255, 255, 255, .2);
+    height: 1px;
+  }
+  .gallery-thumb-toggle:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: 10%;
+    margin: auto;
+    width: 38%;
+    border-top: 1px solid rgba(255, 255, 255, .2);
+    height: 1px;
+  }
+  .gallery-thumb-container {
+    bottom: -1000px;
+    -webkit-transition: .1s all;
+    transition: .1s all;
+  }
+  .gallery-thumb-container.show {
+    bottom: 0;
+  }
+}
+
+/* CSS for button */
+
+@media(max-width: 769px){
+  .gallery .gallery-thumb-toggle{
+    display: none;
+  }
+ }
+
+/* 相本裡的左右控制鍵 */
+#theaterPlayButton,#theaterStopButton{
+  left:30%;
+}
+#theaterStopButton{
+  -webkit-text-stroke: 0.02em #ffbb35;
+  text-shadow: 0em 0em 0.2em #ff0000;
+}
+.theaterButton{
+position: absolute;
+text-align: center;
+width: 35%;
+bottom: 1.8em;
+background-color: transparent;
+border: none;
+color: white;
+padding: 0.4em 1em;
+text-align: center;
+text-decoration: none;
+display: inline-block;
+font-size: 2.2rem;
+margin: 4px 2px;
+cursor: pointer;
+border-radius: 5px;
+-webkit-text-stroke: 1px #06a2ff;
+text-shadow: 0em 0em 0.2em #8F7;
+}
+
+#theaterNextButton{
+right:0;
+}
+#theaterPreviousButton{
+left:0;
+}
+
+.show-gallery-2 .gallery-thumb-container{
+  overflow: hidden;
+}
+.show-gallery-2 img.gallery-image{
+  position: absolute;
+}
+.show-gallery-2 .image-container{
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+#gallery-theater-stage > .show-gallery-2.gallery{
+  position: relative;
+  height: 0;
+  width: 100%;
+  z-index: unset;
+  overflow: hidden;
+}
+.show-gallery-2 .gallery-thumb-container{
+  position: absolute;
+}
+.show-gallery-2 .gallery-image {
+  top: 42%;
+}
+.show-gallery-2 .gallery-actions{
+  display: none;
+}
+.show-gallery-2 .gallery-img-desc{
+  position: absolute;
+}
+@media screen and (max-width: 768px){
+  .show-gallery-2 .gallery-thumb-container {
+      bottom: 0px;
+  }
+}

app/controllers/admin/galleries_controller.rb

@@ -1,19 +1,353 @@
+require 'rubyXL'
 class Admin::GalleriesController < OrbitAdminController
+  include Admin::GalleriesHelper
   before_filter :setup_vars
   before_action :authenticate_user, :except => "imgs"
   before_action :log_user_action
-  layout "back_end"
-  def index
-    @albums = Album.all
+  layout :compute_layout
+  find_tag = Tag.all.select{|value| value.name==I18n.t('gallery.not_show_desc')}
+  RackTempMiddleExist = defined?(Rack::TempfileReaper)
+  RACK_TEMPFILES = defined?(Rack::RACK_TEMPFILES) ? Rack::RACK_TEMPFILES : 'rack.tempfiles'
+  Is_Rails5 = (Rails.version.to_f >= 5)
+  if find_tag.length==0
+    module_app_id = ModuleApp.where(:key=>"gallery").first[:_id]
+    tags = ModuleApp.where(:key=>"gallery").first.tags
+    tag0 = Tag.new(is_default: false,module_app_ids: [module_app_id])
+    tag1 = Tag.new(is_default: false,module_app_ids: [module_app_id])
+    nowlocale = I18n.locale
+    I18n.available_locales.each do |locale|
+      I18n.locale = locale
+      tag0.name = I18n.t('gallery.show_desc')
+      tag1.name = I18n.t('gallery.not_show_desc')
+    end
+    I18n.locale = nowlocale
+    tag0.save
+    tag1.save
+    tags << tag0
+    tags << tag1
+  elsif find_tag.length>1
+    show_tags = Tag.all.select{|value| value.name==I18n.t('gallery.show_desc')}
+    show_tags.each_with_index do |show_tag,index1|
+      if index1>0
+        if show_tag.taggings.count==0
+          show_tag.delete
+        end
+      end
+    end
+    find_tag.each_with_index do |not_show_tag,index1|
+      if index1>0
+        if not_show_tag.taggings.count==0
+          not_show_tag.delete
+        end
+      end
+    end
+  end
+  if RackTempMiddleExist # Avoid Rack::TempfileReaper Middleware to unlink temp files automatically.
+    if Is_Rails5
+      def fix_tempfile_reaper
+        request.set_header(RACK_TEMPFILES, [])
+      end
+    else
+      def fix_tempfile_reaper
+        env[RACK_TEMPFILES] = nil
+      end
+    end
+  else
+    def fix_tempfile_reaper #do nothing for old rack
+    end
+  end
+  def compute_layout
+    if action_name== 'index' && !params['page_no'].nil?
+      false
+    else
+      'back_end'
+    end
+  end
+  def get_tag
+    album = Album.find(params['ele_id']) rescue nil
+    if !album.nil?
+      text =  album.tags.collect do |tag|
+                "<li class=\"label\"> #{tag.name}</li>"
+              end.join
+      render :plain => text
+    else
+      render :plain => ''
+    end
+  end
+  def rotate_images
+    begin
+      image_ids = params['image_ids'].split(',')
+      count = image_ids.count
+      rot_ang = params[:rotate_angle].to_i
+      variable = AlbumVariable.first
+      if variable.nil?
+        variable = AlbumVariable.new
+      end
+      variable.finish = false
+      variable.save!
+      Thread.new do
+        variable = AlbumVariable.first
+        image_ids.each_with_index do |image_id,index|
+          image = AlbumImage.find(image_id) rescue nil
+          next if image.nil?
+          if !(image.album_crops.first.nil?)
+            w_and_h = image.file.get_w_and_h
+            cords = image.album_crops.map{|v| [[v.crop_x.to_f,v.crop_y.to_f],
+                                              [v.crop_x.to_f,v.crop_y.to_f+v.crop_h.to_f],
+                                              [v.crop_w.to_f+v.crop_x.to_f,v.crop_y.to_f],
+                                              [v.crop_w.to_f+v.crop_x.to_f,v.crop_y.to_f+v.crop_h.to_f]]}[0]
+            rot_diff = rot_ang/90
+            if (rot_diff) % 2 == 1
+              new_w = (w_and_h[1]).to_f
+              new_h = (w_and_h[0]).to_f
+            else
+              new_w = (w_and_h[0]).to_f
+              new_h = (w_and_h[1]).to_f
+            end
+            
+            rot_times = rot_diff % 4
+            deg = (90.0*rot_times/180*Math::PI)
+            cords = cords.collect do |cord|
+              x = cord[0]-w_and_h[0].to_f/2
+              y = cord[1]-w_and_h[1].to_f/2
+              [x*Math.cos(deg)-y*Math.sin(deg)+new_w/2,x*Math.sin(deg)+y*Math.cos(deg)+new_h/2]
+            end
+            all_x = cords.collect do |cord|
+              cord[0]
+            end
+            all_y = cords.collect do |cord|
+              cord[1]
+            end
+            image.album_crops.first.update_attributes(crop_x: all_x.min,crop_y: all_y.min,crop_w: all_x.max - all_x.min,crop_h: all_y.max - all_y.min)
+          end
+          variable.progress_percent = (index*100.0/count).floor.to_s+'%'
+          image.file.rotate_ang(rot_ang)
+          all_version = image.file.versions.map{|k,v| k}
+          begin
+            variable.progress_filename = image[:file].to_s
+            all_version.each do |version|
+              if !(version.to_s == 'resized' && crop_but_no_backup(image)) 
+                image.file.recreate_versions! version
+                image.save!
+              end
+            end
+          rescue => e
+            variable.progress_filename = e.inspect.to_s
+            puts e.inspect
+          end
+          variable.save!
+        end
+        variable.finish = true
+        variable.save!
+      end
+    rescue => e
+      puts e.inspect
+    end
+    redirect_to admin_galleries_crop_process_path
+  end
+  
+  def save_crop
+    begin
+      images = AlbumImage.where(:id.in => Array(params[:id]))
+      x = params['x']
+      y = params['y']
+      w = params['w']
+      h = params['h']
+      cords = x.zip(y,w,h)
+      count = cords.length
+      variable = AlbumVariable.first
+      if variable.nil?
+        variable = AlbumVariable.new
+      end
+      variable.finish = false
+      variable.save!
+      Thread.new do
+        variable = AlbumVariable.first
+        image_ids= images.pluck(:id)
+        image_ids.each_with_index do |image_id,index|
+          image = AlbumImage.find(image_id)
+          cord = cords[index]
+          if image.album_crops.first.nil?
+              image.album_crops.create(crop_x: cord[0],crop_y: cord[1],crop_w: cord[2],crop_h: cord[3])
+          else
+              image.album_crops.first.update_attributes(crop_x: cord[0],crop_y: cord[1],crop_w: cord[2],crop_h: cord[3])
+          end
+          variable.progress_percent = (index*100.0/count).floor.to_s+'%'
+          all_version = image.file.versions.map{|k,v| k}
+          begin
+            #org_fname = image.file.path
+            #org_extname = File.extname(org_fname)
+            #org_fname.slice! org_extname
+            #FileUtils.cp(org_fname + org_extname, org_fname + '_resized' + org_extname)
+            variable.progress_filename = image[:file].to_s
+            all_version.each do |version|
+                if !(version.to_s == 'resized' && crop_but_no_backup(image)) 
+                    image.file.recreate_versions! version
+                    image.save!
+                end
+            end
+          rescue => e
+            variable.progress_filename = e.inspect.to_s
+            puts e.inspect
+          end
+          variable.save!
+        end
+        variable.finish = true
+        variable.save!
+      end
+    rescue => e
+      puts e.inspect
+    end
+    redirect_url = admin_galleries_crop_process_path
+    render :json => {'href' => redirect_url}.to_json
+  end
+  def call_translate
+    text = params['text']
+    render :json => {'translate' => "#{t(text.to_s)}" }.to_json
+  end
+  def recreate_image
+    notalive =  ((AlbumVariable.first.notalive.nil? ? true : AlbumVariable.first.notalive) rescue true)
+    if notalive
+      if !params['album_id'].to_s.empty?
+        variable = AlbumVariable.first
+        if variable.nil?
+          variable = AlbumVariable.new
+        end
+        variable.finish = false
+        variable.save!
+        choice_ids = params['album_id'].split(',')
+        albums = Album.where(:id.in => choice_ids)
+        if !(params['use_default']=='true')
+          color = params['color_choice'].to_s.empty? ? 'transparent' : params['color_choice']
+          albums.each do |album|
+            if album.album_colors.first.nil?
+              album.album_colors.create('color' => color)
+            else
+              album.album_colors.first.update_attributes('color' => color, 'updated_at' => Time.now)
+            end
+          end
+        end
+        count = albums.reduce(0){|x,i| i.album_images.count+x}
+        Thread.new do
+          i = 0
+          album_ids = albums.pluck(:id)
+          album_ids.each do |album_id|
+            album = Album.find(album_id) rescue Album.new()
+            album_image_ids = album.album_images.pluck(:id)
+            album_image_ids.each do |image_id|
+              image = AlbumImage.find(image_id)
+              error = nil
+              all_version = image.file.versions.map{|k,v| k}
+              begin
+                all_version.each do |version|
+                  if !(version.to_s == 'resized' && crop_but_no_backup(image)) 
+                      image.file.recreate_versions! version
+                      image.save!
+                  end
+                end
+              rescue => error
+              end
+              variable = AlbumVariable.first
+              variable.progress_percent = (i*100.0/count).floor.to_s+'%'
+              if !error.nil?
+                  variable.progress_filename = error.inspect.to_s.encode('UTF-8', invalid: :replace, undef: :replace, replace: '?')
+                  sleep(1)
+              else
+                  variable.progress_filename = image[:file].to_s
+              end
+              variable.save!
+              i+=1
+            end
+          end
+          variable = AlbumVariable.first
+          variable.finish = true
+          variable.save!
+        end
+      else
+        variable = AlbumVariable.first
+        variable.finish = true
+        variable.progress_filename = ''
+        variable.progress_percent = '100%'
+        variable.save!
+      end
+    end
+  end
+  def finish_recreate
+    variable = AlbumVariable.first
+    variable.progress_percent = '0%'
+    variable.progress_filename = ''
+    variable.notalive = true
+    variable.save!
+    render :plain => ''
+  end
+  def recreate_progress
+    progress_percent = AlbumVariable.first.progress_percent rescue '0%'
+    progress_filename = AlbumVariable.first.progress_filename rescue ''
+    finish = AlbumVariable.first.finish rescue false
+    render :json => {'percent' => progress_percent, 'filename' => progress_filename, 'finish' => finish }.to_json
+  end
+  def filter_album
     @tags = @module_app.tags
+    @categories = @module_app.categories.enabled
+    @filter_fields = filter_fields(@categories, @tags)
+    @filter_fields.delete(:status)
+    albums = Album.all.asc(:order).with_categories(filters("category")).with_tags(filters("tag"))
+    @fiter_albums = search_data(albums,[:name])
+  end
+  def update_album_setting
+    if params[:album_setting_limit]
+      params_album_setting = {:limit=>params[:album_setting_limit]}
+    else
+      params_album_setting = params.require(:album_setting).permit!
+    end
+    AlbumSetting.first.update_attributes(params_album_setting)
+    redirect_to admin_galleries_path
+  end
+  def setting
+    @album_setting = AlbumSetting.first
+  end
+  def index
+    album_length = Album.all.count
+    album_sort = Album.all.asc(:created_at)
+    if (album_sort.first.album_colors.first.nil? rescue false)
+      album_sort.each_with_index do |album|
+        if album.album_colors.first.nil?
+            album.album_colors.create('color' => 'transparent')
+        end
+      end
+    end
+    @url = request.original_fullpath
+    @limit_count = AlbumSetting.first.limit.to_i
+    @limit_count = album_length if @limit_count == 0
+    if params['page_no'].nil?
+      @show_script = true 
+      @albums = filter_album.take @limit_count
+    else
+      @show_script = false 
+      start = (params['page_no'].to_i - 1)*@limit_count
+      @albums = filter_album[start...start+@limit_count]
+    end
+    if AlbumColor.count!=0
+      if AlbumColor.all.desc('updated_at').first[:color] == 'transparent'
+          @color_save = ''
+      else
+          @color_save = AlbumColor.desc('updated_at').first[:color]
+      end
+    else
+        @color_save = 'transparent'
+    end
+    if request.xhr?
+      render :partial => "albums"
+    end
+
   end
 
   def show
     @album = Album.find(params[:id])
-    @images = @album.album_images
+    @images = @album.album_images.asc(:order)
     image_content = []
     @images.each do |image|
-      image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
+      image_content << {"id" => image.id.to_s,"title"=> image.title_translations, "description" => image.description_translations,"tags" => image.tag_ids.map(&:to_s)}
     end
     @tags = @module_app.tags
     @photos_data = {"galleries" => image_content}.to_json
@@ -22,7 +356,7 @@ class Admin::GalleriesController < OrbitAdminController
   def new
     @album = Album.new
     @tags = @module_app.tags
-    @categories = @module_app.categories
+    @categories = @module_app.categories.enabled.authorized(current_user)
   end
 
   def create
@@ -41,12 +375,42 @@ class Admin::GalleriesController < OrbitAdminController
     @album = Album.find(params[:id])
     if can_edit_or_delete?(@album)
       @tags = @module_app.tags
-        @categories = @module_app.categories
+      @categories = @module_app.categories.enabled.authorized(current_user)
     else
       render_401
     end
   end
 
+  def import
+    @album = Album.find(params[:id])
+  end
+
+  def importimages
+    album = Album.find(params[:id])
+    workbook = RubyXL::Parser.parse(params["import_file"].tempfile)
+    sheet = workbook[0]
+    if sheet.count <= 203
+      sheet.each_with_index do |row, i|
+        next if i < 3
+        v = row.cells.first.value rescue nil
+        next if v.blank?
+        import_this_image(row, album)
+      end
+      redirect_to admin_gallery_path(album.id)
+    else
+      redirect_to import_admin_gallery_path(:error => "1")
+    end
+  end
+
+  def excel_format
+    @album = Album.find(params[:id])
+    respond_to do |format|
+      format.xlsx {
+        response.headers['Content-Disposition'] = 'attachment; filename="gallery_import_format.xlsx"'
+      }
+    end
+  end
+
   def set_cover
     if params[:set_cover] == "true"
       album = Album.find(params[:album_id])
@@ -61,10 +425,10 @@ class Admin::GalleriesController < OrbitAdminController
 
   def get_photoData_json
     @album = Album.find(params[:id])
-    @images = @album.album_images
+    @images = @album.album_images.asc(:order)
     image_content = []
     @images.each do |image|
-      image_content << {"id" => image.id.to_s, "description" => image.description_translations,"tags" => image.tags.collect{|t| t.id.to_s}}
+      image_content << {"id" => image.id.to_s,"title"=> image.title_translations, "description" => image.description_translations,"tags" => image.tag_ids.map(&:to_s)}
     end
     render :json=>{"galleries" => image_content}.to_json
   end
@@ -117,8 +481,10 @@ class Admin::GalleriesController < OrbitAdminController
         image_title: image.title,
         image_description: image.description,
         image_file: { url: "http://#{request.host_with_port}#{@image_file}",
-                      thumb: "http://#{request.host_with_port}#{image.file.thumb.to_s}"},
-                      image_tag_names: tags}
+                      thumb: "http://#{request.host_with_port}#{image.file.thumb.to_s}"
+        },
+        image_tag_names: tags
+      }
     end
 
     render :json=>JSON.pretty_generate(output)
@@ -127,47 +493,117 @@ class Admin::GalleriesController < OrbitAdminController
   def imgs
     @album = Album.find(params[:gallery_id])
     @tag_names = Array.new
-    @images = @album.album_images.all
+    @images = @album.album_images.asc(:order)
     @output =  Array.new
     @images.each do |values|
     @output << { _id:  values.id.to_s,
                  theater_link: admin_image_path(values),
                  description: values.description,
                  title: values.title,
-                 file: values.file.as_json[:file],
+                 file: values.file.as_json,
                  gallery_album_id: values.album_id,
+                 order: values.order,
                  tags: values.tags}
     end
     render :json=>{"images" => @output, "tags" => @album.tags}.to_json
   end
 
 
-
-  def upload_image
-    @album = Album.find(params[:album_id])
-    @files = params['files']
-    a = Array.new
-    @files.each do |file|
-      @image = @album.album_images.new
-      @image.file = file
-      @image.tags = @album.tags rescue []
-      @image.save!
-      a << {"thumbnail_url"=>@image.file.thumb.url,"url"=>admin_image_path(@image)}
+  def upload_process
+    if (AlbumUnprocess.first.upload_success rescue false)
+      album_unprocess = Array(AlbumUnprocess.all)
+      count = album_unprocess.count
+      Thread.new do
+        album_unprocess.each_with_index do |un_image,i|
+          begin
+            album = AlbumImage.where(:id => un_image.image_id).first
+            if album.nil?
+              un_image.delete
+            else
+              album.file = un_image.save_var
+              album.save!
+              file = un_image.save_var.tempfile
+              file.close
+              File.delete file.path
+              un_image.delete
+              variable = AlbumVariable.first
+              variable.progress_filename = album[:file]
+              variable.progress_percent = ((i+1)*100.0/count).floor.to_s + '%'
+              variable.save!
             end
-    render :json=>{"files"=>a}.to_json
+          rescue => e
+            puts ['err',un_image.inspect,e.inspect]
+            un_image.destroy
+          end
+        end
+        variable = AlbumVariable.first
+        variable.finish = true
+        variable.save!
+      end
+      album_temp = AlbumUnprocess.first
+      album_temp.upload_success = false
+      album_temp.save!
+    end
+  end
+  def start_upload_process
+    album_temp = AlbumUnprocess.first
+    album_temp.upload_success = true
+    album_temp.save!
+    render :json => {}.to_json
+  end
+  def init_upload
+    variable = AlbumVariable.first
+    if variable.nil?
+      variable = AlbumVariable.new
+    end
+    variable.count = params['all_length'].to_i
+    variable.finish = false
+    variable.progress_percent = '0%'
+    variable.progress_filename = 'processing!!'
+    variable.notalive = true
+    variable.save!
+    render :json => {}.to_json
+  end
+  def upload_image
+    album = Album.find(params[:album_id])
+    files = params['files']
+    album_unprocess = AlbumUnprocess.new()
+    files.each do |file|
+      image = album.album_images.new
+      image.tags = album.tag_ids.map(&:to_s)
+      if(AlbumVariable.first.count==1 rescue true)
+        image.file = file
+      else
+        album_unprocess.image_id = image.id
+        album_unprocess.upload_success = false
+        album_unprocess.save_var = file
+        album_unprocess.save!
+        ObjectSpace.undefine_finalizer(file.tempfile)
+        fix_tempfile_reaper
+      end
+      image.save!
+    end
+    render :json=>{"files"=>[{}]}.to_json
+  end
+
+  def last_image_id
+    album = Album.find(params[:albumid])
+    lastimage = album.album_images.last
+    render :json => {"last_image_id" => (lastimage ? lastimage.id.to_s : nil)}.to_json
   end
 
   def new_images 
-
-    if params[:last_image_id] != ""
-      @lastimage = AlbumImage.find(params[:last_image_id])
     @album = Album.find(params[:album_id])
-      @newimages = @album.album_images.where(:created_at.gt => @lastimage.created_at)
+    if params[:last_image_id].present?
+      lastimage = AlbumImage.find(params[:last_image_id]) rescue nil
+      if lastimage
+        @newimages = @album.album_images.where(:order.lt=>lastimage.order).desc(:created_at)
       else
-      @album = Album.find(params[:album_id])
-      @newimages = @album.album_images
+        @newimages = @album.album_images.where(:id.gt=>params[:last_image_id]).desc(:created_at)
+      end
+    else
+      @newimages = @album.album_images.desc(:created_at)
     end
-
     render :layout=>false
   end
 
@@ -183,11 +619,11 @@ class Admin::GalleriesController < OrbitAdminController
   end
 
   def update
-    @album = Album.find(params[:id])
+    album = Album.find(params[:id])
     tagsToDestroy = []
     tagsToAdd = []
     new_tags = params[:album][:tags] || []
-    old_tags = @album.tags.collect{|t| t.id.to_s}
+    old_tags = album.tag_ids.map(&:to_s)
     old_tags.each do |tag|
        if !new_tags.include?(tag)
         tagsToDestroy << tag
@@ -200,17 +636,17 @@ class Admin::GalleriesController < OrbitAdminController
         end
       end
     end
-    update_children_image_tag(tagsToDestroy,tagsToAdd)
-    @album.update_attributes(album_params)
-    redirect_to "/admin/galleries/"+@album.id.to_s
+    update_children_image_tag(album,tagsToDestroy,tagsToAdd)
+    album.update_attributes(album_params)
+    redirect_to admin_gallery_path(album.id)
   end
 
-  def update_children_image_tag(tagsToDestroy,tagsToAdd)
+  def update_children_image_tag(album,tagsToDestroy,tagsToAdd)
     # tagsToDestroy will contain  all tag ids which have to be deleted from the galley_images
     # tagsToAdd will contain all tag ids which ve to be added in tall album_images
-      @images = AlbumImage.all
-      @images.each do |image|
-        image_tags = image.tags.collect{|t| t.id.to_s}
+    images = album.album_images
+    images.each do |image|
+      image_tags = image.tag_ids.map(&:to_s)
       tagsToAdd.each do |tag|
         image_tags << tag
       end
@@ -224,8 +660,19 @@ class Admin::GalleriesController < OrbitAdminController
     end
   end
 
-  private
+  def select_albums
+    filter_album()
+    @category_id_albums_maps = @fiter_albums.group_by{|album| album.category_id}
+  end
 
+  private
+    def crop_but_no_backup(image)
+      fname = image.file.path
+      extension = File.extname(fname)
+      base_name = fname.chomp(extension)
+      base_name += ('_resized'+ extension)
+      File.file?(base_name)
+    end
     def setup_vars
       @module_app = ModuleApp.where(:key=>"gallery").first
     end

app/controllers/admin/images_controller.rb

@@ -1,17 +1,65 @@
 class Admin::ImagesController < OrbitAdminController
 	before_filter :setup_vars
+	def crop_process
+	end
+	def batch_crop
+        images = params['image_ids'].split(',')
+        @img = []
+		images.each do |image|
+			@img << AlbumImage.find(image)
+		end
+		render 'batch_crop'
+	end
+	def edit
+		@image = AlbumImage.find(params[:id])
+		render 'edit_image'
+	end
 	def show
 		@image = AlbumImage.find(params[:id])
 		@albumid = @image.album_id
 		@album = Album.find(@albumid)
-		@images = @album.album_images.all
+		@images = @album.album_images.asc(:order)
+	end
+
+	def changeorder
+		type = params[:type]
+		if type == "imgholder"
+			album = Album.find(params[:album_id]) rescue nil
+			images = params[:imageids]
+			images.each_with_index.reverse_each do |image, i|
+				img = AlbumImage.find(image) rescue nil
+				if !img.nil?
+					img.order = i
+					img.save 
+				end
+			end
+			if album
+				album.update(:min_order=>-1)
+			end
+		elsif type == "orbit_gallery"
+			albums = params[:imageids]
+			albums.each_with_index.reverse_each do |albumid, i|
+				album = Album.find(albumid) rescue nil
+				if !album.nil?
+					album.order = i
+					album.save 
+				end
+			end
+			AlbumSetting.update_all(:min_order=>-1)
+		end
+    	render :json => {"success" => true}.to_json
   	end
 
 	def delete_photos
 		images = params['images']
 		images.each do |image|
 			img = AlbumImage.find(image)
-			img.delete
+			img.destroy
+			begin
+				FileUtils.rm_rf(File.dirname(img.file.path))
+			rescue => e
+				puts ["can't delete",e]
+			end
 		end
 		if params['delete_cover'] == "true"
 			album = Album.find(params['album_id'])

app/controllers/galleries_controller.rb

@@ -1,12 +1,76 @@
 class GalleriesController < ApplicationController
+
+  find_tag = Tag.all.select{|value| value.name==I18n.t('gallery.not_show_desc')}
+  if find_tag.length==0
+    module_app_id = ModuleApp.where(:key=>"gallery").first[:_id]
+    tags = ModuleApp.where(:key=>"gallery").first.tags
+    tag0 = Tag.new(is_default: false,module_app_ids: [module_app_id])
+    tag1 = Tag.new(is_default: false,module_app_ids: [module_app_id])
+    nowlocale = I18n.locale
+    I18n.available_locales.each do |locale|
+      I18n.locale = locale
+      tag0.name = I18n.t('gallery.show_desc')
+      tag1.name = I18n.t('gallery.not_show_desc')
+    end
+    I18n.locale = nowlocale
+    tag0.save
+    tag1.save
+    tags << tag0
+    tags << tag1
+  elsif find_tag.length>1
+    show_tags = Tag.all.select{|value| value.name==I18n.t('gallery.show_desc')}
+    show_tags.each_with_index do |show_tag,index1|
+      if index1>0
+        if show_tag.taggings.count==0
+          show_tag.delete
+        end
+      end
+    end
+    find_tag.each_with_index do |not_show_tag,index1|
+      if index1>0
+        if not_show_tag.taggings.count==0
+          not_show_tag.delete
+        end
+      end
+    end
+  end
+
   def index
-      albums = Album.filter_by_categories
+    set_image_version
+    @album_setting = AlbumSetting.first
+    page_no = OrbitHelper.page_number
+    data_count = OrbitHelper.page_data_count
+    albums = Album.filter_by_categories.filter_by_tags.asc(:order).page(page_no).per(data_count)
+    album_color_map = AlbumColor.where(:album_id.in=> albums.pluck(:id)).pluck(:album_id,:color,:album_card_background_color,:album_card_text_color).map{|v| [v[0],v[1..-1]]}.to_h
     galleries = albums.collect do |a|
+      doc = Nokogiri::HTML(a.description.to_s)
+      alt_text = doc.text.empty? ? 'gallery image' : doc.text
+      colors = album_color_map[a.id] || []
+      thumb_src = a.cover_path(@image_version)
+      if thumb_src
+        thumb_srcs = thumb_src.split('/')
+        thumb_srcs[-1] = thumb_srcs[-1].sub(/^(?:(?!_).)*_/,"")
+        thumb_path = thumb_srcs[0..-2].join('/')
+        thumb_path_name = thumb_srcs[-1]
+        src = "#{thumb_path}/#{thumb_path_name}"
+        thumb_large_src = "#{thumb_path}/thumb_large_#{thumb_path_name}"
+        mobile_src = "#{thumb_path}/mobile_#{thumb_path_name}"
+        theater_src = "#{thumb_path}/theater_#{thumb_path_name}"
+      else
+        src = thumb_src = thumb_large_src = mobile_src = theater_src = "/assets/gallery/default.jpg"
+      end
       {
         "album-name" => a.name,
         "album-description" => a.description,
+        "alt_title" => alt_text,
         "link_to_show" =>  OrbitHelper.url_to_show(a.to_param),
-        "thumb-src" => a.cover_path || "/assets/gallery/default.jpg"
+        "thumb-src" => thumb_src,
+        "src" => src,
+        "thumb-large-src" => thumb_large_src,
+        "mobile-src" => mobile_src,
+        "theater-src" => theater_src,
+        "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)
       }
     end
     {
@@ -14,50 +78,131 @@ class GalleriesController < ApplicationController
       "extras" => {"widget-title"=>"Gallery"},
       "total_pages" => albums.total_pages
     }
-
+  end
+  def show
+    set_image_version
+    @album_setting = AlbumSetting.first
+    params = OrbitHelper.params
+    album = Album.find_by_param(params[:uid].to_s)
+    flag = show_desc?
+    colors = (AlbumColor.where(:album_id=> album.id).pluck(:color,:album_card_background_color,:album_card_text_color)[0])||[] rescue []
+    images = album.album_images.asc(:order).collect do |a|
+      src = a.file.url
+      thumb_large_src = a.file.thumb_large.url
+      mobile_src = a.file.mobile.url
+      theater_src = a.file.theater.url
+      case @image_version
+      when 'thumb'
+        thumb_src = a.file.thumb.url
+      when 'thumb_large'
+        thumb_src = thumb_large_src
+      when 'mobile'
+        thumb_src = mobile_src
       end
 
-  def show
-    params = OrbitHelper.params
-    album = Album.find_by_param(params[:uid])
-  	images = album.album_images.collect do |a|
+      alt_text = (a.description.blank? ? "gallery image" : Nokogiri::HTML(a.description.to_s).text())
       {
-        "image-description" => a.description,
-	     "link_to_show" =>  "/" + I18n.locale.to_s + params[:url] + "/-" + a.id.to_s + "?method=theater",
-	     "thumb-src" => a.file.thumb.url
+        "image-description" => (flag ? a.description : ''),
+        "image_short_description" => a.title,
+        "alt_title" => alt_text,
+        "link_to_show" =>  "#" + a.id.to_s,
+        "src" => a.file.url,
+        "thumb-src" => thumb_src,
+        "thumb-large-src" => thumb_large_src,
+        "mobile-src" => mobile_src,
+        "theater-src" => theater_src,
+
+        "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)
       }
     end
     {
       "images" => images,
-        "data" => {"album-title"=>album.name}
+      "data" => {"album-title"=>album.name,
+                 "album-description" => (flag ? "<p><span>#{album.description}</span></p>" : "")}
+    }
+  end
+  def iterate_data(*args)
+    tmp = nil
+    args.each do |arg|
+      if !arg.blank? && arg != 'transparent'
+        tmp = arg
+        break
+      end
+    end
+    tmp
+  end
+  def album_widget
+    @album_setting = AlbumSetting.first
+    params = OrbitHelper.params
+    tags = OrbitHelper.widget_tags.empty? ? ["all"] : OrbitHelper.widget_tags
+    albums = Album.filter_by_widget_categories(OrbitHelper.widget_categories,false).filter_by_tags(tags)
+    album_color_map = AlbumColor.where(:album_id.in=> albums.pluck(:id)).pluck(:album_id,:color,:album_card_background_color,:album_card_text_color).map{|v| [v[0],v[1..-1]]}.to_h
+    galleries = albums.collect.with_index do |a,i|
+      doc = Nokogiri::HTML(a.description.to_s)
+      alt_text = doc.text.empty? ? 'gallery image' : doc.text.strip
+      colors = album_color_map[a.id] || []
+      thumb_src = a.cover_path || "/assets/gallery/default.jpg"
+      cover_image = AlbumImage.find(a.cover) rescue a.album_images.first
+      image_description = a.description
+      image_short_description = a.name
+      {
+        "link_text" => a.name,
+        "album-name" => a.name,
+        "album-description" => a.description,
+        "alt_title" => alt_text,
+        "link_to_show" =>  OrbitHelper.widget_more_url + "/" + a.to_param + "#" + (cover_image.id.to_s rescue ""),
+        "src" => thumb_src.sub("thumb_",""),
+        "thumb-src" => thumb_src,
+        "thumb-large-src" => thumb_src.sub("thumb_","thumb_large_"),
+        "mobile-src" => thumb_src.sub("thumb_","mobile_"),
+        "theater-src" => thumb_src.sub("thumb_","theater_"),
+        "image_description" => image_description,
+        "image_short_description" => image_short_description,
+        "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),
+        "i" => i
+      }
+    end
+    {
+      "images" => galleries,
+      "extras" => {"widget-title"=>"Gallery","more_url" => OrbitHelper.widget_more_url}
     }
   end
-
   def widget
-    albums = Album.filter_by_widget_categories
+    @album_setting = AlbumSetting.first
+    tags = OrbitHelper.widget_tags.empty? ? ["all"] : OrbitHelper.widget_tags
+    albums = Album.filter_by_widget_categories(OrbitHelper.widget_categories,false).filter_by_tags(tags).to_a
+    album_ids = []
+    albums_map = {}
+    albums.each do |ab|
+      album_ids << ab.id
+      albums_map[ab.id] = ab
+    end
+    album_color_map = AlbumColor.where(:album_id.in=> album_ids).pluck(:album_id,:color,:album_card_background_color,:album_card_text_color).map{|v| [v[0],v[1..-1]]}.to_h
     params = OrbitHelper.params
     counts = OrbitHelper.widget_data_count
-    
-    images = []
-    total_images = 0
-    if !albums.blank?
-      albums.each do |album|
-        total_images = total_images + album.album_images.count
-      end
-      total_images = counts > 9 ? 9 : counts
-      while images.count < counts and images.count < AlbumImage.count
-        albums.each do |album|
-          img = album.album_images.sample
-          if !images.include?(img) && img != nil 
-            images << img
-          end
-        end
-      end
-    end
-    images = images.collect do |a|
+    images = AlbumImage.where(:album_id.in=>album_ids).desc(:id).limit(counts *5).sample(counts)
+    images = images.each_with_index.collect do |a,i|
+      colors = album_color_map[a.album_id] || []
+      alt_text = (a.description.blank? ? "gallery image" : Nokogiri::HTML(a.description).text().strip)
+      f = a.file
+      ab = albums_map[a.album_id]
       {
-        "link_to_show" =>  OrbitHelper.widget_more_url + "/-" + a.id.to_s + "?method=theater",
-        "thumb-src" => a.file.thumb.url
+        "link_text" => "",
+        "link_to_show" =>  OrbitHelper.widget_more_url + "/" + ab.to_param + "#" + a.id.to_s,
+        "alt_title" => alt_text,
+        "src" => f.url,
+        "thumb-src" => f.thumb.url,
+        "thumb-large-src" => f.thumb_large.url,
+        "image_description" => a.description,
+        "image_short_description" => a.title,
+        "mobile-src" => f.mobile.url,
+        "theater-src" => f.theater.url,
+        "album-name" => ab.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),
+        "i" => i
       }
     end
     {
@@ -65,35 +210,83 @@ class GalleriesController < ApplicationController
       "extras" => {"widget-title"=>"Gallery","more_url" => OrbitHelper.widget_more_url}
     }
   end
-
   def imgs(album_id)
     album = Album.find(album_id)
-    tag_names = Array.new
-    images = album.album_images.all
+    images = album.album_images.asc(:order)
     output =  Array.new
     images.each do |values|
+      alt_text = (values.description.nil? || values.description == "" ? "gallery image" : values.description)
       output << { _id:  values.id.to_s,
                   description: values.description,
                   title: values.title,
-                 file: values.file.as_json[:file],
+                  alt_title: alt_text,
+                  url: values.file.url,
+                  file: values.file.as_json,
                   gallery_album_id: values.album_id,
                   tags: values.tags}
     end
     return output
   end
-
   def theater
-    params = OrbitHelper.params
-    image = AlbumImage.find(params[:uid])
+    if params[:id].include?('page=')
+      album = Album.where(uid: params[:id].sub('page=','')).first
+      albumid = album.id
+      image = album.album_images.first
+    else
+      image = AlbumImage.find(params[:id])
       albumid = image.album_id
       album = Album.find(albumid)
-    images = album.album_images.all
-   {
+    end
+    images = album.album_images.asc(:order)
+    data = {
       "album" => album,
-    "images" => images,
-    "image" => image,
-    "wall_images" => imgs(albumid),
-    "back_to_albums" => OrbitHelper.url_to_show(album.to_param)
+      "image" => image.id.to_s,
+      "images" => imgs(albumid)
     }
+    render :json => {"data" => data}.to_json
+  end
+
+  private
+
+  def show_desc?
+    tags = OrbitHelper.page_tags if tags.blank?
+    tags = [tags].flatten.uniq
+    flag = true
+    tag_temp = Tag.all.select{|value| tags.include? value.id.to_s}
+    tag_temp_length = 0
+    tag_temp.each do |value|
+      if value.name==I18n.t('gallery.show_desc')
+        flag = true
+      elsif value.name==I18n.t('gallery.not_show_desc')
+        flag = false
+      end
+    end
+    flag
+  end
+
+  def set_image_version
+    page = OrbitHelper.page
+    @image_version = 'thumb'
+    ModuleApp.all.select{|tmp| tmp.key.to_s=='gallery'}.each do |modile_app|
+      @show_option_items = modile_app.show_option_items rescue nil
+    end
+    if !(@show_option_items.nil?)
+      I18n.with_locale(:en) do
+        page.select_option_items.each do |select_option_item|
+          case select_option_item.field_name
+          when @show_option_items.keys[1].to_s
+            value = YAML.load(select_option_item.value)
+            tmp = value[:en]
+            if tmp == t('gallery.small_size')
+              @image_version = 'thumb'
+            elsif tmp == t('gallery.medium_size')
+              @image_version = 'thumb_large'
+            elsif tmp == t('gallery.large_size')
+              @image_version = 'mobile'
+            end
+          end
+        end
+      end
+    end
   end
 end

app/helpers/admin/galleries_helper.rb

@@ -1,2 +1,20 @@
 module Admin::GalleriesHelper
+  def import_this_image(row,album)
+    value = {}
+    image = AlbumImage.new
+    image.album = album
+    row.cells.each_with_index do |cell,index|
+      val = cell.value rescue nil
+      next if val.blank?
+      case index
+      when 0
+        image.remote_file_url = val
+      when 1
+        value["zh_tw"] = val
+        value["en"] = (row.cells[index + 1].value rescue "")
+        image.description_translations = value
+      end
+    end
+    image.save
+  end
 end

app/models/album.rb

@@ -5,7 +5,6 @@ class Album
   include OrbitCategory::Categorizable
   include OrbitTag::Taggable
   include Slug
-
   field :name, as: :slug_title, localize: true
   field :description, localize: true
   field :cover, default: "default"
@@ -13,13 +12,104 @@ class Album
   field :tag_names
   field :uid, type: String
   field :rss2_id, type: String
-
+  field :order, type: Integer, default: -1
+  field :min_order, type: Integer, default: -1
+  field :resize_gravity
+  field :thumb_process_option, type: Integer, default: 0
 	# has_and_belongs_to_many :tags, :class_name => "GalleryTag"
   has_many :album_images, :autosave => true, :dependent => :destroy
+  has_many :album_colors, :autosave => true, :dependent => :destroy
   accepts_nested_attributes_for :album_images, :allow_destroy => true
-
+  accepts_nested_attributes_for :album_colors, :allow_destroy => true
+  index({"order" => 1}, { unique: false, background: false })
+  before_create do |record|
+    topest_order = AlbumSetting.pluck(:min_order).first.to_i
+    if topest_order.nil? || topest_order == 0
+      tmp_order = -2
+    else
+      tmp_order = topest_order - 1
+    end
+    record.order = tmp_order
+    AlbumSetting.update_all(:min_order=>tmp_order)
+    true
+  end
+  after_destroy do
+    min_order = AlbumSetting.pluck(:min_order).first
+    if self.order == min_order
+      AlbumSetting.update_all(:min_order=>min_order + 1)
+    end
+  end
+  def resize_gravity
+    """
+    NorthWestGravity
+      Position object at top-left of region
+    NorthGravity
+      Position object at top-center of region
+    NorthEastGravity
+      Position object at top-right of region
+    WestGravity
+      Position object at left-center of region
+    CenterGravity
+      Position object at center of region
+    EastGravity
+      Position object at right-center of region
+    SouthWestGravity
+      Position object at left-bottom of region
+    SouthGravity
+      Position object at bottom-center of region
+    SouthEastGravity
+      Position object at bottom-right of region
+    """
+    tmp = self[:resize_gravity]
+    tmp.blank? ? OrbitHelper::SharedHash['gallery'][:resize_gravity]  : tmp
+  end
   def self.find_by_param(input)
-    self.find_by(uid: input)
+    self.find_by(uid: input.to_s)
+  end
+  def self.filter_by_tags(tags=[])
+    tags = OrbitHelper.page_tags if tags.blank?
+    tags = [tags].flatten.uniq
+    if !(tags.include?("all"))
+        tag_temp = Tag.all.select{|value| tags.include? value.id.to_s}
+        tag_temp_length = 0
+        tag_temp.each do |value| 
+          if value.name==I18n.t('gallery.show_desc') || value.name==I18n.t('gallery.not_show_desc')
+            tag_temp_length+=1
+          end
+        end
+        if tag_temp_length!=0
+            if (tags.length - tag_temp_length) == 0
+               tags = ['all'] 
+            end
+        end
+    end
+    if tags.blank? || (tags.include?("all") rescue false)
+      self.all
+    else
+      tags
+      taggings = Tagging.where(:tag_id.in=>tags).map{|item| item.taggable_id}
+      self.where(:id.in=>taggings)
+    end
+  end
+  def cover
+    tmp = self['cover']
+    if tmp=='default'
+      tmp = (self.album_images.first.id.to_s rescue 'default')
+    end
+    tmp
+  end
+  def cover_path(thumb_version='thumb')
+    tmp = self['cover_path']
+    if tmp.nil? && self.album_images.first
+      case thumb_version
+      when 'thumb'
+        tmp = self.album_images.first.file.thumb.url
+      when 'thumb_large'
+        tmp = self.album_images.first.file.thumb_large.url
+      when 'mobile'
+        tmp = self.album_images.first.file.mobile.url
+      end
+    end
+    tmp
   end
- 
 end

app/models/album_color.rb

@@ -0,0 +1,9 @@
+class AlbumColor
+  include Mongoid::Document
+  include Mongoid::Timestamps
+  field :color, type: String
+  field :album_card_background_color, type: String
+  field :album_card_text_color, type: String
+  
+  belongs_to :album
+end

app/models/album_crop.rb

@@ -0,0 +1,8 @@
+class AlbumCrop
+  include Mongoid::Document
+  field :crop_x, type: String
+  field :crop_y, type: String
+  field :crop_w, type: String
+  field :crop_h, type: String
+  belongs_to :album_image
+end

app/models/album_image.rb

@@ -1,16 +1,58 @@
+require 'net/http'
 class AlbumImage 
   include Mongoid::Document
   include Mongoid::Timestamps
   include OrbitTag::Taggable
-
   mount_uploader :file, GalleryUploader
-
   field :title
-	field :description, localize: true
+  field :title_translations, type: Hash, default: {}
+  field :description, type: String, localize: true, default: ""
   field :rss2_id, type: String
-
-	# has_and_belongs_to_many :tags, :class_name => "GalleryTag"
-
+  field :order, type: Integer, default: -1
   belongs_to :album
-
+  has_many :album_crops, :autosave => true, :dependent => :destroy
+  accepts_nested_attributes_for :album_crops, :allow_destroy => true
+  # has_and_belongs_to_many :tags, :class_name => "GalleryTag"
+  index({"order" => 1}, { unique: false, background: false })
+  before_create do
+    tmp_album = self.album
+    min_order = nil
+    if tmp_album
+      min_order = tmp_album.min_order
+      min_order = -1 if min_order == 0
+    end
+    if min_order.nil?
+      self.order = -Time.now.to_i
+    else
+      tmp_order = min_order - 1
+      self.order = tmp_order
+      Album.where(:id=>tmp_album.id).update_all(:min_order=>tmp_order) #present call save callback twice due to autosave
+    end
+    true
+  end
+  after_destroy do
+    min_order = Album.where(:id=>self.album_id).pluck(:min_order).first
+    puts "min_order: #{min_order} #{self.order}"
+    if self.order == min_order
+      Album.where(:id=>self.album_id).update_all(:min_order=>min_order + 1)
+    end
+  end
+  before_save do
+    if self.file_changed?
+      cover = self.album['cover']
+      if cover && cover == self.id
+        self.album.update_attributes({:cover_path => self.file.thumb.url, :cover=> self.id})
+      end
+    end
+  end
+  def title_translations
+    tmp = super || {}
+    if tmp == {}
+      tmp = I18n.available_locales.collect{|locale| [locale,self[:title]]}.to_h
+    end
+    tmp
+  end
+  def title
+    self.title_translations[I18n.locale]
+  end
 end

app/models/album_setting.rb

@@ -0,0 +1,18 @@
+class AlbumSetting
+  include Mongoid::Document
+  include Mongoid::Timestamps
+  field :limit
+  field :resize_gravity, type: String, default: 'Center'
+  ResizeGravities = %w[Center NorthWest North NorthEast West East SouthWest South SouthEast]
+  field :album_card_background_color, default: ''
+  field :album_card_text_color, default: '#000000'
+  field :min_order, type: Integer, default: -1
+  field :thumb_process_option, type: Integer, default: 1
+
+  before_save do
+    if defined?(OrbitHelper::SharedHash) && OrbitHelper::SharedHash
+      OrbitHelper::SharedHash['gallery'][:thumb_process_option] = self.thumb_process_option
+      OrbitHelper::SharedHash['gallery'][:resize_gravity] = (self.resize_gravity.blank? ? 'Center' : self.resize_gravity)
+    end
+  end
+end

app/models/album_unprocess.rb

@@ -0,0 +1,18 @@
+class AlbumUnprocess 
+	include Mongoid::Document
+	field :image_id
+	field :save_var, type: String
+	field :upload_success, type: Boolean
+	def save_var
+		temp = YAML.load(self[:save_var])
+		temp[:tempfile] = File.open(temp[:tempfile])
+		ActionDispatch::Http::UploadedFile.new(temp)
+	end
+	def save_var=(value)
+		temp = {:filename => value.original_filename, 
+				:type => value.content_type, 
+				:head => value.headers, 
+				:tempfile => value.tempfile.path}
+		self[:save_var] = temp.to_yaml
+	end
+end

app/models/album_variable.rb

@@ -0,0 +1,8 @@
+class AlbumVariable
+	include Mongoid::Document
+	field :count, type: Integer
+	field :progress_percent, type: String
+	field :progress_filename, type: String
+	field :finish, type: Boolean
+	field :notalive, type: Boolean
+end

app/uploaders/gallery_uploader.rb

@@ -2,26 +2,18 @@
 module CarrierWave
   module Uploader
     module Versions
-      def recreate_version!(version)
-        already_cached = cached?
-        cache_stored_file! if !already_cached
-        send(version).store!
-        if !already_cached && @cache_id
-          tmp_dir = File.expand_path(File.join(cache_dir, cache_id), CarrierWave.root)
-          FileUtils.rm_rf(tmp_dir)
-        end
+      def store_dir
+        "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
       end
     end
   end
 end
 
 class GalleryUploader < CarrierWave::Uploader::Base
-
   # Include RMagick or ImageScience support:
   # include CarrierWave::RMagick
   # include CarrierWave::ImageScience
   include CarrierWave::MiniMagick
-
   # Choose what kind of storage to use for this uploader:
   # storage :file
   # storage :s3
@@ -31,7 +23,18 @@ class GalleryUploader < CarrierWave::Uploader::Base
   def store_dir
     "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
   end
-
+  def get_org_url
+    if have_crop?
+        model.file.resized.url
+    else
+        model.file.url
+    end
+  end
+  def fix_exif_rotation 
+    manipulate! do |img|
+      img.tap(&:auto_orient)
+    end
+  end
   # Provide a default URL as a default if there hasn't been a file uploaded:
   # def default_url
   #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
@@ -48,19 +51,35 @@ class GalleryUploader < CarrierWave::Uploader::Base
   # version :thumb do
   #   process :scale => [50, 50]
   # end
-  
+  process :resizer
+  process :optimize
+  version :resized, :if => :have_crop?  do #backup
+    def full_filename(for_file)
+        extension = File.extname(super(for_file))
+        base_name = super(for_file).split('resized_').join('').chomp(extension)
+        base_name + '_resized'+ extension
+    end
+  end
+  version :crop_from_org, :if => :have_crop?  do
+    process :crop_it
+    def full_filename(for_file)
+        super(for_file).split('crop_from_org_').join('')
+    end
+  end
   version :thumb do
-    process :resize_to_fill => [200, 200]
+    process :convert => 'png', :if => :transparent?
+    process :thumb_process => [200, 200]
+  end
+  version :thumb_large do
+    process :convert => 'png', :if => :transparent?
+    process :thumb_process => [600, 600]
   end
-
   version :theater do
-    process :resize_to_limit => [1920, 1080]
+    process :limit_process => [1920, 1080]
   end
-
   version :mobile do
-    process :resize_to_limit => [1152, 768]
+    process :limit_process => [1152, 768]
   end
-
 # Add a white list of extensions which are allowed to be uploaded.
 # For images you might use something like this:
 # def extension_white_list
@@ -81,6 +100,96 @@ class GalleryUploader < CarrierWave::Uploader::Base
 #  rescue ::MiniMagick::Error, ::MiniMagick::Invalid => e
 #    raise CarrierWave::ProcessingError.new("Failed to manipulate with MiniMagick, maybe it is not an image? Original Error: #{e}")
 #  end
-
+  def get_w_and_h
+    if have_crop?
+        img = MiniMagick::Image.open(model.file.resized.path)
+    else
+        img = MiniMagick::Image.open(model.file.path)
+    end
+    [img[:width], img[:height]]
+  end
+  def rotate_ang(angle)
+    if have_crop?
+      img_path = model.file.resized.path
+    else
+      img_path = model.file.path
+    end
+    puts img_path
+    img = MiniMagick::Image.open(img_path)
+    img.rotate(angle)
+    puts img
+    img.write(img_path)
+  end
+  def optimize (*arg)
+    manipulate! do |img|
+        return img unless img.mime_type.match /image\/jpeg/
+        img.strip
+        img.combine_options do |c|
+            c.quality "90"
+            c.depth "24"
+            c.interlace "plane"
+        end
+        img
+    end
+  end
+  private
+  def resizer
+    size_of_file = size.to_f / (2**20)
+    if size_of_file > 5
+        img = MiniMagick::Image.open(path)
+        img_width = img[:width]
+        img_height = img[:height]
+        multiple = [img_width/Math.sqrt(size_of_file/5)/1920,img_height/Math.sqrt(size_of_file/5)/1080].max
+        if (multiple - multiple.to_i)>0.5
+            multiple = multiple.to_i + 0.5
+        else
+            multiple = multiple.to_i
+        end
+        resize_to_limit(multiple*1920,multiple*1080)
+    else
+        manipulate! do |img|
+            img
+        end
+    end
+  end
+  def limit_process(w,h)
+    resize_to_limit(w,h)
+  end
+  def have_crop?(*arg)
+    !(model.album_crops.first.nil?)
+  end
+  def crop_it
+    crops = model.album_crops.first
+    x=(crops.crop_x).to_i.abs.to_s
+    y=(crops.crop_y).to_i.abs.to_s
+    w=crops.crop_w.to_i
+    h=crops.crop_h.to_i
+    crop_image("#{w}x#{h}+#{x}+#{y}")
+  end
+  def crop_image(geometry)
+    img = MiniMagick::Image.open(model.file.resized.path)
+    img.crop(geometry)
+    img.write(model.file.crop_from_org.path)
+  end  
+  def transparent?(*arg)
+    now_album = model.album
+    now_album.album_colors.first['color']=='transparent' rescue true
+  end
+  def thumb_process(w,h)
+    now_album = model.album
+    thumb_process_option = now_album.thumb_process_option
+    if thumb_process_option == 0
+      thumb_process_option = OrbitHelper::SharedHash['gallery'][:thumb_process_option]
+    end
+    resize_gravity = (now_album.resize_gravity rescue 'Center')
+    case thumb_process_option
+    when 1
+      resize_and_pad(w, h, (transparent? ? :transparent : now_album.album_colors.first['color']), resize_gravity)
+    when 2
+      limit_process(w, h)
+    when 3
+      resize_to_fill(w, h, resize_gravity)
+    end
+  end
 end
 

app/views/admin/galleries/_album.html.erb

@@ -1,4 +1,7 @@
-<li class="rgalbum">
+<li class="rgalbum" data-image-id="<%= album.id %>">
+  <div class="check">
+    <input type="checkbox" class="checkbox" name='<%= album_name %>' value='<%= album.id %>'>
+  </div>
   <a href="<%= admin_gallery_path(album.id) %>">
     <% if album.cover == "default" %>
      <%= image_tag "gallery/default.jpg" %>
@@ -13,12 +16,14 @@
     <% if can_edit_or_delete?(album) %>
       <li><%= link_to (content_tag(:i,"",:class=>"icon-trash danger")), admin_gallery_path(album.id), "data-confirm" => "Are you sure?", :method=>:delete %></li>
     <% end %>
-    <li class="albumcateg"><%= Category.find(album.category_id).title %></li>
+    <li class="albumcateg"><%= (Category.find(album.category_id).title rescue album.category_id) %></li>
   </ul>
   <ul class="albumtag">
-    <% album.tags.each do |tag| %>
-      <% r = @tags.select { |k| k.id.to_s == tag.id.to_s } %>
-       <li class="label"><%= r.map {|t| t.name}[0]%></li>
-    <%end%>
+    <!--
+      <%# album.tags.each do |tag| %>
+        <%# r = @tags.select { |k| k.id.to_s == tag.id.to_s } %>
+         <li class="label"><%# r.map {|t| t.name}[0]%></li>
+      <%# end%>
+    -->
   </ul>
 </li>

app/views/admin/galleries/_albums.html.erb

@@ -0,0 +1,14 @@
+<%= render :partial => "album", :collection => @albums, locals: {album_name: 'album_id'} %>
+<script type="text/javascript">
+  $(document).ready(function(){
+    if( params()['keywords']){
+        $('#edit-order-btn').css("display",'none');
+    }else{
+        $('#edit-order-btn').css("display",''); 
+    }
+    max_page = <%= (@fiter_albums.length/@limit_count).ceil rescue 1 %>
+    if( max_page > 1 && max_page >= page_no){
+        $("#edit-order-btn").hide();
+    }
+  })
+</script>

app/views/admin/galleries/_form.html.erb

@@ -2,6 +2,7 @@
   <%= stylesheet_link_tag "lib/main-forms" %>
   <%= stylesheet_link_tag "lib/fileupload" %>
   <%= stylesheet_link_tag "lib/main-list" %>
+  <%= stylesheet_link_tag "jquery.minicolors" %>
 <% end %>
 <% content_for :page_specific_javascript do %>
   <%= javascript_include_tag "lib/bootstrap-fileupload" %>
@@ -9,7 +10,62 @@
   <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
   <%= javascript_include_tag "lib/modal-preview" %>
   <%= javascript_include_tag "lib/file-type" %>
+  <%= javascript_include_tag "jquery.minicolors" %>
 <% end %>
+<style>
+.main-forms fieldset .input-area .module-area {
+    padding: 20px;
+    overflow: visible;
+}
+input.minicolors-input{
+    height: 2.5em;
+    max-width: 90%;
+}
+</style>
+<script type="text/javascript">
+  function set_transparent(trigger) {
+      var color_input_box = $(trigger).parents('.control-group').eq(0).find('.minicolors-input')
+      if (trigger.checked){
+          color_input_box.attr('data-color',color_input_box.val())
+          color_input_box.minicolors('value','transparent')
+          color_input_box.prop('disabled',true)
+      }
+      else{
+          color_input_box.minicolors('value',color_input_box.attr('data-color'))
+          color_input_box.prop('disabled',false)
+      }
+  }
+  $(document).ready( function() {
+      $('.minicolors-input').minicolors({
+        defaultValue: '',
+        format: 'hex',
+        letterCase: 'lowercase',
+        position: 'bottom left',
+        change: function(value, opacity) {
+          if( !value ) return;
+          if( opacity ) value += ', ' + opacity;
+        },
+        theme: 'bootstrap'
+      });
+      $('.minicolors-input').attr('autocomplete','off')
+      $('.minicolors').css('margin','0 10px')
+      $('.minicolors').css('height','34px')
+      $('*').submit(function () {
+        $.each($(this).find('input.minicolors-input'),function(){
+          var value = $(this).val();
+          if (value == ''){
+              $(this).find('input.minicolors-input').val('transparent');
+              $(this).find('input.minicolors-input').prop('disabled',false); 
+          }
+        })
+        return true
+      });
+      $('#album_thumb_process_option').change(function(){
+        $('.thumb_process_option').hide();
+        $('.thumb_process_option'+'.'+$(this).val()).show();
+      }).trigger('change');
+  });
+</script>
    <fieldset>           
             <!-- Input Area -->
             <div class="input-area">
@@ -23,6 +79,9 @@
                 <li>
                   <a href="#tag" data-toggle="tab"><%= t(:tags) %></a>
                 </li>
+                <li>
+                  <a href="#advanced_setting" data-toggle="tab"><%= t('gallery.advanced_setting') %></a>
+                </li>
               </ul>
 
               <!-- Module -->
@@ -48,10 +107,65 @@
                     <label class="control-label muted"><%= t(:tags) %></label>
                     <%= select_tags(f, @module_app) %>
                   </div>
-
                 </div>
-
+            <!-- Frame Color Module -->
+                <% if @album.album_colors.first.nil? %>
+                    <% @album.album_colors.new('color' => 'transparent') %>
+                <% end %>
+                <div class="tab-pane fade" id="advanced_setting">
+                  <div class="control-group">
+                    <label class="control-label muted"><%= t('gallery.thumb_process_option_trans') %></label>
+                    <div class="controls">
+                      <%= f.select :thumb_process_option, t('gallery.thumb_process_option').to_enum.with_index.collect{|v, i| [v, i]} %>
                     </div>
+                  </div>
+                <%= f.fields_for :album_colors do |album_color_form| %>
+
+                  <!-- Frame Color -->
+                  <div class="control-group thumb_process_option 0 1" style='display: flex;'>
+                    <label class="control-label muted"><%= t('gallery.frame_color') %></label>
+                    <%= album_color_form.text_field :color , :class => 'input-block-level minicolors-input' %>
+                    <span style='font-size: 20px;display: flex;align-items: center;'>
+                    <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
+                    <%= t('gallery.transparent') %>
+                    </span>
+                  </div>
+                  <div class="control-group thumb_process_option 0 1">
+                    <label class="control-label muted">
+                      <%= t('gallery.thumb_resize_reference') %>
+                    </label>
+                    <div class="controls">
+                      <%
+                        default_resize_gravity = AlbumSetting::ResizeGravities[0]
+                        setting = AlbumSetting.first
+                        if setting
+                          default_resize_gravity = setting.resize_gravity
+                        end
+                      %>
+                      <%= f.select :resize_gravity, [["---#{t("default")}: #{t("gallery.gravity.#{default_resize_gravity}")}---",nil]]+AlbumSetting::ResizeGravities.collect{|v| [t("gallery.gravity.#{v}"),v]} %>
+                    </div>
+                  </div>
+                  <div class="control-group" style='display: flex;'>
+                    <label class="control-label muted"><%= t('gallery.album_card_background_color') %></label>
+                    <%= album_color_form.text_field :album_card_background_color, :class => 'input-block-level minicolors-input' %>
+                    <span style='font-size: 20px;display: flex;align-items: center;'>
+                    <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
+                    <%= t('gallery.transparent') %>
+                    </span>
+                  </div>
+                  <div class="control-group" style='display: flex;'>
+                    <label class="control-label muted"><%= t('gallery.album_card_text_color') %></label>
+                    <%= album_color_form.text_field :album_card_text_color, :class => 'input-block-level minicolors-input' %>
+                    <span style='font-size: 20px;display: flex;align-items: center;'>
+                    <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
+                    <%= t('gallery.transparent') %>
+                    </span>
+                  </div>
+                <% end %>
+                </div>
+              </div>
+              </div>
+              <div class='input-area'>
                   <div class="nav-name"><strong><%= t(:language) %></strong></div>
                      <ul class="nav nav-pills language-nav">
                       <% @site_in_use_locales.each_with_index do |locale, i| %>
@@ -95,5 +209,5 @@
                 <div class="form-actions">
                   <%= f.submit t("gallery.save"), :class=> "btn btn-primary bt-form-save" %>
                 </div>
-
+            </div>
           </fieldset>

app/views/admin/galleries/_image.html.erb

@@ -3,6 +3,9 @@
     	<img src="<%= image.file.thumb %>">
 	</a>
 	<% if can_edit_or_delete?(@album) %>
+		<span class="photo_edit" style="position: absolute;top: 0;background: #fff;padding: 5px;">
+		<a style="height:auto;color: #000;width: auto;" href="/<%= I18n.locale.to_s%>/admin/images/<%=image.id.to_s %>/edit">
+		<i class="<%= (@album.cover.to_s == image.id.to_s)? "editimage" : "editimage-2" %>"></i>edit</a></span>
 		<ul class="photo-action clearfix">
 			<li class="photo_cover"><i class="<%= (@album.cover.to_s == image.id.to_s)? "icons-star" : "icons-star-2" %>"></i></li>
 			<li class="phtot_depiction"><a href="#view-photo-depiction" class="open" for="description"><i class="icon-comment-alt"></i></a></li>

app/views/admin/galleries/_recreate_thumb.html.erb

@@ -0,0 +1,106 @@
+<%= javascript_include_tag "jquery.minicolors.js" %>
+<%= stylesheet_link_tag "jquery.minicolors.css" %>
+<nobr style='display: block;display: flex;flex-wrap: wrap;width: 100%;'>
+<form method="get" action="/admin/galleries/recreate_image?" name="thumb_recreate_form" 
+    style='display: block;display: inline-flex;flex-wrap: wrap;align-items: center;width: 100%;'>
+<span style="display:inline-flex;align-items:center;padding:0 1%;height:34px;font-size: 1.5em;">
+<%= t('gallery.frame_color')+':' %>
+</span>
+<input style='height:26px;max-width: 80%;' class='minicolors-input' type="text" name="color_choice" value="<%= @color_save.to_s %>" autocomplete="off">
+<span style='font-size: 20px;'>
+<input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
+<%= t('gallery.transparent') %>
+</span>
+<button type="button" onclick='submit_msg()' style='margin: 0 10px;height: 34px;'>
+<%= t('gallery.recreate') %>
+</button>
+<input type="hidden" name="album_id" value="">
+<span style='display: inline-flex;align-items: center;'>
+<input type='checkbox' name='use_default' value='true' onchange='hide_input(this)' style='width: 18px;height: 18px;margin: 0;'> 
+<label style='font-size: 20px;margin: 0;'><%= t('gallery.use_set') %></label>
+</span>
+</form>
+<span style='display: inline-flex;align-items: center;padding-bottom: 20px;padding-left: 10px;'>
+<input type='radio' name='checkbox' onchange='set_checked(this)'> 
+<label style='font-size: 20px;margin: 0;'><%= t('gallery.checked') %></label>
+<input type='radio' name='checkbox' onchange='set_unchecked(this)'> 
+<label style='font-size: 20px;margin: 0;'><%= t('gallery.unchecked') %></label>
+</span>
+</nobr>
+<script type="text/javascript"> 
+function hide_input(trigger) {
+    if (trigger.checked){
+        $('.minicolors').css('display','none')
+    }
+    else{
+        $('.minicolors').css('display','block')
+    }
+}
+function set_transparent(trigger) {
+    if (trigger.checked){
+        $('.minicolors-input').attr('data-color',$('.minicolors-input').val())
+        $('.minicolors-input').minicolors('value','')
+        $('.minicolors-input').prop('disabled',true)
+    }
+    else{
+        $('.minicolors-input').minicolors('value',$('.minicolors-input').attr('data-color'))
+        $('.minicolors-input').prop('disabled',false)
+    }
+}
+function set_checked(trigger) {
+    if (trigger.checked){
+        $(".rgbody input[name='album_id']").prop('checked',true)
+    }
+}
+function set_unchecked(trigger) {
+    if (trigger.checked){
+        $(".rgbody input[name='album_id']").prop('checked',false)
+    }
+}
+function submit_msg() { 
+    var msg = "<%= t('gallery.sure?') %>"; 
+    if (confirm(msg)==true){ 
+        $("form[name='thumb_recreate_form']").submit();
+        return true; 
+    }else{ 
+        return false; 
+    } 
+} 
+$("form[name='thumb_recreate_form']").submit(function () {
+    var formdata = new Array;
+    var data = $(".rgbody input[name='album_id']")
+    var count=data.length; 
+    var permit = true
+    for (i=0;i<count;i++){
+		if (data[i].checked){
+			formdata.push($(data[i]).val())
+		}
+    }
+    if (formdata.length===0){
+        permit = false
+    }
+	$("form[name='thumb_recreate_form']").find("input[name='album_id']").val(formdata.join(','))
+	if (permit){
+        return true;
+    }
+    else{
+        alert('<%= t('gallery.no_choose') %>')
+        return false;
+    }
+})
+$(document).ready( function() {
+    $('.minicolors-input').minicolors({
+      defaultValue: $(this).data('defaultValue') || '',
+      format: 'hex',
+      letterCase: 'lowercase',
+      position: 'bottom left',
+      change: function(value, opacity) {
+        if( !value ) return;
+        if( opacity ) value += ', ' + opacity;
+      },
+      theme: 'bootstrap'
+    });
+    $('.minicolors').css('margin','0 10px')
+    $('.minicolors').css('height','34px')
+});
+</script>

app/views/admin/galleries/_select_albums_form.html.erb

@@ -0,0 +1,198 @@
+<% unless @include_js_css_flag %>
+  <%= javascript_include_tag "lib/checkbox.card.js" %>
+  <%= stylesheet_link_tag 'basic/global' %>
+  <%= stylesheet_link_tag 'member_select' %>
+  <style>
+    .modal-backdrop, .modal-backdrop.fade.in {
+      opacity: 0.8;
+      filter: alpha(opacity=80);
+    }
+    .modal-header {
+      padding: 9px 15px;
+      border-bottom: 1px solid #eee;
+    }
+    .modal-header h3 {
+      margin: 0;
+      line-height: 30px;
+      font-weight: bold;
+      color: inherit;
+      text-rendering: optimizelegibility;
+    }
+    .modal-body input, .modal-body label {
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 20px;
+    }
+    .modal {
+      position: fixed;
+      top: 10%;
+      left: 50%;
+      z-index: 1050;
+      width: 560px;
+      margin-left: -280px;
+      background-color: #ffffff;
+      border: 1px solid #999;
+      border: 1px solid rgba(0, 0, 0, 0.3);
+      *border: 1px solid #999;
+      -webkit-border-radius: 6px;
+      -moz-border-radius: 6px;
+      border-radius: 6px;
+      outline: none;
+      -webkit-box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
+      -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+      box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
+      -webkit-background-clip: padding-box;
+      -moz-background-clip: padding-box;
+      background-clip: padding-box;
+    }
+    .modal-body input[type="checkbox"] {
+      cursor: pointer;
+    }
+    .checkbox-card li {
+      width: 100px;
+      height: auto;
+    }
+    .selected_album {
+      display: inline-block;
+    }
+    #albums-filter .tabs-left > .nano {
+      width: 160px;
+      min-height: 425px;
+      float: left;
+      margin-right: 1em;
+    }
+    .albums-filter-result {
+      min-height: 360px;
+      width: auto;
+    }
+    .checkbox-card li.active {
+      background-color: #0088cc;
+    }
+    .selected_album img {
+      width: 100px;
+    }
+  </style>
+  <% @include_js_css_flag = true %>
+<% end %>
+<% index = '' unless defined?(index) %>
+<div class="control-group">
+  <label class="control-label muted"><%= t('gallery.album') %></label>
+  <div class="controls">
+    <div id="selected_albums<%= index %>" class="selected_albums">
+      <% albums.each do |album| %>
+        <span class="alert alert-info selected_album" id="<%= album.id %>">
+          <span class='close remove_album' onclick='removeAlbum<%=index%>($(this))'>x</span>
+          <% if album.cover == "default" %>
+           <%= image_tag "gallery/default.jpg" %>
+          <% else %>
+           <img src="<%= album.cover_path %>">
+          <% end %>
+          <p class="album_name"><%= album.name %></p>
+          <%= hidden_field_tag field, album.id %>
+        </span>
+      <% end %>
+    </div>
+    <a class="btn btn-primary btn-small select_album_modal<%=index%>"><%= t(:add) %></a>
+  </div>
+</div>
+<script type="text/javascript">
+  selected_albums<%=index%> = Array();
+
+  $(function(){
+    $.each($("#selected_albums<%= index %> .selected_album"),function(i){
+      selected_albums<%=index%>.push($(this).attr("id"));
+    });
+
+    $(".select_album_modal<%=index%>").click(function(){
+      if($("#select_album<%=index%>").length==0) {
+        $("body").append("<span id='select_album<%=index%>'></span>");
+        $('.checkbox-card').cardCheck();
+      }
+      $.post("<%= select_albums_admin_galleries_path %>?index=<%=index%>",function(modal){
+        $("#select_album<%=index%>").html(modal);
+        $('#albums-filter').on('shown.bs.modal', function() {
+          $("#albums-filter .nano").nanoScroller();
+        });
+        $('#albums-filter').on('hidden.bs.modal', function () {
+          $("#select_album<%=index%>").remove();
+        });
+        updateModal<%=index%>();
+        $("#albums-filter").modal('show');
+      });
+    });
+
+  });
+
+  var addByCategory<%=index%> = function(category_id){
+    var flag = true;
+    var BreakException = {};
+    try {
+      selected_albums<%=index%>.forEach(function(album_id){
+          if($("#album_ids_"+category_id+"_"+album_id).prop('checked')){
+            flag = false;
+          }
+          if(!flag){
+            throw BreakException;
+          }
+      })
+    } catch (e) {
+      if (e !== BreakException) throw e;
+    }
+    if(flag){
+      $.each($("#category_"+category_id+" .check-item"), function(){
+        selected_albums<%=index%>.push($(this).find("input[type='checkbox']").val());
+      });
+    }
+  }
+
+  var removeAlbum<%=index%> = function(album){
+    var id = $(album).parent().attr('id');
+    $("#select_album<%=index%> input[type='checkbox'][value=\""+id+"\"]").prop('checked', false).parent('.check-item').removeClass('active').css('display','');
+    selected_albums<%=index%> = $.grep(selected_albums<%=index%>, function(value) {return value != id;});
+    $(album).parent().remove();
+  }
+  Array.prototype.unique = function(){
+    const distinct = (value, index, self) =>{
+      return self.indexOf(value) === index;
+    }
+    return this.filter(distinct);
+  }
+  var updateUsers<%=index%> = function(){
+    $.each($(".category_field input:checked"), function(){
+      addByCategory<%=index%>($(this).val());
+    });
+
+    $("#selected_albums<%= index %>").html("");
+    selected_albums<%=index%> = selected_albums<%=index%>.unique();
+    $.each(selected_albums<%=index%>, function(i, album_id){
+      var wrapper = $("input[value='"+album_id+"']").parent();
+      var album_name = wrapper.find(".album_name").html();
+      $("#selected_albums<%= index %>").append(
+          " <span class='alert alert-info selected_album' id='"+album_id+"'>"+
+          "<span class='close remove_album' onclick='removeAlbum<%=index%>($(this))'>x</span>"+
+          "<img src=\"" + wrapper.find('img').attr('src') + "\">" +
+          "<p class=\"album_name\">" + album_name + "</p>" +
+          "<input type='hidden' name='<%= field %>' value='"+album_id+"' >"+
+          "</span>"
+        );
+    });
+
+  }
+
+  var updateModal<%=index%> = function(){
+    $.each($("#selected_albums<%= index %> .selected_album"),function(){
+      var album_id = $(this).attr('id');
+      $("input[value='"+album_id+"']").parent("li").hide().addClass('active').find("input[type='checkbox']").prop('checked', true);
+    });
+    
+    $('.check-item').click(function(){
+      var check_box = $(this).find("input[type='checkbox']"); 
+      var album_id = check_box.val();
+      if(check_box.prop('checked')){
+        selected_albums<%=index%>.push(album_id);
+      }else{
+        selected_albums<%=index%> = $.grep(selected_albums<%=index%>, function(value) {return value != album_id;});
+      }
+    });
+  }
+</script>

app/views/admin/galleries/excel_format.xlsx.axlsx

@@ -0,0 +1,28 @@
+# encoding: utf-8
+
+wb = xlsx_package.workbook
+
+wb.add_worksheet(name: @album.name[0..100]) do |sheet|
+
+  sheet.merge_cells "A1:C1"
+  heading = sheet.styles.add_style(:b => true, :locked => true, :alignment=>{:horizontal => :center})
+  example = sheet.styles.add_style(:i => true)
+  row = []
+  row1 = []
+  row2 = []
+
+  row << "Import for album #{@album.name}"
+
+  row1 << t("gallery.img_link")
+  row2 << "http://www.example.com/example.jpg"
+
+  row1 << t("gallery.img_description") + "(" + t(:zh_tw) + ")"
+  row2 << "This is an image"
+  row1 << t("gallery.img_description") + "(" + t(:en) + ")"
+  row2 << "This is an image"
+
+  sheet.add_row row, :style => heading
+  sheet.add_row row1
+  sheet.add_row row2, :style => example
+
+end

app/views/admin/galleries/import.html.erb

@@ -0,0 +1,36 @@
+<% content_for :page_specific_javascript do %>
+	<script type="text/javascript" src="/assets/validator.js"></script>
+<% end %>
+<form action="<%= importimages_admin_gallery_path(@album.id) %>" method="post" class="form-horizontal main-forms" id="import-images-xls"  enctype="multipart/form-data">
+	<h3 style="padding-left: 30px;">Import from Excel for album <i><%= @album.name %></i></h3>
+	<%= hidden_field_tag :authenticity_token, form_authenticity_token %>
+	<div class="input-area">
+		<div class="control-group">
+			<div class="controls">
+		 		<a href="<%= excel_format_admin_gallery_path(@album.id,:format => "xlsx") %>">Download example sheet here.</a>  
+		 	</div>
+		 </div>
+		 <div class="control-group">
+		    <label for="import-images" class="control-label muted">Upload :</label>
+		    <div class="controls">
+		       <input type="file" id="import-images" name="import_file" data-fv-validation="required;mustbexls;" data-fv-messages="Cannot be empty; Must be an excel file.;" />
+	       <span class="help-block"> Only excel file is allowed. Max 200 entries.</span>
+	    </div>
+	  </div>
+	</div>
+	<div class="form-actions">
+		<input type="submit" value="Import" class="btn btn-primary">
+	</div>
+</form>
+
+<script type="text/javascript">
+	var form = new FormValidator($("#import-images-xls"));
+	form.validate_functions.mustbexls = function(val){
+		var t = val.split("."),
+			ext = t[t.length - 1];
+		return (ext == "xls" || ext == "xlsx")
+	}
+	<% if params[:error] == "1" %>
+		alert("More than 200 rows present.");
+	<% end %>
+</script>

app/views/admin/galleries/index.html.erb

@@ -1,20 +1,84 @@
-<ul id="orbit_gallery" class="gallery" data-gallery-id="gallery">
-  <% @albums.each do |album| %>
-    <%= render :partial => "album", :object => album %>
-  <% end %>
-</ul>
-
-<% content_for :page_specific_css do %>
+<% if @show_script %>
   <%= stylesheet_link_tag "gallery" %>
-<% end %>
-
+  <%= stylesheet_link_tag "lib/tags-groups" %>
   <% content_for :page_specific_javascript do %>
+   <%= javascript_include_tag "lib/jquery-ui-1.10.0.custom.min" %>
     <%= javascript_include_tag "jquery.masonry.min.js" %>
     <%= javascript_include_tag "jquery.lite.image.resize.js" %>
     <%= javascript_include_tag "gallery" %>
+    <script type="text/javascript">
+      var page_no = 2
+      var catch_flag = true
+      var max_page = <%= (@fiter_albums.length/@limit_count).ceil rescue 1 %>
+      if( max_page > 1){
+        $("#edit-order-btn").hide();
+      }
+      $('.bottomnav').ready(function(){
+        function load_html_func(){
+          $('#load_html').text("<%= t('gallery.wait_time') %>")
+          if (catch_flag){
+            catch_flag = true;
+            $.ajax({
+              type : "get",
+              url : "<%= @url %>",
+              dataType : "text",
+              data:{page_no: page_no},
+              global:false,
+              success: function(data)
+               {
+                $('#orbit_gallery').append(data)
+                page_no++
+                catch_flag = true
+                if (max_page < page_no){
+                  $("#edit-order-btn").show();
+                  $('#load_html').hide();
+                }
+                $('#load_html').text("<%= t('gallery.load_html') %>")
+               },
+              error : function(data){
+                catch_flag = true
+                alert('please try again later.')
+              }
+            });
+          }
+        }
+        $('#load_html').click(load_html_func)
+      })
+    </script>
   <% end %>
 
-
-
-
-
+  <%=  render_filter @filter_fields, "orbit_gallery" %>
+  <div class="order-edit-notification">Albums re-ordering enabled.</div>
+  <%= render 'recreate_thumb' %>
+  <script type="text/javascript">
+    $(document).ready(function(){
+      $('form.update_album_setting_form').submit(function(){
+        window.setTimeout(function(){alert('success')},500)
+      })
+    })
+  </script>
+  <%= form_tag '/admin/galleries/update_album_setting',remote: true,:class=>'update_album_setting_form' do %>
+    <%= t('gallery.album_limit_for_one_page') %>:
+    <%= text_field_tag :album_setting_limit, AlbumSetting.first.limit,:placeholder => t('gallery.blank_for_nil') %>
+    <input type="submit" value="<%= t('submit') %>">
+  <% end %>
+  <div class="rgbody" style='float: left;'>
+  	<ul id="orbit_gallery" class="gallery clearfix" data-gallery-id="gallery" 
+  	    style='display: inline-flex;flex-wrap: wrap;'>
+  	        <%= render :partial => "albums"%>
+  	</ul>
+  </div>
+  <div class="bottomnav clearfix">
+    <div class="action pull-right">
+      <% if can_edit_or_delete?(nil) %>
+        <a href="#" class="btn btn-small btn-info order-btn-class" id="edit-order-btn"><%= t('gallery.edit_order') %></a>
+      <% end %>
+      <% if @fiter_albums.length > @limit_count %>
+        <button class="btn btn-small btn-info" id="load_html"><%= t('gallery.load_html') %></button>
+      <% end %>
+      <a class="btn btn-small btn-primary" href="<%= new_admin_gallery_path %>" title="<%=t(:new_)%>"><%=t(:new_)%></a>
+    </div>
+  </div>
+<% else %>
+  <%= render :partial => "albums" %>
+<% end %>

app/views/admin/galleries/recreate_image.html.erb

@@ -0,0 +1,39 @@
+<%= t('gallery.progressbar')+':' %>
+<div style='width:100%;'>
+  <div class="progress">
+    <div class="progress-bar" style="width: 0%;text-align:center;background:#86f9fe;background: linear-gradient(90deg,#86f9fe,#2900f8);">0</div>
+  </div>
+  <div class="message" style='width:100%;text-align:center;'></div>
+</div>
+<SCRIPT LANGUAGE=javascript> 
+function get_data(){
+    var finish=false;
+    $.ajax({
+        url : "/admin/galleries/recreate_image/recreate_progress",
+        dataType : "json",
+        type : "post",
+        success:function(data){
+            $(".progress-bar").text(data.percent)
+            $(".message").text(data.filename)
+            finish = data.finish
+            if (finish){
+                $.get('/admin/galleries/recreate_image/finish_recreate')
+                clearInterval(id)
+                document.location.href = '/admin/galleries'
+                console.log('finish!')
+            }
+            $(".progress-bar").css('width',data.percent)
+        },
+        error:function(XMLHttpRequest, textStatus){
+            console.log(XMLHttpRequest);  //XMLHttpRequest.responseText    XMLHttpRequest.status   XMLHttpRequest.readyState
+            console.log(textStatus);
+            $(".progress-bar").text("<%= t('gallery.error') %>");
+            console.log('error')
+            $.get('/admin/galleries/recreate_image/finish_recreate')
+            $(".progress-bar").css('width','100%')
+            clearInterval(id)
+        }
+        })
+}
+var id = setInterval(get_data,1000)
+</SCRIPT>

app/views/admin/galleries/select_albums.html.erb

@@ -0,0 +1,85 @@
+<div id="albums-filter" class="modal fade">
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+    <h3><%= t('list.user') %></h3>
+  </div>
+  <div class="modal-body">
+    <div class="tabbable tabs-left">
+      <div class="nano">
+        <div class="content">
+          <ul class="nav nav-pills nav-stacked">
+            <li class="active"><a href="#all" data-toggle="tab"><%= t('category') %></a></li>
+            <% @categories.each do |category| %>
+              <li class=""><a href="#category_<%= category.id %>" data-toggle="tab"><%= category.title %></a></li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+      <div class="tab-content">
+        <div class="tab-pane fade in active" id="all">
+            <fieldset class="category_field">
+              <% @categories.each do |category| %>
+                <label class="checkbox inline">
+                  <%= check_box_tag 'category_ids[]', category.id, false, :id => "category_ids_#{category.id}" %> <%= category.title %>
+                </label>
+              <% end %>
+            </fieldset>
+        </div>
+
+        <% @categories.each do |category| %>
+          <div class="tab-pane fade" id="category_<%= category.id %>">
+              <fieldset class="clearfix">
+                <div class="albums-filter-result nano">
+                  <div class="content">
+                    <i class="icon-search"></i>
+                    <input class="search_names" placeholder="<%=t('users.name')%>" style="margin: 1em;">
+                    <div style="margin-bottom: 1em;"></div>
+                    <ul class="checkbox-card clearfix">
+                      <% @category_id_albums_maps[category.id].to_a.each do |album| %>
+                        <li class="check-item">
+                          <label>
+                            <% if album.cover == "default" %>
+                             <%= image_tag "gallery/default.jpg" %>
+                            <% else %>
+                             <img src="<%= album.cover_path %>">
+                            <% end %>
+                            <p class="album_name"><%= album.name %></p>
+                          </label>
+                          <%= check_box_tag 'album_ids[]', album.id , false , :id => "album_ids_#{category.id}_#{(album.id rescue '')}" %>
+                        </li>
+                      <% end %>
+                    </ul>
+                  </div>
+                </div>
+              </fieldset>
+          </div>
+        <% end %>
+        <div class="form-actions condition">
+          <button type="button" class="btn" data-dismiss="modal"><%= t(:cancel) %></button>
+          <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="updateUsers<%=@index rescue ''%>()"><%= t(:submit) %></button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script type="text/javascript">
+  $('#albums-filter a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+    try{
+      var target = $($(e.target).attr("href"));
+      target.find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
+    }catch(e){};
+  });
+  $(document).ready(function(){
+    $('.search_names').off('input').on('input',function(){
+      var name = $(this).val();
+      var $check_items = $(this).parent().find('.check-item');
+      $check_items.each(function(i,item){
+        if( $(item).find('.user-name').text().search(name) == -1){
+          $(item).css('display','none');
+        }else{
+          $(item).css('display','');
+        }
+      })
+    })
+  })
+</script>

app/views/admin/galleries/setting.html.erb

@@ -0,0 +1,85 @@
+<%= javascript_include_tag "jquery.minicolors" %>
+<%= stylesheet_link_tag "jquery.minicolors" %>
+<style type="text/css">
+  .control-group {
+    align-items: center;
+  }
+  .control-group {
+    align-items: center;
+  }
+</style>
+<script type="text/javascript">
+  function set_transparent(trigger) {
+      var color_input_box = $(trigger).parents('.control-group').eq(0).find('.minicolors-input')
+      if (trigger.checked){
+          color_input_box.attr('data-color',color_input_box.val())
+          color_input_box.minicolors('value','transparent')
+          color_input_box.prop('disabled',true)
+      }
+      else{
+          color_input_box.minicolors('value',color_input_box.attr('data-color'))
+          color_input_box.prop('disabled',false)
+      }
+  }
+  $(document).ready( function() {
+      $('.minicolors-input').minicolors({
+        defaultValue: '',
+        format: 'hex',
+        letterCase: 'lowercase',
+        position: 'bottom left',
+        change: function(value, opacity) {
+          if( !value ) return;
+          if( opacity ) value += ', ' + opacity;
+        },
+        theme: 'bootstrap'
+      });
+      $('.minicolors-input').attr('autocomplete','off')
+      $('.minicolors').css('margin','0 10px')
+      $('.minicolors').css('height','34px')
+      $('*').submit(function () {
+        $.each($(this).find('input.minicolors-input'),function(){
+          var value = $(this).val();
+          if (value == ''){
+              $(this).find('input.minicolors-input').val('transparent');
+              $(this).find('input.minicolors-input').prop('disabled',false); 
+          }
+        })
+        return true
+      })
+  });
+</script>
+<%= form_for @album_setting, url: '/admin/galleries/update_album_setting',:class=>'update_album_setting_form',method: 'post' do |f| %>
+  <div class="control-group" style='display: flex;'>
+    <label class="control-label muted"><%= t('gallery.album_limit_for_one_page') %></label>
+    <%= f.text_field :limit,:placeholder => t('gallery.blank_for_nil') %>
+  </div>
+  <div class="control-group" style='display: flex;'>
+    <label class="control-label muted"><%= t('gallery.thumb_process_option_trans') %></label>
+    <div class="controls">
+      <%= f.select :thumb_process_option, t('gallery.thumb_process_option').to_enum.with_index.collect{|v, i| [v, i]}[1..-1] %>
+    </div>
+  </div>
+  <div class="control-group" style='display: flex;'>
+    <label class="control-label muted"><%= t('gallery.thumb_resize_reference') %></label>
+    <%= f.select :resize_gravity, [["---#{t("default")}: #{t("gallery.gravity.#{AlbumSetting::ResizeGravities[0]}")}---",nil]]+AlbumSetting::ResizeGravities.collect{|v| [t("gallery.gravity.#{v}"),v]} %>
+  </div>
+  <div class="control-group" style='display: flex;'>
+    <label class="control-label muted"><%= t('gallery.album_card_background_color') %></label>
+    <%= f.text_field :album_card_background_color, :class => 'input-block-level minicolors-input' %>
+    <span style='font-size: 20px;display: flex;align-items: center;'>
+    <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
+    <%= t('gallery.transparent') %>
+    </span>
+  </div>
+  <div class="control-group" style='display: flex;'>
+    <label class="control-label muted"><%= t('gallery.album_card_text_color') %></label>
+    <%= f.text_field :album_card_text_color, :class => 'input-block-level minicolors-input' %>
+    <span style='font-size: 20px;display: flex;align-items: center;'>
+    <input type='checkbox' onchange='set_transparent(this)' style='width: 18px;height: 18px;margin: 0;'> 
+    <%= t('gallery.transparent') %>
+    </span>
+  </div>
+    
+  <%= f.hidden_field :id %>
+  <%= f.submit t('submit'),:class=>'btn btn-primary' %>
+<% end %>

app/views/admin/galleries/show.html.erb

@@ -1,27 +1,42 @@
-
 <%= stylesheet_link_tag "gallery" %>
 <%= stylesheet_link_tag "lib/tags-groups" %>
 <!-- <div class="topnav clearfix">
   <ul class="breadcrumb text-info pull-left">
-    <li><a href="/orbit_4.0.1/admin/dashboards/dashboards.shtml">Dashboard</a> <span class="divider">/</span></li>
-    <li><a href="<%#= panel_gallery_back_end_albums_path %>">Gallery</a> <span class="divider">/</span></li>
+    <li><a href="/orbit_4.0.1/admin/dashboards/dashboards.shtml"><%= t('gallery.dashboard') %></a> <span class="divider">/</span></li>
+    <li><a href="<%#= panel_gallery_back_end_albums_path %>"><%= t('gallery.gallery') %></a> <span class="divider">/</span></li>
     <li class="active"><%#= @album.name %></li>
   </ul>
 </div> -->
 <!-- Bottom Nav -->
+<input name='all_upload_length' type="hidden">
+<div class="order-edit-notification">Images re-ordering enabled.</div>
 <div class="bottomnav clearfix">
   <div class="action pull-left">
-    <a href="<%= admin_galleries_path %>" class="btn btn-small"><i class="icons-back"></i> Back</a>
+    <a href="<%= admin_galleries_path %>" class="btn btn-small"><i class="icons-back"></i> <%= t('gallery.back') %></a>
+    <a href="javascript:select_all()" class='btn btn-small'> <%= t('gallery.checked') %></a>
   </div>
   <div class="action pull-right">
-    <a href="#" class="btn btn-inverse btn-small deselect hide">Deselect</a>
+    <div id="crop_div" style="text-align: center;">
+      <%= t('gallery.crop_div').html_safe %>
+      <br>
+      <span id="show_degree">0</span>°
+      <br>
+      <button onclick="change_degree(90)"><%= t('gallery.add_degree') %></button>
+      <button onclick="change_degree(-90)"><%= t('gallery.reduce_degree') %></button>    
+    </div>
+    <a href="javascript:rotate()" class="btn btn-small hide crop"><%= t('gallery.rotate_images') %></a>
+    <a href="javascript:batch_crop()" class="btn btn-small hide crop"><%= t('gallery.batch_crop') %></a>
+    <a href="#" class="btn btn-inverse btn-small deselect hide"><%= t('gallery.deselect') %></a>
     <% if can_edit_or_delete?(@album) %>
-      <a href="#dialog" data-toggle="modal" class="btn btn-warning btn-small deletephoto hide"><i class="icons-cross-3"></i> Delete Photo</a>
-      <a href="#view-photo-tags" class="btn btn-primary btn-small addtags open hide" for="batch"><i class="icons-tag"></i> Add Tags</a>
-      <a href="<%= edit_admin_gallery_path(@album.id) %>" class="btn btn-small btn-success"><i class="icon-edit"></i> Edit</a>
+      <a href="#dialog" data-toggle="modal" class="btn btn-warning btn-small deletephoto hide"><i class="icons-cross-3"></i><%= t('gallery.delete_photo') %></a>
+      <a href="#view-photo-tags" class="btn btn-primary btn-small addtags open hide" for="batch"><i class="icons-tag"></i><%= t('gallery.add_tags') %></a>
+      <a href="<%= import_admin_gallery_path(@album.id) %>" class="btn btn-small btn-info"><i class="icons-download"></i><%= t('gallery.import') %></a>
+      <b class="divider"></b>
+      <a href="<%= edit_admin_gallery_path(@album.id) %>" class="btn btn-small btn-success"><i class="icon-edit"></i> <%= t('gallery.edit') %></a>
+      <a href="#" class="btn btn-small btn-info order-btn-class" id="edit-order-btn"><%= t('gallery.edit_order') %></a>
       <b class="divider"></b>
      
-      <a href="#" class="add-imgs btn btn-small btn-primary"><i class="icons-plus"></i> Add Image</a>
+      <a href="#" class="add-imgs btn btn-small btn-primary"><i class="icons-plus"></i><%= t('gallery.add_image') %></a>
     <% end %>
   </div>
   <form action="<%= admin_galleries_upload_image_path %>", id='fileupload'>
@@ -34,27 +49,27 @@
             <li>
               <div class="fileinput-button add-photo">
                 <i class="icon-plus icon-white"></i>
-                <span>Add files...</span>
+                <span><%= t('gallery.add_files') %>...</span>
                 <input type="file" name="files[]" multiple>
               </div>
                 <input type="hidden" value="<%= @album.id.to_s %>" name="album_id" id="fileupload_aid" />
             </li>
             <li>
-              <button type="submit" class="start add-photo">
+              <button type="submit" class="start add-photo" onclick="form_submit()">
                 <i class="icon-upload icon-white"></i>
-                <span>Start upload</span>
+                <span><%= t('gallery.start_upload') %></span>
               </button>
             </li>
             <li>
               <button type="reset" class="cancel add-photo">
                 <i class="icon-ban-circle icon-white"></i>
-                <span>Cancel upload</span>
+                <span><%= t('gallery.cancel_upload') %></span>
               </button>
             </li>
             <!-- <li>
               <button type="button" class="delete">
                 <i class="icons-trash icon-white"></i>
-                <span>Delete</span>
+                <span><%= t('gallery.delete') %></span>
               </button>
             </li> -->
           </ul>
@@ -73,7 +88,7 @@
     <!-- Drop Zone -->
     <div id="dropzone" class="drop">
       <div data-icons="&#xe0a3;"></div>
-      Drop files here
+      <%= t('gallery.drop_files_here') %>
     </div>
     <!-- The loading indicator is shown during file processing -->
     <div class="fileupload-loading"></div>
@@ -90,7 +105,7 @@
 <div class="rgbody">
   <div class="gallery-info">
     <h3><%= @album.name %></h3>
-    <p class="muted"><%= @album.description.html_safe %></p>
+    <p class="muted"><%= @album.description.to_s.html_safe %></p>
   </div> 
   <ul id="imgholder" class="gallery clearfix" data-gallery-id="<%= @album.id.to_s %>">
     <% @images.each do |image| %>
@@ -117,7 +132,7 @@
  <div id="view-photo-tags" class="nano" style="display:none">
       <div class="content">
         <form>
-          <fieldset>
+          <fieldset style="display: contents;">
            <legend>Tags</legend>
             <ul class="tags-groups">
               <% @tags.each do |tag| %>
@@ -137,7 +152,7 @@
               <% end %>
             </ul>
             <div class="form-actions">
-              <a href="javascript:$.pageslide.close()" class="btn btn-small">Cancel</a>
+              <a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t('gallery.cancel')  %></a>
               <input type="submit" value="Save" class="btn btn-primary" />
             </div>
           </fieldset>
@@ -149,13 +164,24 @@
       <div class="content">
         <form for="description" method="post" data-remote="true" action="/admin/galleries/update_image">
           <fieldset>
-            <legend>Description</legend>
+            <div class="btn-group">
               <% @site_in_use_locales.each_with_index do |locale, i| %>
-                <label><%= t(locale.to_s) %></label>
-                <textarea rows="10" name="album_image[description_translations][<%= locale %>]" for="<%= locale %>"></textarea>
+                <a class="btn<%= ' active in' if i == 0 %>" id="btn-<%= locale %>-fake" data-toggle="tab" href="#form-<%= locale %>"><%= t(locale) %></a>
               <% end %>
+            </div>
+            <div class="tab-content">
+              <% @site_in_use_locales.each_with_index do |locale, i| %>
+                  <div id="form-<%= locale %>-fake" role="tabpanel" aria-labelledby="btn-<%= locale %>" class="tab-pane fade <%= ( i == 0 ) ? "in active" : '' %>">
+                    <legend><%= I18n.t('description') %></legend>
+                    <textarea class="ckeditor_reduce description-editor" rows="10" name="album_image[description_translations][<%= locale %>]" for="<%= locale %>"></textarea>
+
+                    <legend><%= I18n.t('gallery.short-description') %></legend>
+                    <textarea class="ckeditor_reduce title-editor" rows="10" name="album_image[title_translations][<%= locale %>]" for="<%= locale %>"></textarea>
+                  </div>
+              <% end %>
+            </div>
             <div class="form-actions">
-              <a href="javascript:$.pageslide.close()" class="btn btn-small">Cancel</a>
+              <a href="javascript:$.pageslide.close()" class="btn btn-small"><%= t('gallery.cancel')  %></a>
               <input type="submit" value="Save" class="btn btn-primary" />
               <input type="hidden" value="" name="image_id" />
             </div>
@@ -194,7 +220,7 @@
                   <div class="bar" style="width:0%;"></div>
                 </div>
                 {% if (!o.options.autoUpload) { %}
-                  <button class="btn btn-primary start">
+                  <button class="btn btn-primary start" onclick="form_only_one_submit()">
                     <i class="icon-upload icon-white"></i>
                   </button>
                 {% } %}
@@ -236,7 +262,7 @@
           </li>
           <li class="name-size">
             <p><a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a></p>
-            <p ><span class="label label-success">Success</span> File uploaded successfully!</p>
+            <p ><span class="label label-success"><%= t('gallery.success') %></span><%= t('gallery.file_uploaded_successfully') %>!</p>
             <p class="label label-info">{%=o.formatFileSize(file.size)%}</p>
           </li>
         {% } %}

app/views/admin/galleries/upload_panel.html.erb

@@ -12,12 +12,12 @@
     <%= form_for @album, :url => panel_gallery_back_end_upload_image_path, :html => {:class => 'clear'} do |f| %>
         <div class="fileupload-buttonbar">
             <label class="fileinput-button">
-                <span>Add files...</span>
+                <span><%= t('gallery.add_files') %>...</span>
                 <input type="file" name="files[]" multiple>
             </label>
              <input type="hidden" value="<%= params[:album_id] %>" name="album_id" id="fileupload_aid" />
-            <button type="submit" class="start">Start upload</button>
-            <button type="reset" class="cancel">Cancel upload</button>
+            <button type="submit" class="start"><%= t('gallery.start_upload') %></button>
+            <button type="reset" class="cancel"><%= t('gallery.cancel_upload') %></button>
            <!-- <button type="button" class="delete">Delete files</button>-->
         </div>
     <!-- </form> -->

app/views/admin/galleries/upload_process.html.erb

@@ -0,0 +1,39 @@
+<%= t('gallery.progressbar')+':' %>
+<div style='width:100%;'>
+  <div class="progress">
+    <div class="progress-bar" style="width: 0%;text-align:center;background:#86f9fe;background: linear-gradient(90deg,#86f9fe,#2900f8);">0</div>
+  </div>
+  <div class="message" style='width:100%;text-align:center;'></div>
+</div>
+<SCRIPT LANGUAGE=javascript> 
+function get_data(){
+    var finish=false;
+    $.ajax({
+        url : "/admin/galleries/recreate_image/recreate_progress",
+        dataType : "json",
+        type : "post",
+        success:function(data){
+            $(".progress-bar").text(data.percent)
+            $(".message").text(data.filename)
+            finish = data.finish
+            if (finish){
+                $.get('/admin/galleries/recreate_image/finish_recreate')
+                clearInterval(id)
+                document.location.href = '/admin/galleries'
+                console.log('finish!')
+            }
+            $(".progress-bar").css('width',data.percent)
+        },
+        error:function(XMLHttpRequest, textStatus){
+            console.log(XMLHttpRequest);  //XMLHttpRequest.responseText    XMLHttpRequest.status   XMLHttpRequest.readyState
+            console.log(textStatus);
+            $(".progress-bar").text("<%= t('gallery.error') %>");
+            console.log('error')
+            $.get('/admin/galleries/recreate_image/finish_recreate')
+            $(".progress-bar").css('width','100%')
+            clearInterval(id)
+        }
+        })
+}
+var id = setInterval(get_data,1000)
+</SCRIPT>

app/views/admin/images/batch_crop.html.erb

@@ -0,0 +1,102 @@
+<style>
+    body{max-width: 100%;}
+</style>
+<script type="text/javascript" src="/assets/cropper.js"></script>
+<script type="text/javascript" src="/assets/jquery-cropper.js"></script>
+<link href="/assets/cropper.css" rel="stylesheet"></link>
+<div style='padding-left: 10px;display:flex; flex-wrap: wrap;width:100%;align-items: center;'>
+<div style='display:inline-flex;flex-direction:column;margin-right: 10px;'>
+<span style='display:inline-flex;'>
+<label style='padding: 5px;'><%= t('gallery.width') %>:</label><input type="text" name="width">
+</span>
+<span style='display:inline-flex;'>
+<label style='padding: 5px;'><%= t('gallery.height') %>:</label><input type="text" name="height">
+</span>
+</div>
+<button style='height: 50px;' onclick='change_config()'>修改裁減框長寬比</button>
+</div>
+<div style='display:flex; flex-wrap: wrap;width:100%'>
+    <% @img.each do |image| %>
+        <div class='<%= image.id %>' style='width:40%;max-width:40%;margin:10px 20px;'>
+            <img class='editimage' src="<%= image.file.get_org_url %>">
+        </div>
+    <% end %>
+</div>
+<button onclick='save_data()'><%= t('gallery.save') %></button>
+<script>
+    var cropper_img = [],options=[]
+    function change_config(){
+        var count = cropper_img.length
+        var aspect_value = parseInt($("input[name='width']").val())/parseInt($("input[name='height']").val())
+        for (var i=0;i<count;i++){
+            if (isNaN(aspect_value)){
+                try{
+                    delete options[i]['aspectRatio']
+                }
+                catch{
+                }
+            }else{
+                options[i].aspectRatio = aspect_value
+            }
+            $('.editimage').eq(i).cropper('destroy').cropper(options[i])   
+        }
+    }
+    var x=[],y=[],w=[],h=[]
+    var id = []
+    <% @img.each do |image| %>
+        <% if image.album_crops.first.nil? %>
+            <% image.album_crops.new() %>
+        <% end %>
+        <% if !image.album_crops.first.crop_x.to_s.empty? %>
+            x.push(<%= image.album_crops.first.crop_x %>)
+            y.push(<%= image.album_crops.first.crop_y %>)
+            w.push(<%= image.album_crops.first.crop_w %>)
+            h.push(<%= image.album_crops.first.crop_h %>)
+        <% else %>
+            x.push('')
+            y.push('')
+            w.push('')
+            h.push('')
+        <% end %>
+    <% end %>
+    $('img.editimage').on('load',function() {
+        var temp = $('.editimage').parent()
+        temp.each(function(){id.push($(this).attr('class'))})
+        var image = $('.editimage')
+        var count = image.length
+        <% @img.each_with_index do |_,i| %>
+            options[<%= i %>] = {
+                data: {
+                    x: x[<%= i %>],
+                    y: y[<%= i %>],
+                    width: w[<%= i %>],
+                    height: h[<%= i %>]
+                },
+                crop: function (e) {
+                  x[<%= i %>] = e.detail.x
+                  y[<%= i %>] = e.detail.y
+                  w[<%= i %>] = e.detail.width
+                  h[<%= i %>] = e.detail.height
+                },
+                viewMode: 2,
+                zoomOnWheel: false,
+                autoCropArea: 1
+              };
+            cropper_img.push($('.editimage').eq(<%= i %>).cropper(options[<%= i %>]));
+        <% end %>
+    });
+    function save_data(){
+        $.ajax({
+        url : '/admin/galleries/save_crop',
+        dataType : "json",
+        type : "post",
+        data:{x:x,y:y,w:w,h:h,id:id},
+        success:function(data){
+            window.location.href = data.href;
+        },
+        error:function(){
+            alert('Your server has some problem, please try again later!')
+        }
+        })
+    }
+</script>

app/views/admin/images/crop_process.html.erb

@@ -0,0 +1,39 @@
+<%= t('gallery.progressbar')+':' %>
+<div style='width:100%;'>
+  <div class="progress">
+    <div class="progress-bar" style="width: 0%;text-align:center;background:#86f9fe;background: linear-gradient(90deg,#86f9fe,#2900f8);">0</div>
+  </div>
+  <div class="message" style='width:100%;text-align:center;'></div>
+</div>
+<SCRIPT LANGUAGE=javascript> 
+function get_data(){
+    var finish=false;
+    $.ajax({
+        url : "/admin/galleries/recreate_image/recreate_progress",
+        dataType : "json",
+        type : "post",
+        success:function(data){
+            $(".progress-bar").text(data.percent)
+            $(".message").text(data.filename)
+            finish = data.finish
+            if (finish){
+                $.get('/admin/galleries/recreate_image/finish_recreate')
+                clearInterval(id)
+                document.location.href = '/admin/galleries'
+                console.log('finish!')
+            }
+            $(".progress-bar").css('width',data.percent)
+        },
+        error:function(XMLHttpRequest, textStatus){
+            console.log(XMLHttpRequest);  //XMLHttpRequest.responseText    XMLHttpRequest.status   XMLHttpRequest.readyState
+            console.log(textStatus);
+            $(".progress-bar").text("<%= t('gallery.error') %>");
+            console.log('error')
+            $.get('/admin/galleries/recreate_image/finish_recreate')
+            $(".progress-bar").css('width','100%')
+            clearInterval(id)
+        }
+        })
+}
+var id = setInterval(get_data,200)
+</SCRIPT>

app/views/admin/images/edit_image.html.erb

@@ -0,0 +1,60 @@
+<style>
+    body{max-width: 100%;}
+</style>
+<script type="text/javascript" src="/assets/cropper.js"></script>
+<link href="/assets/cropper.css" rel="stylesheet"></link>
+<img class='editimage'src="<%= @image.file.get_org_url %>">
+<div class='img-preview'></div>
+<button onclick='save_data()'><%= t('gallery.save') %></button>
+<script>
+    var x=[],y=[],w=[],h=[]
+    <% if @image.album_crops.first.nil? %>
+        <% @image.album_crops.new() %>
+    <% end %>
+    <% if !(@image.album_crops.first.crop_x.to_s.empty?) %>
+        x.push(<%= @image.album_crops.first.crop_x %>)
+        y.push(<%= @image.album_crops.first.crop_y %>)
+        w.push(<%= @image.album_crops.first.crop_w %>)
+        h.push(<%= @image.album_crops.first.crop_h %>)
+    <% end %>
+    $('img.editimage').on('load',function() {
+        var image = $('.editimage')
+        var options = {
+            data: {
+                x: x[0],
+                y: y[0],
+                width: w[0],
+                height: h[0]
+            },
+            crop: function (e) {
+              x[0] = e.detail.x
+              y[0] = e.detail.y
+              w[0] = e.detail.width
+              h[0] = e.detail.height
+              console.log('x:'+x+'y:'+y)
+            },
+            viewMode: 2,
+            zoomOnWheel: false,
+            autoCropArea: 1,
+            minContainerWidth: parseInt($('.editimage').width()),
+            minContainerHeight: parseInt($('.editimage').height())
+          };
+        var cropper = new Cropper(image[0],options);
+    });
+    function save_data(){
+        var temp = location.href.split('/').slice(-2)
+        var id = [temp[0]]
+        $.ajax({
+        url : '/admin/galleries/save_crop',
+        dataType : "json",
+        type : "post",
+        data:{x:x,y:y,w:w,h:h,id:id},
+        success:function(data){
+            window.location.href = data.href;
+        },
+        error:function(){
+            alert('Your server has some problem, please try again later!')
+        }
+        })
+    }
+</script>

app/views/admin/images/show.html.erb

@@ -24,7 +24,7 @@
           <a href="" class="togglelist" title="顯示照片清單" onclick="return false;">List</a>
           <a href="" class="browserfullscreen" title="顯示照片清單" onclick="return false;">F</a>
           <div class="slideinfo">
-            <span class="info"><%= @image.description %></span>
+            <span class="info"><%= @image.description.html_safe %></span>
           </div>
         </div>
       </div>

app/views/galleries/index.html.erb

@@ -1 +1,2 @@
 <%= render_view %>
+

app/views/galleries/show.html.erb

@@ -1 +1,144 @@
+<%
+  params = OrbitHelper.params
+  page = @page || Page.where(url:params['url']).first
+  @layout_type = 0
+  if page.methods.include?(:select_option_items)
+    @show_option_items = ModuleApp.where(key: 'gallery').last.show_option_items rescue nil
+    page.select_option_items.each do |select_option_item|
+      if !(@show_option_items.nil?) && select_option_item.field_name == @show_option_items.keys.first.to_s
+        value = YAML.load(select_option_item.value)
+        tmp = value[:en]
+        I18n.with_locale(:en) do
+          if tmp == t('gallery.grid_style')
+            @layout_type = 0
+          elsif tmp == t('gallery.card_style')
+            @layout_type = 1
+          elsif tmp == t('gallery.slideshow_style')
+            @layout_type = 2
+          end
+        end
+      end
+    end
+  end
+  data = action_data 
+%>
+<% if @layout_type==0 %>
 <%= render_view %>
+<% elsif @layout_type==1 %>
+
+<div class="show-gallery gallery card-group">
+  <h1 class="show-title">
+    <span><%= data['data']['album-title'] %></span>
+  </h1>
+  <%= data['data']['album-description'].html_safe %>
+  <link rel="stylesheet" type="text/css" href="/assets/gallery_card.css">
+  <div class="row show-content" data-level="0" data-list="images">
+    <% data['images'].each do |image| %>
+      <div class="card card-flip h-100">
+        <div class="card-front">
+          <div class="card-body" style="padding:0;">
+            <img
+              srcset="
+              <%= image['thumb-large-src'] %> 1024w,
+              <%= image['thumb-src'] %> 768w"
+              src="<%= image['thumb-src'] %>"
+              alt="<%= image['alt_title'] %>"
+            >
+            <div class="card-footer">
+              <h3 class="card-title"><%= image['image_short_description'] %></h3>
+            </div>
+          </div>
+        </div>
+        <div class="card-back">
+          <div class="card-body" style="background-color: <%= image['album_color'] %>;color: <%= image['album_card_text_color'] %>;">
+            <h3 class="card-title"><%= image['image_short_description'] %></h3>
+            <%= image['image_description'] %></h3>
+            <div class="card-button-group">
+              <a href="<%= image['link_to_show'] %>" class="btn btn-secondary view" onclick="window.location.hash = '<%= image['link_to_show'] %>';GalleryTheater();return false;">
+                <i class="fa fa-link" aria-hidden="true"></i>
+              </a>
+              <a href="<%= image['src'] %>" data-toggle="lightbox" data-gallery="gallery" class="btn btn-secondary preview" data-title="<%= image['alt_title'] %>" data-type="image" target="_blank">
+                <i class="fa fa-eye" aria-hidden="true"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>
+<% elsif @layout_type==2 %>
+<script type="text/javascript">
+  if (window.location.hash==''){
+    window.location.hash = '#page='+window.location.href.split(/\/|-/).slice(-1)[0].split('#')[0]
+  }
+  function set_gallery_height(){
+    var h = $('.gallery-thumb-container').height()+$('.gallery-image.gal-active').height()+$('.gallery-actions').height()+$('.theaterButton').height()+20
+    $('.show-gallery-2.gallery').css('height',h)
+  }
+  $(window).resize(function(){
+    set_gallery_height()
+  })
+</script>
+<% end %>
+<% OrbitHelper.render_css_in_head(["theater.css"]) %>
+<%= javascript_include_tag "jquery.touchSwipe.min" %>
+<%= javascript_include_tag "theater" %>
+<% OrbitHelper.render_meta_tags([{"name" => "mobile-web-app-capable","content" => "yes"},{"name" => "apple-mobile-web-app-status-bar-style","content" => "black-translucent"}]) %>
+<div id="gallery-theater-stage">
+   <div class="<%= @layout_type==2 ? 'show-gallery-2 ' : '' %>gallery">
+    <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') %>"><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">
+          <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">
+        </ul>
+    </div>
+    <div class="gallery-img-desc">
+      <div class="gallery-img-desc-inner">
+      </div>
+    </div>
+    </div>
+</div>
+
+<script type="text/javascript">
+if(typeof Modernizr == "undefined"){
+  var script = $("<script>");
+  script.attr("src","/assets/modernizr.js");
+  $("head").append(script);
+}
+var gt = new GalleryTheater();
+
+</script>

app/views/galleries/theater.html.erb

@@ -15,23 +15,23 @@
     <div id="imgholder">
       <div class="rslide" style="position:relative; width:100%;">
         <div class="rslideinside"><div id="loading" style="display:none;"></div>
-          <div class="comp" id='main_pic' data-content='<%= @image.album_id %>'><a href="" id="nextpic" class="navN" title="下一張" onclick="return false;" ><img src="<%= @image.file.theater.url %>" alt="" /></a></div>
+          <div class="comp" id='main_pic' data-content='<%= @image.album_id %>'><a href="" id="nextpic" class="navN" title="下一張"  ><img src="<%= @image.file.theater.url %>" alt="<%= @image.description.nil? || @image.description == "" ? "gallery image" : @image.description %>" /></a></div>
           <div class="rslidenav">
-            <a href="" class="navP" title="上一張" onclick="return false;">Prev</a>
-            <a href="" class="navN" title="下一張" onclick="return false;">Next</a>
+            <a href="" class="navP" title="上一張" >Prev</a>
+            <a href="" class="navN" title="下一張" >Next</a>
           </div>
         </div>
         <div class="slidelist">
           <ul id='galleryimagelist' style="display:none;">
             <% @images.each_with_index do |image,i| %>
-              <li for="<%= i %>"><a href="<%= image.id %>" class="list_element" data-content="<%= image.file.theater.url %>" onclick="return false;"><img src="<%= image.file.thumb.url %>" alt="" /></a></li>
+              <li for="<%= i %>"><a href="<%= image.id %>" class="list_element" data-content="<%= image.file.theater.url %>" ><img src="<%= image.file.thumb.url %>" alt="<%= image.description.nil? || image.description == "" ? "gallery image" : image.description %>" /></a></li>
             <% end  %>
           </ul>
         </div>
         <div class="slidectrl">
-          <a href="" class="togglescreen" title="切換全螢幕" onclick="return false;">Screen</a>
-          <a href="" class="togglelist" title="顯示照片清單" onclick="return false;">List</a>
-          <a href="" class="browserfullscreen" title="顯示照片清單" onclick="return false;">F</a>
+          <a href="" class="togglescreen" title="切換全螢幕" >Screen</a>
+          <a href="" class="togglelist" title="顯示照片清單" >List</a>
+          <a href="" class="browserfullscreen" title="顯示照片清單" >F</a>
           <div class="slideinfo">
             <span class="info"><%= @image.description %></span>
           </div>
@@ -67,6 +67,7 @@
     	var gallery = new galleryAPI();
     	gallery.initialize();
     	gallery.loadTheater("<%= params[:id] %>","<%= params[:image_id] %>");
+  $("#orbit_gallery a").on("click",function(){return false;})
 </script>
 
 

config/locales/en.yml

@@ -1,6 +1,80 @@
 en:
 
   gallery:
+    picture_thumb_size: Picture Showing Size
+    small_size: Small Size
+    medium_size: Medium Size
+    large_size: 16:9 Large Size
+    setting: Gallery Setting
+    advanced_setting: Advanced Setting
+    thumb_process_option_trans: Thumb Process Option
+    thumb_process_option:
+      - default
+      - resize and padding
+      - resize only
+      - resize and crop
+    inner_page_layout: Inner Page Layout
+    card_style: Card Style
+    grid_style: Grid Style
+    slideshow_style: Slideshow style
+    album_card_background_color: Background Color for album card
+    album_card_text_color: Text Color for album card
+    thumb_resize_reference: Resize reference for thumb
+    gravity:
+      Center: center
+      NorthWest: top-left
+      North: top-center
+      NorthEast: top-right
+      West: left-center
+      East: right-center
+      SouthWest: left-bottom
+      South: bottom-center
+      SouthEast: bottom-right
+    short-description: Short Description
+    album_limit_for_one_page: Amount of limit for album in one page
+    blank_for_nil: blank present no limit
+    load_html: Load next batch
+    wait_time: please wait a minute
+    show_desc: Show the album description
+    not_show_desc: Don't show the album description
+    show_original_image: Show the original picture
+    width: Width
+    height: Height
+    review: Review
+    rotate: Rotate
+    confirm_msg: Are you sure to rotate images
+    add_degree: Add 90 degree
+    reduce_degree: Reduce 90 degree
+    crop_div: "Please input the degree you want to rotate.<br>(positive for clockwise)"
+    rotate_images: Rotate images
+    batch_crop: Batch crop images
+    use_set: Use the previously configured color
+    add_files: Add files
+    start_upload: Start upload
+    cancel_upload: Cancel upload
+    drop_files_here: Drop files here
+    success: Success
+    file_uploaded_successfully: File uploaded successfully
+    close_panel: Close panel
+    no_choose: Please select at least one before apply
+    edit_order: Edit Order
+    save_order: Save Order
+    add_tags: Add tags
+    import: Import
+    delete_photo: Delete Photo
+    delete: Delete
+    deselect: Deselect
+    back: Back
+    edit: Edit
+    add_image: Add Image
+    progressbar: 'Progress bar'
+    error: 'Recreate thumb failed, please contact service agent or try again later'
+    'sure?': 'Are yoy sure to apply? it will recreate all the thumbs of you choose'
+    frame_color: 'Frame color'
+    'recreate': 'Apply'
+    transparent: transparent
+    checked: select all
+    unchecked: unselect all
     add_album: Add Album
     add_images: Add Images
     all: All
@@ -27,6 +101,8 @@ en:
     no_description: No Decription
     photo_tag: Photo Tag
     pic_not_found: Picture Not Found
+    img_link: Image Link
+    img_description: Image Description
     save: Save
     save_changes: Save Changes
     search_tags: Search Tags

config/locales/zh_tw.yml

@@ -1,6 +1,83 @@
 zh_tw:
 
   gallery:
+    picture_thumb_size: 圖片縮圖大小
+    small_size: 小張縮圖
+    medium_size: 中等縮圖
+    large_size: 16:9大縮圖
+
+    setting: 相簿設定
+    advanced_setting: 進階設定
+    thumb_process_option_trans: 縮圖處理選項
+    thumb_process_option:
+      - 預設
+      - 縮放並填充
+      - 僅縮放
+      - 縮放並裁切
+    inner_page_layout: 內頁頁面樣式
+    card_style: 卡片樣式
+    grid_style: 格子排版樣式
+    slideshow_style: 輪播樣式
+    album_card_background_color: 相簿卡片背景顏色
+    album_card_text_color: 相簿卡片文字顏色
+    thumb_resize_reference: 縮圖縮放參考
+    gravity:
+        Center: 中心
+        NorthWest: 左上
+        North: 中心上方
+        NorthEast: 右上
+        West: 左側中心
+        East: 右側中心
+        SouthWest: 左下
+        South: 中心下方
+        SouthEast: 右下
+    short-description: 簡短描述
+    album_limit_for_one_page: 一頁呈現的相簿數量
+    blank_for_nil: 留白表示無限制
+    load_html: 存取下一批資料
+    wait_time: 請稍等
+    show_desc: 顯示相簿描述
+    not_show_desc: 不顯示相簿描述
+    show_original_image: 顯示原始圖片
+    width: 寬
+    height: 高
+    review: 預覽
+    rotate: 旋轉
+    confirm_msg: 確定要旋轉圖片嗎?
+    add_degree: 增加90度
+    reduce_degree: 減少90度
+    crop_div: "請輸入需要旋轉的角度.<br>(順時針為正)"
+    rotate_images: 旋轉圖片
+    batch_crop: 批量裁減圖片
+    use_set: 使用先前已設定的顏色
+    add_files: 新增檔案
+    start_upload: 開始上傳
+    cancel_upload: 取消上傳
+    drop_files_here: 拖移檔案到此
+    success: 成功
+    file_uploaded_successfully: 檔案上傳成功
+    close_panel: 關閉面板
+    no_choose: 請至少選擇一項再按套用
+    edit_order: 改變排序
+    save_order: 儲存排序
+    add_tags: 新增標籤
+    import: 匯入
+    delete_photo: 刪除圖片
+    delete: 刪除
+    deselect: 反選
+    back: 返回
+    edit: 編輯
+    add_image: 新增圖片
+    cancel: 關閉
+    dashboard: 儀表板
+    progressbar: 進度條
+    error: '重新產生縮圖失敗，請聯絡客服或稍後再試'
+    'sure?': '您真的确定要套用嗎? 會重新產生整個相簿的縮圖喔!'
+    frame_color: 相框底色
+    transparent: 透明
+    checked: 全選
+    unchecked: 全部反選
+    recreate: 套用
     add_album: 新增相冊
     add_images: 新增影像
     album: 相冊
@@ -25,13 +102,15 @@ zh_tw:
     no_description: 沒有描述
     photo_tag: 相片標籤
     pic_not_found: 找不到圖片
+    img_link: 圖片連結
+    img_description: 圖片描述
     save: 儲存
     save_changes: 儲存變更
     search_tags: 搜尋標籤
     select_category: 選擇類別
     set_cover: 設定為封面
     widget:
-      widget1: Widget1
+      widget1: 插件1
     widget_option:
       horizontal: 水平
       vertical: 垂直

config/routes.rb

@@ -1,24 +1,88 @@
 Rails.application.routes.draw do
-
+  if ENV['worker_num']=='0' && File.basename($0) != 'rake' && !Rails.const_defined?('Console')
+    Thread.new do
+      if AlbumSetting.count == 0
+        album_setting = AlbumSetting.create
+      else
+        album_settings = AlbumSetting.all.to_a
+        album_setting = album_settings.first
+        if album_settings.count > 1
+          album_settings[1..-1].each do |album_setting|
+            album_setting.destroy
+          end
+        end
+      end
+      s = Site.first
+      update_flag = s.respond_to?(:tmp_flags)
+      need_update = !update_flag || !(s.tmp_flags.include?('ga1'))
+      if need_update
+        albums1 = Album.where(:order.in => [nil,-1]).desc(:created_at)
+        albums2 = Album.all.where(:order.ne=>-1).and(:order.ne=>nil).asc(:order)
+        fiter_albums = albums1.concat(albums2)
+        fiter_albums.each_with_index do |album, i|
+          album.order = i
+          album.min_order = -1
+          album.save
+          images1 = album.album_images.where(:order.in => [nil,-1]).desc(:created_at).to_a
+          images2 = album.album_images.where(:order.gt => -1).asc(:order).to_a
+          images = images1.concat(images2)
+          images.each_with_index do |image, j|
+            image.order = i
+            image.save
+          end
+        end
+        AlbumSetting.update_all(:min_order=>-1)
+        if update_flag
+          s = Site.first
+          s.tmp_flags << 'ga1'
+          s.save
+        end
+        puts "Gallery order fix!"
+      end
+      Album.create_indexes
+      AlbumImage.create_indexes
+    end
+  end
   locales = Site.first.in_use_locales rescue I18n.available_locales
-  
   scope "(:locale)", locale: Regexp.new(locales.join("|")) do
+    get "/xhr/galleries/theater/:id" => "galleries#theater"
     namespace :admin do
       get "galleries/get_photoData_json" => "galleries#get_photoData_json"
-        
-       	resources :galleries do
-           get "imgs" => "galleries#imgs"
-        end
-       	resources :images
-       	post "galleries/upload_image" => "galleries#upload_image"
-        
-        get "new_images" => "galleries#new_images"
+      get "galleries/recreate_image" => "galleries#recreate_image"
+      get "galleries/crop_process" => "images#crop_process"
+      post "galleries/recreate_image/recreate_progress" => "galleries#recreate_progress"
+      get "galleries/recreate_image/finish_recreate" => "galleries#finish_recreate"
+      get "galleries/batch_crop" => "images#batch_crop"
+      get "galleries/new_images" => "galleries#new_images"
+      get "galleries/last_image_id" => "galleries#last_image_id"
       post "galleries/set_cover" => "galleries#set_cover"
       post "galleries/delete_photos" => "images#delete_photos"
       post "galleries/update_image" => "images#update_image"
       post "galleries/image_tagging" => "images#image_tagging"
+      post "galleries/order" => "images#changeorder"
+      post "galleries/translate" => "galleries#call_translate"
+      post "galleries/save_crop" => "galleries#save_crop"
+      get "galleries/rotate_images" => "galleries#rotate_images"
+      get "galleries/upload_process" => "galleries#upload_process"
+      post "galleries/start_upload_process" => "galleries#start_upload_process"
+      post "galleries/init_upload" => "galleries#init_upload"
+      post "galleries/get_tag" => "galleries#get_tag"
+      post "galleries/update_album_setting" => "galleries#update_album_setting"
+      get "galleries/setting" => "galleries#setting"
+      resources :galleries do
+        get "imgs" => "galleries#imgs"
+        member do
+          get "import"
+          get "excel_format"
+          post "importimages"
+        end
+        collection do
+          post 'select_albums'          
+        end
+      end
+      resources :images
+      post "galleries/upload_image" => "galleries#upload_image"
       # match "image_tagging" => "album_images#image_tagging"
     end
-    
   end
 end

gallery.gemspec

@@ -2,7 +2,84 @@ $:.push File.expand_path("../lib", __FILE__)
 
 # Maintain your gem's version:
 require "gallery/version"
-
+require 'json'
+bundle_update_flag = ARGV[0]=='update' || ARGV[0]=='install'
+if bundle_update_flag
+  env_pwd = ENV['PWD']
+  begin
+    require ::File.expand_path('app/helpers/bundler_helper.rb',  env_pwd)
+    extend BundlerHelper
+  rescue LoadError
+    def bundler_with_clean_env(&block)
+      if block_given?
+        if Bundler.respond_to?(:with_unbundled_env)
+          Bundler.with_unbundled_env(&block)
+        else
+          Bundler.with_clean_env(&block)
+        end
+      end
+    end
+  end
+  app_path = File.expand_path(__dir__)
+  template_path = env_pwd + '/app/templates'
+  all_template = Dir.glob(template_path+'/*/')
+  default_gallery_widget_info = JSON.parse(File.read("#{app_path}/modules/gallery/info.json"))["widgets"].sort_by{|h| h["filename"].to_i} rescue []
+  all_template.each do |folder|
+    if !folder.include?('mobile')
+      info_json_file = "#{folder}modules/gallery/info.json"
+      if File.exist?(info_json_file)
+        begin
+          file_text = File.read(info_json_file) rescue ""
+          encode_file_text = file_text.encode("UTF-8", "UTF-8", invalid: :replace, replace: "???")
+          next if (encode_file_text.include?("???") rescue true)
+          info = JSON.parse(encode_file_text) rescue {}
+          flag = (info.count != 0 rescue false)
+          if flag
+            puts "Checking gallery widgets"
+            widget_info = info["widgets"].sort_by{|h| h["filename"].to_i} rescue []
+            update_flag = false
+            last_index = widget_info.collect{|v| v["filename"].to_s.scan(/\d+/).collect{|v1| v1.to_i}}.flatten.sort[-1] rescue nil
+            if !last_index.nil?
+              idx_regex = /^(\d+[\. \t]*)|[ \t]+$/
+              default_gallery_widget_info.each do |h|
+                name_without_index = h["name"]["zh_tw"].gsub(idx_regex,'')
+                widget_info_index = (widget_info.index{|hh| hh["name"]["zh_tw"].gsub(idx_regex,'') == name_without_index}||-1 rescue -1)
+                if (widget_info_index == -1 || widget_info_index.nil?)
+                  update_flag = true
+                  copy_h = h.dup
+                  h.delete("force_cover")
+                  last_index = last_index + 1
+                  copy_h["filename"] = copy_h["filename"].sub(/\d+/){|ff| last_index.to_s}
+                  copy_h["name"].keys.each do |locale|
+                    copy_h["name"][locale] = copy_h["name"][locale].sub(/\d+/){|ff| last_index.to_s}
+                  end
+                  widget_info << copy_h
+                  bundler_with_clean_env{%x[cp -f #{app_path}/modules/gallery/_#{h["filename"]}.html.erb #{folder}modules/gallery/_#{copy_h["filename"]}.html.erb]}
+                elsif h["force_cover"] == "true"
+                  bundler_with_clean_env{%x[cp -f #{app_path}/modules/gallery/_#{h["filename"]}.html.erb #{folder}modules/gallery/_#{widget_info[widget_info_index]["filename"]}.html.erb]}
+                end
+              end
+              if update_flag
+                info["widgets"] = widget_info
+                puts "Writing json #{info["widgets"].count} in #{info_json_file}"
+                begin
+                  info_json = JSON.pretty_generate(info).gsub(":[",":[\n").gsub(":{",":{\n")
+                rescue
+                  info_json = info.to_s.gsub("=>",": \n")
+                end
+                File.open(info_json_file,"w+"){|f| f.write(info_json)}
+              end
+            end
+          end
+        rescue => e
+          puts e
+          puts "There has some error when checking gallery widgets"
+        end
+      end
+    end
+  end
+end
+#system  ('rm -r '+app_path + '/modules/')
 # Describe your gem and declare its dependencies:
 Gem::Specification.new do |s|
   s.name        = "gallery"
@@ -13,6 +90,10 @@ Gem::Specification.new do |s|
   s.summary     = "Campus Gallery."
   s.description = "Campus Galllery"
   s.license     = "MIT"
+  s.metadata = {
+    "_require" => "#{File.expand_path("../app/models/album_setting", __FILE__)}",
+    "global_hash" => "{resize_gravity: ([AlbumSetting.first.resize_gravity, 'Center'].select{|s| s.present?}.first rescue 'Center'), thumb_process_option: (AlbumSetting.first.thumb_process_option rescue 1)}"
+  }
 
   s.files = Dir["{app,config,db,lib}/**/*", "MIT-LICENSE", "Rakefile", "README.rdoc"]
   s.test_files = Dir["test/**/*"]

lib/gallery.rb

@@ -1,4 +1,4 @@
 require "gallery/engine"
-
 module Gallery
+    
 end

lib/gallery/engine.rb

@@ -1,17 +1,63 @@
 module Gallery
   class Engine < ::Rails::Engine
     initializer "gallery" do
+      Rails.application.config.to_prepare do
+        begin
+          translate_data = Dir["#{Gallery::Engine.root}/config/locales/*.yml"] .map{|yaml_file| YAML.load(File.read(yaml_file))}
+          data = {}
+          key1 = {}
+          key1_options = ['grid_style','card_style','slideshow_style']
+          key1_attrs = []
+          key1_options.each_with_index do |v, i|
+            key1_attrs[i] = {}
+          end
+          key2 = {}
+          key2_options = ['small_size','medium_size','large_size']
+          key2_attrs = []
+
+          key2_options.each_with_index do |v, i|
+            key2_attrs[i] = {}
+          end
+
+
+          translate_data.each do |t_data|
+            v = t_data.values
+            k = t_data.keys[0]
+            key1[k] = v[0]['gallery']['inner_page_layout']
+            key1_options.each_with_index do |kk, i|
+              key1_attrs[i][k] = v[0]['gallery'][kk]
+            end
+
+            key2[k] = v[0]['gallery']['picture_thumb_size']
+            key2_options.each_with_index do |kk, i|
+              key2_attrs[i][k] = v[0]['gallery'][kk]
+            end
+          end
+
+          data[key1] = key1_attrs
+          data[key2] = key2_attrs
+        rescue  => e
+          puts ['error in gallery',e]
+        end
+        
         OrbitApp.registration "Gallery", :type => "ModuleApp" do
           module_label "gallery.gallery"
             base_url File.expand_path File.dirname(__FILE__)
-          widget_methods ["widget"]
+            widget_methods ["widget","album_widget"]
             # widget_settings []
-          widget_settings [{"data_count"=>10}]
+            widget_settings [{"data_count"=>30}]
             models_to_cache [:album,:album_image]
+            taggable "Album"
             categorizable
             authorizable
             frontend_enabled
             data_count 1..30
+
+            begin
+              show_option_items data
+            rescue => e
+              puts ['there_was_no_show_option_method',e]
+            end
             side_bar do
               head_label_i18n 'gallery.gallery', icon_class: "icons-pictures"
               available_for "users"
@@ -45,6 +91,12 @@ module Gallery
                 :active_for_action=>{'admin/galleries'=>'tags'},
                 :active_for_tag => 'Gallery',
                 :available_for => 'managers'
+              context_link 'gallery.setting',
+                :link_path=>"admin_galleries_setting_path" ,
+                :priority=>5,
+                :active_for_action=>{'admin/galleries'=>'setting'},
+                :available_for => 'managers'
+            end
         end
       end
     end

modules/gallery/_gallery_widget1.html.erb

@@ -0,0 +1,29 @@
+<div class="widget-gallery widget1 no-print">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div class="cycle-slideshow widget-content"
+  data-level="0"
+  data-list="images"
+  data-cycle-slides="> *"
+  data-cycle-fx="carousel"
+  data-cycle-timeout="3000"
+  data-cycle-carousel-visible="3"
+  data-cycle-pause-on-hover="true"
+  data-cycle-log="false"
+  data-cycle-carousel-fluid="true">
+    <div class="widget-pic" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
+      <a href="{{link_to_show}}" title="{{album-name}}">
+        <img 
+          srcset="
+            {{thumb-large-src}} 1024w,
+            {{thumb-src}} 768w"
+          src="{{thumb-src}}"
+          alt="{{alt_title}}"
+        >
+      </a>
+      <div style="clear: both;"></div>
+      <a href="{{link_to_show}}" title="{{album-name}}">{{link_text}}</a>
+    </div>
+  </div>
+</div>

modules/gallery/_gallery_widget2.html.erb

@@ -0,0 +1,19 @@
+<div class="widget-gallery widget2 no-print">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <div class="row widget-content" data-level="0" data-list="images">
+    <div class="col-md-4" style="text-align: center;">
+      <a class="widget-pic" href="{{link_to_show}}" title="{{album-name}}">
+        <img
+          srcset="
+            {{thumb-large-src}} 1024w,
+            {{thumb-src}} 768w"
+          src="{{thumb-src}}"
+          alt="{{alt_title}}"
+        >
+      </a>
+      <a href="{{link_to_show}}" title="{{album-name}}">{{link_text}}</a>
+    </div>
+  </div>
+</div>

modules/gallery/_gallery_widget3.html.erb

@@ -0,0 +1,33 @@
+<div class="widget-gallery widget3 no-print">
+  <!-- <h3 class="w-annc__widget-title">
+    <span class="album_icon"></span><span>{{widget-title}}</span>
+  </h3> -->
+  <div class="cycle-slideshow widget-content"
+    data-level="0" data-list="images" data-cycle-slides="> a"
+    data-cycle-fx="carousel" data-cycle-timeout="3000" data-cycle-carousel-visible="1" data-cycle-pause-on-hover="true" data-cycle-log="false" data-cycle-carousel-fluid="true">
+    <a class="widget-pic" href="{{link_to_show}}" target="_blank" title="{{album-name}}">
+      <div class="mask_box">
+        <div class="mask_word">
+          <div class="mask_word_box">
+            <div class="mask_title">{{image_description}}</div>
+          </div>
+        </div>
+        <div class="mask">
+          <div class="circle_box"><img src="/assets/circle_icon.png" alt="">
+          </div>
+        </div>
+        <img
+          srcset="
+          {{thumb-large-src}} 1024w,
+          {{thumb-src}} 768w"
+          src="{{thumb-src}}"
+          alt="{{alt_title}}"
+        >
+      </div>
+    </a>
+
+  </div>
+  <div class="w-annc__more-wrap clearfix">
+    <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= locale == :en ? 'more' : '更多照片' %></a>
+  </div>
+</div>

modules/gallery/_gallery_widget4.html.erb

@@ -0,0 +1,51 @@
+<div class="widget-gallery gallery card-group widget4 no-print">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <% OrbitHelper.render_css_in_head(["gallery_card.css"]) %>
+  <div class="row widget-content" data-level="0" data-list="images">
+    <div class="card card-flip h-100">
+      <div class="card-front">
+        <div class="card-body" style="padding:0;">
+          <img
+            srcset="
+              {{thumb-large-src}} 1024w,
+              {{thumb-src}} 768w"
+            src="{{thumb-src}}"
+            alt="{{alt_title}}"
+          >
+          <div class="card-footer">
+            <h3 class="card-title">{{image_short_description}}</h3>
+          </div>
+        </div>
+      </div>
+      <div class="card-back">
+        <div class="card-body" style="background-color: {{album_color}};color: {{album_card_text_color}};">
+          <h3 class="card-title">{{image_short_description}}</h3>
+          {{image_description}}
+          <div class="card-button-group">
+            <a href="{{link_to_show}}" class="btn btn-secondary view ">
+              <i class="fa fa-link" aria-hidden="true"></i>
+            </a>
+            <a href="{{src}}" data-toggle="lightbox" data-gallery="gallery" class="btn btn-secondary preview" data-title="{{alt_title}}" data-type="image" target="_blank">
+              <i class="fa fa-eye" aria-hidden="true"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    $(document).ready(function(){
+      $('[data-subpart-id="{{subpart-id}}"] .card-body a').on('focusin', function(){
+        var _this = $(this);
+        var card_flip = _this.parents('.card-flip');
+        card_flip.addClass('hover-class');
+        var off_hover = function(){
+          card_flip.removeClass('hover-class');
+        }
+        _this.one('focusout', off_hover);
+      })
+    })
+  </script>
+</div>

modules/gallery/_gallery_widget5.html.erb

@@ -0,0 +1,72 @@
+<div class="widget-gallery gallery widget5 no-print">
+  <h3 class="widget-title">
+    <span>{{widget-title}}</span>
+  </h3>
+  <% 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 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/gallery_index1.html.erb

@@ -0,0 +1,21 @@
+<div class="index-gallery index1">
+  <h3 class="index-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
+    <div class="index-content col-xs-4 col-sm-3">
+      <div class="index-content-inner">
+        <div class="index-pic">
+          <img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
+        </div>
+        <section class="index-part">
+          <h4 class="index-content-title">
+            <a href="{{link_to_show}}">{{album-name}}</a>
+          </h4>
+          <div class="index-img-description">{{album-description}}</div>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>
+{{pagination_goes_here}}

modules/gallery/gallery_index2.html.erb

@@ -0,0 +1,21 @@
+<div class="index-gallery index2">
+  <h3 class="index-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
+    <div class="index-content">
+      <div class="index-content-inner clearfix row">
+        <div class="index-pic col-xs-5 col-sm-2">
+          <img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
+        </div>
+        <section class="index-part col-xs-7 col-sm-10">
+          <h4 class="index-content-title">
+            <a href="{{link_to_show}}">{{album-name}}</a>
+          </h4>
+          <div class="index-img-description">{{album-description}}</div>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>
+{{pagination_goes_here}}

modules/gallery/gallery_index3.html.erb

@@ -0,0 +1,20 @@
+<div class="index-gallery index1">
+  <h3 class="index-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
+    <div class="index-content col-xs-4 col-sm-3">
+      <div class="index-content-inner">
+        <div class="index-pic">
+          <img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
+        </div>
+        <section class="index-part">
+          <h4 class="index-content-title">
+            <a href="{{link_to_show}}">{{album-name}}</a>
+          </h4>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>
+{{pagination_goes_here}}

modules/gallery/gallery_index4.html.erb

@@ -0,0 +1,20 @@
+<div class="index-gallery index2">
+  <h3 class="index-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
+    <div class="index-content">
+      <div class="index-content-inner clearfix row">
+        <div class="index-pic col-xs-5 col-sm-2">
+          <img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
+        </div>
+        <section class="index-part col-xs-7 col-sm-10">
+          <h4 class="index-content-title">
+            <a href="{{link_to_show}}">{{album-name}}</a>
+          </h4>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>
+{{pagination_goes_here}}

modules/gallery/gallery_index5.html.erb

@@ -0,0 +1,32 @@
+<div class="index-gallery gallery card-group index5">
+  <h3 class="index-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <link rel="stylesheet" type="text/css" href="/assets/gallery_card.css">
+  <div class="row" data-level="0" data-list="albums">
+    <div class="card card-flip h-100">
+      <div class="card-front">
+        <div class="card-body" style="padding:0;">
+          <img
+            src="{{thumb-src}}"
+            alt="{{alt_title}}"
+          >
+          <div class="card-footer">
+            <h3 class="card-title">{{album-name}}</h3>
+          </div>
+        </div>
+      </div>
+      <div class="card-back">
+        <div class="card-body" style="background-color: {{album_color}};color: {{album_card_text_color}};">
+          <h3 class="card-title">{{album-name}}</h3>
+          <div class="card-button-group">
+            <a href="{{link_to_show}}" class="btn btn-secondary view ">
+              <i class="fa fa-link" aria-hidden="true"></i>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{{pagination_goes_here}}

modules/gallery/info.json

@@ -0,0 +1,87 @@
+{
+    "frontend": [
+        {
+            "filename" : "gallery_index1",
+            "name" : {
+                "zh_tw" : "1. 縮圖 ( 相本圖片, 相本說明, 分頁導覽 )",
+                "en" : "1. Thumbnail ( gallery thumbnail, gallery description, page navigation )"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "gallery_index2",
+            "name" : {
+                "zh_tw" : "2. 條列 ( 相本圖片, 相本說明, 分頁導覽 )",
+                "en" : "2. Thumbnail ( gallery thumbnail, gallery description, page navigation )"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "gallery_index3",
+            "name" : {
+                "zh_tw" : "3. 縮圖 ( 相本圖片, 分頁導覽 )",
+                "en" : "3. Thumbnail ( gallery thumbnail, page navigation )"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "gallery_index4",
+            "name" : {
+                "zh_tw" : "4. 條列 ( 相本圖片, 分頁導覽 )",
+                "en" : "4. Thumbnail ( gallery thumbnail, page navigation )"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "gallery_index5",
+            "name" : {
+                "zh_tw" : "5. 卡片",
+                "en" : "5. Card"
+            },
+            "thumbnail" : "thumb.png"
+        }
+    ],
+    "widgets" : [
+        {
+            "filename" : "gallery_widget1",
+            "name" : {
+                "zh_tw" : "1. 跑馬燈 ( 模組標題, 圖片 )",
+                "en" : "1. Carousel Effect (widget-title, image)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "gallery_widget2",
+            "name" : {
+                "zh_tw" : "2. 相本排版 ( 模組標題, 圖片 )",
+                "en" : "2. Thumbnail (widget-title, image)"
+            },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "gallery_widget3",
+            "name" : {
+                "zh_tw" : "3. 單本相簿跑馬燈 ( 圖片 )",
+                "en" : "3. Single Picture With Carousel Effect (image)"
+            },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "gallery_widget4",
+			"force_cover": "true",
+            "name" : {
+                "zh_tw" : "4. 卡片",
+                "en" : "4. Card"
+            },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "gallery_widget5",
+            "name" : {
+                "zh_tw" : "5. 投影片式輪播",
+                "en" : "5. Slide"
+            },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}

modules/gallery/show.html.erb

@@ -0,0 +1,18 @@
+<div class="show-gallery">
+  <h1 class="show-title">
+    <span>{{album-title}}</span>
+  </h1>
+  {{album-description}}
+  <div data-level="0" data-list="images">
+    <div class="show-content col-xs-6 col-sm-2">
+      <div class="show-content-inner">
+        <div class="show-pic">
+          <a href="{{link_to_show}}" onclick="window.location.hash = '{{link_to_show}}';gt.createTheater('/xhr/galleries/theater/{{link_to_show}}');return false;">
+            <img class="img" src="{{thumb-src}}" alt="{{alt_title}}">
+          </a>
+          <p class="show-description">{{image-description}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>