A simple multi-instance slideshow with jQuery

_the_slides.html.haml

.photos
  - @photos.each do |photo|
    .photo=image_tag photo.url(:medium)

the_script.coffee

updateSlideshows = ->
  for slideshow in $('.photos')
    if (active = $('.active',slideshow)).length == 0
      if activable = $('.photo',slideshow)[0]
        $(activable).addClass('active')
        $(activable).fadeIn(500)
    else if (activable = (active.next('.photo')[0] || $('.photo',slideshow)[0]))
        $(activable).addClass('active')
        $(activable).fadeIn(1000)
        $(active).removeClass('active')
        $(active).fadeOut(1000)

$ ->
  window.setInterval(updateSlideshows,6000)
  updateSlideshows()

the_stylesheet.sass

.photos
  width: 640px  //The images width here
  height: 480px //The images height here
  position: relative

  .photo
    display: none //Initially hiddes all slides
    position: absolute
    top: 0
    left: 0

   .active
      z-index: 1000