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"});
|
||||
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