First jQuery Rails App

Creating a new app to learn jQuery basics.  I'll create a basic app per my previous post, then attempt follow this guy Jon Raasch's simple jQuery slideshow 'tutorial.'

# First, check status on versions
$ rvm --default use ruby-1.9.2-p180
Using /Users/jonesbb/.rvm/gems/ruby-1.9.2-p180
$ ruby -v
ruby 1.9.2p180 (2011-02-18 revision 30909) [x86_64-darwin10.7.0]
$ rails -v
Rails 3.0.11

# Created new rails app
$ rails new simple_jquery_slideshow1

# added Heroku gem to Gemfile

Found this site for setting up the rails 3 environment for jQuery.  Follow steps on the site and make sure to update the jquery.js filename in your config file to match what you download from jquery later on in this post.

# Remove the default javascripts from the public/javascripts/ directory.
$ rm controls.js dragdrop.js effects.js prototype.js rails.js

# Setup github repository from project home directory, ./simple_jquery_slideshow1/
$ git init
$ git add .
$ git commit -m "initial commit"

# create new repository on github: https://github.com/jonesbb, name it simple_jquery_slideshow1
$ $ git remote add origin git@github.com:jonesbb/simple_jquery_slideshow1.git
$ git push origin master

# Add jquery to Gemfile with this line:
gem 'jquery-rails', '>= 1.0.12'

$ bundle install

# Using a submodule in git to add jQuery driver to public/javascripts/jquery-ujs/
$ git submodule add git://github.com/rails/jquery-ujs.git public/javascripts/jquery-ujs

# Do a submodule init, which results in the following:
$ git submodule init
Submodule 'public/javascripts/jquery-ujs' (git://github.com/rails/jquery-ujs.git) registered for path 'public/javascripts/jquery-ujs'

Next, I downloaded the minified version (1.7.0) of jquery from the jquery website.  Although 1.7.1 existed, I figured that the kinks were worked out of 1.7.0.  Maybe a bad assumption, but oh well.

Put the downloaded jquery.min.js file inj /public/javascripts/

# Updated github and created Heroku app
$ git add .
$ git commit -m "added jquery"
$ git push
$ heroku create
# created http://vivid-leaf-3508.heroku.com/
$ git push heroku master

# Checkout a new Git branch to start creating the app's pages
$ git checkout -b basic-pages

# Create the pages controller
$ rails generate controller Pages home about contact

Downloaded the basic slideshow materials from Jon's website.

Created a ./public/stylesheets/custom.css file and put Jon's CSS there.

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

# added Jon's html code to the ./app/views/pages/home.html.erb file

At first, I got lots of errors trying to find the image files.  Turns out you need to specify the images using the erb syntax as shown here (defaults to images in the ./public/images/ directory).  More on routing here.

<%= image_tag "image1.jpg", :alt=>"Slideshow Image 1", :class=>"active" %>
    <%= image_tag "image3.jpg", :alt=>"Slideshow Image 3" %>
    <%= image_tag "image4.jpg", :alt=>"Slideshow Image 4" %>

Put Jon's images (because I'm lazy for this demo) in the ./public/images/ folder.  They're all the same size, so don't have to deal with possible issues there.

Added the following js code to ./public/application.js file.

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

# Update the config/routes.rb file to map and name the routes:
# Replace the get statements in the routes file with these match commands...

  match '/contact', :to => 'pages#contact'
  match '/about',   :to => 'pages#about'
  root :to => 'pages#home'

# update the repository to remove the default index.
$ git rm public/index.html
$ git commit -am "Removed default Rails page"

Do a set of commits and merge the basic-pages branch back to master git branch. 
Success!