Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

load more items on demand

  • Loading branch information...
commit 2249c4e83800a57cc47a481c4c60fc073e0b7e70 1 parent ce0eb5a
@zlorfi authored
View
2  README.md
@@ -20,4 +20,4 @@
## TODO
- image handler exception
-- don't load all images at once
+- multi-upload
View
12 app.rb
@@ -102,6 +102,10 @@ def raw(text)
Rack::Utils.escape_html(text)
end
+ def count_all_pictures
+ Picture.count.to_s
+ end
+
end
get "/stylesheets/*.css" do |path|
@@ -187,6 +191,14 @@ def raw(text)
end
end
+ get '/gallery/:items/:skip' do
+ if params[:items] && params[:skip]
+ @pictures = Picture.all.asc(:image_date).limit(params[:items]).skip(params[:skip])
+ haml :gallery, :layout => false #!request.xhr?
+ else
+ flash.now[:alert] = "ERROR!"
+ end
+
get '/' do
@pictures = Picture.all.asc(:image_date)
haml :index
View
17 public/javascripts/app.js
@@ -2,21 +2,4 @@ $(document).ready(function() {
$('.alert-box.success').delay(5000).fadeOut(500);
$('.alert-box.notice').delay(5000).fadeOut(500);
$('.alert-box.alert').delay(9000).fadeOut(500);
-
- var img = new Image();
-
- //$(img).onload = function() {
- // $(img).hide();
- // $("#loading").attr("src", img.src);
- // $(img).fadeIn('slow');
- //}
- //
- //var source = $('img').attr('src');
- //$(img).load(function () {
- // $(img).hide();
- // $('.icon-spinner').hide();
- // $('#loading').append(img);
- // $(img).fadeIn('slow');
- //}).attr('src', source);
-
});
View
9 views/gallery.haml
@@ -0,0 +1,9 @@
+- @pictures.each do |key|
+ %li
+ %a{:href => "#{key.image.thumb('800x800').url}", :class => 'fancybox', 'data-fancybox-group' => 'button', :title => "#{key.image_title}"}
+ %img{:src => "#{key.image.thumb('100x100#').url}"}
+ -if admin?
+ %form(action="/delete/#{key.id}" method="post")
+ %input{:type => :hidden, :name => "_method", :value => "delete"}
+ %a.tiny.button.info.radius{:href => "/i/#{key.id}"} Show
+ %input.tiny.button.alert.radius{:type => "submit", :value => "Delete"}
View
44 views/index.haml
@@ -1,23 +1,47 @@
.row
.large-8.columns
- %ul.small-block-grid-4.large-block-grid-6
- - @pictures.each do |key|
- %li
- %a{:href => "#{key.image.thumb('800x800').url}", :class => 'fancybox', 'data-fancybox-group' => 'button', :title => "#{key.image_title}"}
- %img{:src => "#{key.image.thumb('100x100#').url}"}
- -if admin?
- %form(action="/delete/#{key.id}" method="post")
- %input{:type => :hidden, :name => "_method", :value => "delete"}
- %a.tiny.button.info.radius{:href => "/i/#{key.id}"} Show
- %input.tiny.button.alert.radius{:type => "submit", :value => "Delete"}
+ %ul#gallery.small-block-grid-4.large-block-grid-6
+ =# haml :gallery
+
+ #load_more
+ .small.button.expand.radius
+ %i.icon-cloud-download.icon-2x
+ Load more
= haml :sidebar
%script{:type => "text/javascript", :src => "/javascripts/vendor/jquery.mousewheel.js"}
%script{:type => "text/javascript", :src => "/javascripts/vendor/jquery.fancybox.pack.js"}
:javascript
+ $(document).ajaxStart(function() {
+ $('#load_more i').removeClass('icon-cloud-download').addClass('icon-spinner icon-spin');
+ }).ajaxStop(function() {
+ $('#load_more i').removeClass('icon-spinner icon-spin').addClass('icon-cloud-download');
+ });
+
$(document).ready(function() {
+ var items = 12;
+ var skip = 12;
+
+ $.get('/gallery/' + items + '/0', function(data){
+ $(data).appendTo("#gallery");
+ });
+
+ $('#load_more').click(function(data){
+ if(skip < "#{count_all_pictures}") {
+ console.log(skip);
+ console.log("#{count_all_pictures}");
+ $.get('/gallery/' + items + '/' + skip, function(data){
+ $(data).appendTo("#gallery");
+ skip += 12;
+ });
+ }
+ else {
+ $('#load_more').hide();
+ }
+ });
+
$('.fancybox').fancybox({
openEffect: 'none',
closeEffect: 'none',
Please sign in to comment.
Something went wrong with that request. Please try again.