my favorite update :) lazy loading for theater view plus a very smooth navigation of images.

This commit is contained in:
Harry Bomrah 2013-07-18 20:22:46 +08:00 committed by saurabhbhatia
parent 3c0d2da9a7
commit 0921d7731b
4 changed files with 40 additions and 7 deletions

View File

@ -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";

View File

@ -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";

View File

@ -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;
}

View File

@ -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">