From 0921d7731b5dbf43192cdc73045ac64a5b9b6421 Mon Sep 17 00:00:00 2001
From: Harry Bomrah <harry@rulingcom.com>
Date: Thu, 18 Jul 2013 20:22:46 +0800
Subject: [PATCH] my favorite update :) lazy loading for theater view plus a
 very smooth navigation of images.

---
 .../app/assets/javascripts/galleryAPI.js.erb  | 19 ++++++++++++++++---
 .../javascripts/galleryAPI_frontend.js.erb    | 16 ++++++++++++++--
 .../app/assets/stylesheets/gallery_old.css    |  7 +++++++
 .../back_end/album_images/show.html.erb       |  5 +++--
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI.js.erb b/vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI.js.erb
index dd60a183..e5037d41 100644
--- a/vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI.js.erb
+++ b/vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI.js.erb
@@ -10,8 +10,10 @@ var galleryAPI = function(){
 	this.albumArea = $("#orbit_gallery");
 	this.loadArea = null;
 	this.tagList = $("ul#gallery_tag_list");
+	this.loading = $("#loading");
 	
 	this.loadTheater = function(id){
+		g.loadstart();
 		var imageArray;
 		var imagecount = 0;
 		var picHeight = 0;
@@ -181,8 +183,14 @@ var galleryAPI = function(){
 				var pageurl = dom.attr('href');
 
 				$img.fadeOut(200,function(){
-					$img.attr({"src":dom.attr("data-content"),"height":picHeight+"px"});
-					$img.fadeIn(200);
+					g.loadstart();
+					$img.attr("src","");
+					$img.attr({"src":dom.attr("data-content"),"height":picHeight+"px"}).load(function(){
+						$img.fadeIn(200);
+						g.loadcomplete();
+					});
+					
+					
 	 				if($rslide.hasClass("fullscreen")){
 	 					$img.css({"padding":($rslide.height()-$img.height())/2})
 	 				}
@@ -258,7 +266,12 @@ var galleryAPI = function(){
 		preparestage(albumid);
 		
 	}
-
+	this.loadcomplete = function(){
+		g.loading.hide();
+	}
+	this.loadstart = function(){
+		g.loading.show();
+	}
 	
 }
 galleryAPI.prototype.locale = "en";
diff --git a/vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI_frontend.js.erb b/vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI_frontend.js.erb
index 44a2a9e5..12f2bef4 100644
--- a/vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI_frontend.js.erb
+++ b/vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI_frontend.js.erb
@@ -10,6 +10,7 @@ var galleryAPI = function(){
 	this.albumArea = $("#orbit_gallery");
 	this.loadArea = null;
 	this.tagList = $(".taglist ul");
+	this.loading = $("#loading");
 	// this.authenticated = false;
 	this.initialize = function(callbackFn){
 		$(document).ready(function(){
@@ -82,6 +83,7 @@ var galleryAPI = function(){
 		var imageArray;
 		var imagecount = 0;
 		// var picHeight = 0;
+		g.loadstart();
 		var bindHandlers = function(){
 			var $slidelist = $('.slidelist'),
 				$rslide = $('.rslide'),
@@ -197,11 +199,15 @@ var galleryAPI = function(){
 				var pageurl = dom.attr('href');
 
 				$img.fadeOut(200,function(){
+					g.loadstart();
 					if($rslide.hasClass("fullscreen"))
-						$img.attr({"src":dom.attr("data-content")}).css("height","100%");
+						$img.attr({"src":dom.attr("data-content")}).css("height","100%").load(function(){
+							g.loadcomplete();
+							$img.fadeIn(200);
+						});
 					else
 						$img.attr({"src":dom.attr("data-content")}).css("height","auto");
-					$img.fadeIn(200);
+					
 	 				if($rslide.hasClass("fullscreen")){
 	 					$img.css({"padding":($rslide.height()-$img.height())/2})
 	 				}
@@ -276,6 +282,12 @@ var galleryAPI = function(){
 		preparestage(albumid);
 		
 	}
+	this.loadcomplete = function(){
+		g.loading.hide();
+	}
+	this.loadstart = function(){
+		g.loading.show();
+	}
 
 }
 galleryAPI.prototype.locale = "en";
diff --git a/vendor/built_in_modules/gallery/app/assets/stylesheets/gallery_old.css b/vendor/built_in_modules/gallery/app/assets/stylesheets/gallery_old.css
index c1330377..37cbec2e 100755
--- a/vendor/built_in_modules/gallery/app/assets/stylesheets/gallery_old.css
+++ b/vendor/built_in_modules/gallery/app/assets/stylesheets/gallery_old.css
@@ -555,3 +555,10 @@
 .o_album_edit form {
 	margin-left: 8px;
 }
+
+#loading{
+	background: #fff 0 center url("../../../assets/gallery/ajax-loader.gif") no-repeat;
+    height: 16px;
+    margin: auto;
+    width: 32px;
+}
diff --git a/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/album_images/show.html.erb b/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/album_images/show.html.erb
index 3dab30ee..c85d8f54 100644
--- a/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/album_images/show.html.erb
+++ b/vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/album_images/show.html.erb
@@ -15,7 +15,7 @@
         <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.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.url %>" onclick="return false;"><img src="<%= image.file.thumb.url %>" alt="" onload="gallery.loadcomplete();" /></a></li>
             <% end  %>
           </ul>
         </div>
@@ -67,8 +67,9 @@
 </div>
 
 <% content_for :page_specific_javascript do %>
-<%= javascript_include_tag "rss" %>
+  <%= javascript_include_tag "rss" %>
   <%= javascript_include_tag "galleryAPI" %>
+  
 <% end %>
 
 <script type="text/javascript">