A simple rotating gallery of images made possible by javascript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
db/migrate
features/support
lib/tasks
public
spec
vendor/plugins
README.rdoc
Rakefile
cucumber.yml
product_rotator_extension.rb

README.rdoc

A rotating product catalog for a home page

This was created out of a specific need for a client. If you find it useful that is great. If you would like to fork it and change the implementation, that is also great. Hopefully you think this extension is great!

Installation

If you have the ray extension installed you can use it to install this plugin with the following command:

rake ray:extension:install name='product_rotator' hub='j2fly'

Otherwise manually clone this git repository in your radiant's /vendor/extensions folder with the following command

git clone git://github.com/j2fly/radiant-product_rotator-extension.git vendor/extensions/product_rotator

Be sure to link to the glider.js file, it's 2 prototype dependencies, and the product_rotator.css file in your layout's <head> section

<script type="text/javascript" src="/javascripts/admin/prototype.js"></script>
<script type="text/javascript" src="/javascripts/admin/effects.js"></script>
<script type="text/javascript" src="/javascripts/admin/glider.js"></script>
<link rel="stylesheet" href="/stylesheets/admin/product_rotator.css" type="text/css" media="screen" title="no title" charset="utf-8" />

Call out to the product_rotator tag in a page part or snippet or layout

<r:product_rotator />

The above tag will create the following HTML structure and JavaScript

<div id="my-glider">
  <div class="scroller">
    <div class="content">
      <ul>
        <r:products:each>
          <r:product />
        </r:products:each>
      </ul>
    </div>
  </div>
</div>
<div style="clear:both;"></div>
<script type="text/javascript" charset="utf-8">
  //<![CDATA[
    var my_glider = new Glider('my-glider', {autoGlide: true, frequency: 5});
  //]]>
</script>

The <r:product /> tag (in the structure above) iterates over each of the products defined in the admin interface and does the following:

  • Places a thumbnail to the left of the current product for the previous product (as determined by the position attribute)

  • Places an arrow image that points left which advances the glider one step back and stops the auto-rotation (this image is included and located at /images/admin/left_arrow.png)

  • Places the current product's main image as a clickable link with a path defined by the current product's link attribute

  • Places an arrow image that points right which advances the glider one step forward and stops the auto-rotaion (this image is included and located at /images/admin/right_arrow.png)

  • Places a thumbnail to the right of the current product for the next product (as determined by the position attribute)

You should leave the id's and classes as is and just modify the css file at: /stylesheets/admin/product_rotator.css

It is important to change the width of the scroller to meet your needs. If your images get too wide the scroller will wrap to the next line and look terrible.

The included styles look like this:

div.scroller{
  width:980px; /* choose any width you want */
  height:260px; /* choose any height you want */
  overflow:hidden; /* REQUIRED AS IS */
  margin:36px 0 36px 0; /* take this or leave it, I needed it to make my page look good */
}

div.scroller li.section{
  width:980px; /* should be the same as the div.scroller width above */
  height: 260px; /* should be the same as the div.scroller height above */
  overflow:hidden; /* REQUIRED AS IS */
  float:left; /* required to make the slider go from left to right. Without this it slides vertically */
}

div.scroller div.content{
  width:10000px;  /* so we can still see all the things we're scrolling through. The width may need to be adjusted depending on how much content you have */
}

.product_rotator_spacer{
  display:inline-block;
  width:175px; /* should be how ever wide a thumbnail + left_arrow.png image is */
  height:260px;' /* the height of your main rotating images */
}

TODO

  • Add configuration options that tie into the settings extension.

  • See if I can automatically include the javascript files with a before_filter like the bespin editor extension.