Snipe.Net Geeky, sweary things.

FBJS Image Carousel for FBML Apps & Fan Page Tabs

F

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.

#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;

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 vars
var 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–;
}
}

[/javascript]

And finally, the HTML

And here’s how we implement it:

<div id="slideshow_wrapper">
<img id="left_button" class="navarrows" src="http://www.snipeapps.com/images/arrow-sketch-left.png" />
<div id="slideshow">
	<div id="slideshow_inner">
		<a id="slide1" href="http://www.snipe.net" title="Snipe.Net"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg" /></a>
		<a id="slide2" href="http://www.spiffydns.net" title="SpiffyDNS"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-2.jpg" /></a>
		<a id="slide3" href="http://fbmhell.com" title="FBMHell"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-3.jpg" /></a>
		<a id="slide4" href="http://www.crankyhaiku.com" title="Cranky Haiku"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg" /></a>
		<a id="slide5" href="http://www.geekhaiku.com" title="Geek Haiku"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-2.jpg" /></a>
		<a id="slide6" href="http://socialmediadouchebag.net" title="Social Media Douchebag"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-3.jpg" /></a>
		<a id="slide7" href="http://tehawesome.net" title="Teh Awesome"><img src="http://www.snipe.net/wp-content/uploads/2009/10/thumb-1.jpg" /></a>
	</div>
</div>
<img id="right_button" class="navarrows" src="http://www.snipeapps.com/images/arrow-sketch-right.png" />

</div>
<br style="clear: both" />

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:

<div id="slideblock1" style="width: 84px;float: left;padding: 4px;text-align: center">
<a id="slide1" href="http://somelink.com" style="text-decoration: none;color: white">
<img src="http://www.yoursite.com/images/vidslugs-1.jpg" id="vidthumb"/>
<br />time to collect</a>
</div>

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.

About the author

snipe

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I run Grokability, Inc, and run several open source projects, including Snipe-IT Asset Management. Tweet at me @snipeyhead or read more...

By snipe
Snipe.Net Geeky, sweary things.

About Me

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I run Grokability, Inc, and run several open source projects, including Snipe-IT Asset Management. Tweet at me @snipeyhead or read more...

Get in Touch