MatthewVB

I was recently working on a project where I had a series of pictures I wanted to display in a nice scroll across the screen, complete with the ability to have captions and link pictures to other pages. I stumbled across BenjaminKeen’s Image Scroller and decided to give it a whirl. It’s a really simple solution and here’s how I went about implementing it in rails. (Oh, it’s free too!) We’re going to use an XML feed to pull the data in for our images.

Here’s what our finished product will look like:

Getting Started
1. Download Source (download / old version link)Once downloaded, created a folder called image_scroller inside your public folder. Then, place: scroller_x.swf and swf_object.js inside the image_scroller folder. The rest of the files you really don’t need for what we’re doing.

2. Insert the code onto your page.

Open up the view file you want to place the code on. Insert the following code to get the project rolling:
<div id="scroller2" style="width:375px; height: 66px;">
Your browser is not able to run this Flash script.<br />
<br />
Requirements: <br />
- JavaScript must be enabled<br />
- You must have Flash installed<br />

<script type="text/javascript">
var so2 = new SWFObject("/image_scroller/scroller_x.swf", "scroller2", "100%", "90", "8");

so2.addVariable("sourceFile", "<%= url_for :controller => 'teamhub', :action => 'faces_photos', :sport_id => @sport.id %>");
so2.addVariable("fileType", "XML");
so2.addVariable("scrollSpeed", "10");
so2.addVariable("stageWidth", "375");
so2.addVariable("stageHeight", "75");
so2.addVariable("thumbSize", "50");
so2.addVariable("bgColor", "ffffff");
so2.addVariable("navColor", "000000");
so2.addVariable("autoScroll", "no");
so2.addVariable("thumbBackgroundColor", "ffffff");
so2.addVariable("thumbBackgroundOpacity", "100");
so2.addVariable("captionAlign", "left");
so2.write("scroller2");
</script>
</div>

A few notes about the code above:

• The first line let’s you specify the height and width of the object.
• Inside the javascript, you see: var so2 = new SWFObject(“/image_scroller/scroller_x.swf”, “scroller2″, “100%”, “90″, “8″); The params of the SWFObject are calling for the following: (source location, the name of your scroller object’s div id, width to occupy, height to occupy, version of the image_scroller software).
• Following this you see the first line of addVariable: so2.addVariable(“sourceFile”, “<%= url_for :controller => ‘user’, :action => ‘faces_photos’, :user_id=> @user.id %>”); The ruby code inside of here is pulling out the XML. note the controller, action, and ID for the info we want to pull in. In this case, we have a user controller, an action faces_photos which pulls our photo array for the user with the id of @user.id.
• All the rest of great customizations that you can add to your scroller. BenjaminKeen documents (configuration link) them all and what you can do with them. For this example, you have to keep the fileType of XML present.

Ruby Controller

We’ve used attachment_fu to upload all of our images (see Mike Clark’s tutorial). Here’s what our controller looks like:
def faces_photos
@userphotos= Userphoto.find(:all, :conditions => ['thumbnail IS ? AND user_id = ?', nil, params[:user_id]])
render :layout => false
end

A quick break down:

• Our first line pulls the array of user photos for that user. We search for thumbnail IS nil so that we don’t pull all the different versions of the photo that attachmenu_fu created for us.
• The second line is also important, as it says not to use our layout, cause we’re going to use XML.

XML View

We need an XML file which we’ve called faces_photos.rxml. Here’s what it looks like:
xml.items{
for photo in @userphotos
xml.item{
xml.thumbURL(photo.user.userphoto.public_filename(:thumb))
xml.linkURL(url_for :controller => :portal, :action => :view_profile, :username => photo.user.username)
}
end
}

What we’re doing is cycling through all the photos in our @userphotos array. We have a few things we’re putting into our items list:

• thumbURL: this is the link to the location of the thumbnail image (or whatever image you want to use in the scroller)
• linkURL: an optional item, this is where clicking on the image in the scroller will take you. In this case, we’re going to the user’s profile.
• caption: A caption for the photo, also optional. We didn’t put one in this example, but you could throw in the title of the picture quite easily that then displays below the photo.

With this, we’re all set! Customize your scroller to be user it’s what you want and give it a run.

Common Errors

1. Photos aren’t displaying: Double check your XML file and be sure you’re constructing it the right away. A good test is to browse to the xml file itself to see if the links are correct. In this example, we’d browse to controller\faces_photos.xml\3
2. When you scroller, images are appearing outside the box: You have a problem with your widths not matching. Make sure all the places where width is listed are matching; there’re 3 locations: the div id line, the creation of the SWF object line, and finally the configuration of the scroller.

Enjoy your new image scroller and using Ruby to got to play with some XML. A few more XML tutorials will be coming as I show you how to put some killer charts and maps onto your app in the upcoming weeks.