This code snippet shows you how to make a sexy image carousel, including left/right arrow opacity fade and mouseover highlights, using FBJS. This code will work for Static FBML page tabs, FBML application tabs and FBML Facebook applications.
The end result will look something like this:
View it in action! Click Here!
Start with Style
First, let’s set some style elements. This looks a lot longer and more complicated than it actually is. You could easily make it more compact by putting more attributes on one line. I’ve got them broken out for clarity and readability. We start by establishing some CSS to control the float, width and visibility of the slideshow wrapper, the slide images, and the arrows.
[html] #slideshow_wrapper {width:530px;
clear: both;
margin-bottom: 20px;
}
#slideshow {
overflow: hidden;
width: 435px;
float: left;
position:relative;
margin-right: 5px;
}
#slideshow_inner {
position: relative;
width: 1250px;
}
#slideshow_inner a {
opacity:0.7;
margin: 0 7px;
}
#slideshow_inner a:hover {
opacity: 1;
}
/* right and left arrows */
.navarrows {
padding-top: 25px;
float: left;
display: block;
width: 32px;
padding-top: 35px;
cursor: pointer;
[/html]
The FBJS
Now for the FBJS script. Notice the first set of vars at the very beginning. These vars come into play when determining how your slideshow should behave. Should clicking on the arrows advance the slideshow by one image? Or one screen of images (for example, three at a time, if you have three thumbnails visible)? This is where you decide that.
Think of “slides” here as “screens”. currentslide should generally always be 0.
If you want an arrow click to advance the slideshow only one image at a time, then numslides should be the actual number of slides you have, slidesvisible should be the number you want to be displayed onscreen (three in my example image above), and slidewidth should be the width of your image plus any padding you need to account for.
If you want an arrow click to advance the slideshow one whole screen at a time, meaning all visible slides will be hidden and the next set of slides will slide out, then numslides should be the number of total “screens” you’ll have.
If you have 12 images, and you’re displaying 4 images per click, your numslides will be three, since 12/4=3. In this case, slidesvisible should always be one, and slidewidth should be the total width of your screen (so with 4 images per screen, you’d add up the width of each image, plug padding, and multiply by four).
I know it sounds confusing – play around with it a little bit or just read through the code below and you’ll start to understand how it works.
[javascript] // set some slider varsvar numslides = 7;
var slidesvisible = 3;
var currentslide = 0;
var slidewidth = 147;
function goright() {
if (currentslide <= (numslides-slidesvisible-1)) {
Animation(document.getElementById('slideshow_inner')).by('right', slidewidth+'px').by('left', '-'+slidewidth+'px').go();
if (currentslide == (numslides-slidesvisible-1)) {
Animation(document.getElementById('right_button')).to('opacity', '0.3').go();
Animation(document.getElementById('left_button')).to('opacity', '1').go();
}
if (currentslide 0) {
Animation(document.getElementById(‘slideshow_inner’)).by(‘left’, slidewidth+’px’).by(‘right’, ‘-‘+slidewidth+’px’).go();
if (currentslide == 1) {
Animation(document.getElementById(‘left_button’)).to(‘opacity’, ‘0.3’).go();
Animation(document.getElementById(‘right_button’)).to(‘opacity’, ‘1’).go();
}
if (currentslide > 1) { Animation(document.getElementById(‘right_button’)).to(‘opacity’, ‘1’).go(); }
currentslide–;
}
}
And finally, the HTML
And here’s how we implement it:
[html]
[/html]
That’s it. Obviously, you’ll need to replace my images and links with your own, but I’ve used this on big campaigns and it’s worked out great.
Also note that by adding a little additional HTML/CSS, you can have each image appear with links above or below it as well. You just need to create container divs around the link+image code and use CSS to style and float them accordingly, like:
[html] [/html]
Next up, I’ll show you how to use this code to create a “hero box” style display, where clicking on one of the images in the carousel doesn’t link out to a different place, but instead changes the content of a larger image on the same page.
