developers
/
Orbit
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI.js.erb vendored
View File

@ -10,8 +10,10 @@ var galleryAPI = function(){
this.albumArea = $("#orbit_gallery"); this.albumArea = $("#orbit_gallery");
this.loadArea = null; this.loadArea = null;
this.tagList = $("ul#gallery_tag_list"); this.tagList = $("ul#gallery_tag_list");
this.loading = $("#loading");
this.loadTheater = function(id){ this.loadTheater = function(id){
g.loadstart();
var imageArray; var imageArray;
var imagecount = 0; var imagecount = 0;
var picHeight = 0; var picHeight = 0;
@ -181,8 +183,14 @@ var galleryAPI = function(){
var pageurl = dom.attr('href'); var pageurl = dom.attr('href');
$img.fadeOut(200,function(){ $img.fadeOut(200,function(){
$img.attr({"src":dom.attr("data-content"),"height":picHeight+"px"}); g.loadstart();
$img.fadeIn(200); $img.attr("src","");
$img.attr({"src":dom.attr("data-content"),"height":picHeight+"px"}).load(function(){
$img.fadeIn(200);
g.loadcomplete();
});
if($rslide.hasClass("fullscreen")){ if($rslide.hasClass("fullscreen")){
$img.css({"padding":($rslide.height()-$img.height())/2}) $img.css({"padding":($rslide.height()-$img.height())/2})
} }
@ -258,7 +266,12 @@ var galleryAPI = function(){
preparestage(albumid); preparestage(albumid);
} }
this.loadcomplete = function(){
g.loading.hide();
}
this.loadstart = function(){
g.loading.show();
}
} }
galleryAPI.prototype.locale = "en"; galleryAPI.prototype.locale = "en";

16
vendor/built_in_modules/gallery/app/assets/javascripts/galleryAPI_frontend.js.erb vendored
View File

@ -10,6 +10,7 @@ var galleryAPI = function(){
this.albumArea = $("#orbit_gallery"); this.albumArea = $("#orbit_gallery");
this.loadArea = null; this.loadArea = null;
this.tagList = $(".taglist ul"); this.tagList = $(".taglist ul");
this.loading = $("#loading");
// this.authenticated = false; // this.authenticated = false;
this.initialize = function(callbackFn){ this.initialize = function(callbackFn){
$(document).ready(function(){ $(document).ready(function(){
@ -82,6 +83,7 @@ var galleryAPI = function(){
var imageArray; var imageArray;
var imagecount = 0; var imagecount = 0;
// var picHeight = 0; // var picHeight = 0;
g.loadstart();
var bindHandlers = function(){ var bindHandlers = function(){
var $slidelist = $('.slidelist'), var $slidelist = $('.slidelist'),
$rslide = $('.rslide'), $rslide = $('.rslide'),
@ -197,11 +199,15 @@ var galleryAPI = function(){
var pageurl = dom.attr('href'); var pageurl = dom.attr('href');
$img.fadeOut(200,function(){ $img.fadeOut(200,function(){
g.loadstart();
if($rslide.hasClass("fullscreen")) 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 else
$img.attr({"src":dom.attr("data-content")}).css("height","auto"); $img.attr({"src":dom.attr("data-content")}).css("height","auto");
$img.fadeIn(200);
if($rslide.hasClass("fullscreen")){ if($rslide.hasClass("fullscreen")){
$img.css({"padding":($rslide.height()-$img.height())/2}) $img.css({"padding":($rslide.height()-$img.height())/2})
} }
@ -276,6 +282,12 @@ var galleryAPI = function(){
preparestage(albumid); preparestage(albumid);
} }
this.loadcomplete = function(){
g.loading.hide();
}
this.loadstart = function(){
g.loading.show();
}
} }
galleryAPI.prototype.locale = "en"; galleryAPI.prototype.locale = "en";

7
vendor/built_in_modules/gallery/app/assets/stylesheets/gallery_old.css vendored
View File

@ -555,3 +555,10 @@
.o_album_edit form { .o_album_edit form {
margin-left: 8px; margin-left: 8px;
} }
#loading{
background: #fff 0 center url("../../../assets/gallery/ajax-loader.gif") no-repeat;
height: 16px;
margin: auto;
width: 32px;
}

5
vendor/built_in_modules/gallery/app/views/panel/gallery/back_end/album_images/show.html.erb vendored
View File

@ -15,7 +15,7 @@
<div class="slidelist"> <div class="slidelist">
<ul id='galleryimagelist' style="display:none;"> <ul id='galleryimagelist' style="display:none;">
<% @images.each_with_index do |image,i| %> <% @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 %> <% end %>
</ul> </ul>
</div> </div>
@ -67,8 +67,9 @@
</div> </div>
<% content_for :page_specific_javascript do %> <% content_for :page_specific_javascript do %>
<%= javascript_include_tag "rss" %> <%= javascript_include_tag "rss" %>
<%= javascript_include_tag "galleryAPI" %> <%= javascript_include_tag "galleryAPI" %>
<% end %> <% end %>
<script type="text/javascript"> <script type="text/javascript">