my favorite update :) lazy loading for theater view plus a very smooth navigation of images.
This commit is contained in:
		
							parent
							
								
									3c0d2da9a7
								
							
						
					
					
						commit
						0921d7731b
					
				| 
						 | 
				
			
			@ -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";
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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";
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue