Rotating images, AJAX-like, in Ruby on Rails

Question

I'm working on a site where I'd like to cycle images, similar to a slideshow, while the user is on the page. I've searched around and haven't been able to find a lead.

Has anyone done this with Rails and the Javascript frameworks it supports?

Answer 1

you could possible use the jquery cycle plugin, here's the link: http://malsup.com/jquery/cycle/ . It looks like it would do what you want.

Answer 2

I assume you want to make persistent changes on images. I'm working on a Rails app where we implemented resize, crop and rotate similar to features in snipshot.com

On technical side we used YUI for resize and crop in user interface and RMagick on server to process the images and send the results back to UI. YUI provides imagecrop widget out-of-the box.

We also considered doing a series of actions in UI and then submit the last result for server-side processing but that would have been lead to inadequate results.

Answer 3

FYI, Rails isn't particularly tied to any JS framework, even though it comes with prototype out of the box.

I assume that when you say AJAX, you don't mean AJAX. If you were to rotate the image using AJAX, you would have the rotated image being generated server side and sent to the client, as AJAX = performing requests with javascript. </pedantic>

With that said, you can use pretty much any JS image rotator you can find on google.

EDIT: Oh, you meant cycling through images, not rotating it e.g. 90º clockwise etc. (?)

Answer 4

I've been using this very simple function. It doesn't use any framework and it doesn't fade between slides, but it should get you started.

function SlideShow( elem_id, hold_time )
{
  this.elem = document.getElementById( elem_id );
  this.slides = [];
  this.num_slides = 0;
  this.cur_slide = 1;
  this.add_slide = function( image )
  {
    this.slides[ this.num_slides++ ] = image;
  }
  var self = this;
  this.next_slide = function()
  {
    if ( self.num_slides > 1 )
    {
      self.elem.src = self.slides[ self.cur_slide++ ].src;
      if ( self.cur_slide == self.num_slides )
        self.cur_slide = 0;
    }
  }
  setInterval( self.next_slide, hold_time )
}

the parameters are the element_id of an img tag and the number of mS to display each slide.

the add_slide function takes a JavaScript Image object.

The reason cur_slide is initialised to 1 is because I pre load the img tag with the first image.

In my application I create the slideshow in the window.onload method and arrange for each Image to add itself to the slide show as it is loaded.

Example (untested):

window.onload = function() {
  var slide_show = new SlideShow( "slide_image", 4000 )

  { var img = new Image();
    img.onload = function(){ slide_show.add_slide(img); };
    img.src="/images/slide1.jpg"; }
   ...
   /* Repeated for each image */
}

This approach is only valid if you don't care about the order of the slides.