Skip to content
A rails helper to generate a simple jquery slideshow
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Note: The javascript used in this plugin was original posted by Jon Raasch in this post. Mad props to Jon.

This is an ActionView helper to create a simple jQuery slideshow. You pass in an image directory (relative to public/images/) and the jquery_slideshow method generates a slideshow that loops every image in that directory.

Make sure you place the <%= jrs_javascript > call after <= jquery_slideshow %>


  • jQuery 1.2.6+ (probably works with earlier version – please let me know of any compatibility issues)
  • Some added css (specifically, slideshow.css in public/stylesheets)
    • If you did a “script/plugin install”, slideshow.css was copied to your public/stylesheets directory


<div id="slideshow">
  # This means you've got a directory full of images located at RAILS_ROOT/public/images/home_page_slideshow
  <%= jquery_slideshow('home_page_slideshow') %>
<%= jrs_javascript %>

Use the default options

<%= jrs_javascript %>

To avoid conflicts with prototype

<%= jrs_javascript(:prototype => true) %>

Use a collection of Paperclip photos.

<%= jrs_javascript(:selector => ‘’, :wrap_id => ‘gallery’) %>

Note the use of the :selector and :wrap_id options. :selector allows you to use a different DOM selector to advance the “slides” (the default is simply ‘img’), while :wrap_id allows you to set the the wrapping element – in this case ‘gallery’ – whatever you want. (Keep in mind that if you change these selectors, you will need to update the CSS accordingly, or the effect will not render properly.)


  • Add tests
  • Search recursively through a directory for images
  • Allow an option to pass of an array of image paths
  • Provide more flexibility for how the directory containing the images is found.
  • Allow an array of paperclip image attachment objects to be passed in.
  • Allow a non-infinite loop option
  • Add support for transitions triggered by a click event of a dom object, rather than a timed cycle.
  • Allow for different types of transition effects (slide up/down, slide left/right, etc.)
  • Re-factor the Javascript block so it’s not so hideously ugly.

Copyright © 2008 Alex Sharp, released under the MIT license

Something went wrong with that request. Please try again.