Setup SVN in Hostmonster Shared Hosting »

« Getting Started with Facebook JS (FBJS)

13 Apr 10

Social:

FBJS Slider Carousel

I’ve made a nice little FBJS Slider that I use quite often for animation within facebook. I hope that little snippets and code like this will help other developers make more interested and appealing Facebook applications. If you want to hire or request help with fbjs, fbml, or facebook development in general, you can do so by contacting my company Chosen

First with the styling

#slideWrap creates an extremely wide canvas for the slide to fit on aligned horizontally.
#wrapper then creates a sort of viewport to view the slides through.

<style type="text/css">
#wrapper { clear: left; overflow: hidden; position: relative; width: 520px; }
#slideWrap { clear: both; position: relative; width: 9000px;}
.slide { float: left; width: 520px; }
 
#wrapper #slideNav { float: right; margin: -2.75em 0 2em 0; }
	#slideNav li { display: inline; padding: 0; }
		#slideNav li a {
			background: url(http://cmcilrath.rssready.net/xcel/assets/images/bg_slideNav.png?v=3) no-repeat -12px top;
			display: block;
			float: left;
			height: 12px;
			margin-right: .5em;
			text-decoration: none;
			text-indent: -999em;
			width: 12px;
		}
		#slideNav li a.next, #slideNav li a.prev { width: 10px; }
		#slideNav li a.selected { color: #000; background-position: -12px bottom; }
 
		#slideNav li#prevSlide a { background-position: top left; }
		#slideNav li#prevSlide a.disabled { background-position: bottom left; }
 
		#slideNav li#nextSlide a { background-position: top right; }
		#slideNav li#nextSlide a.disabled { background-position: bottom right; }
</style>

The FBJS script

<script>
<!--
function Each(array, block){
	for (var i=0, l = array.length; i<l; i++){
		block(array[i]);
	}
}
 
var currentSlide = 1;
var maxSlides = 5;
var animating = false;
var slideWidth = 520;
var currentPX = 0;
 
function nextSlide(){
	var nextSlideNum = currentSlide + 1;
	if(nextSlideNum >= maxSlides){ toggleButton('next','disable'); }
	else if (nextSlideNum == 2 && currentSlide == 1){ toggleButton('prev','enable'); }
	currentSlide = nextSlideNum;
	if(animating == false){ scroll('right'); }
	return false;
}
 
function prevSlide(){
	var prevSlideNum = currentSlide - 1;
	if(prevSlideNum == 1){ toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides){ toggleButton('next','enable'); }
	currentSlide = prevSlideNum;
	if(animating == false){ scroll('left'); }
	return false;
}
 
function toggleButton(button,state){
	if(button == 'next' && state == 'disable'){
		document.getElementById('nextSlide').setInnerXHTML('<a href="#" class="next disabled">next slide &gt;</a>').removeEventListener('click',nextSlide);
	}
	if(button == 'next' && state == 'enable'){
		document.getElementById('nextSlide').setInnerXHTML('<a href="#" class="next">next slide &gt;</a>').addEventListener('click',nextSlide);
	}
	if(button == 'prev' && state == 'disable'){
		document.getElementById('prevSlide').setInnerXHTML('<a href="#" class="prev disabled">&lt; previous slide</a>').removeEventListener('click',prevSlide);
	}
	if(button == 'prev' && state == 'enable'){
		document.getElementById('prevSlide').setInnerXHTML('<a href="#" class="prev">&lt; previous slide</a>').addEventListener('click',prevSlide);
	}
}
 
function scroll(direction){
	Each(document.getElementById("slideNav").getElementsByTagName("a"), function(as){
		as.removeClassName("selected");
	});
 
	document.getElementById("slideNav-"+currentSlide).addClassName("selected");
 
	animating = true;
	var pixelShift = slideWidth * (currentSlide-1);
	var startingSlideNum = currentSlide;
	var Slide_container = document.getElementById('slideWrap');
 
	if(direction == 'left'){
		Animation(Slide_container)
			.by('left', '-' + pixelShift + 'px').from('-' + currentPX + 'px')
			.by('right', '-' + pixelShift + 'px').from(currentPX + 'px')
			.duration(300).ease(Animation.ease.both).checkpoint(1, function() {
				if(startingSlideNum == currentSlide){ animating=false; }
				else { scroll('left'); }
		}).go();
	}
	if(direction == 'right'){
		Animation(Slide_container)
			.by('right', pixelShift + 'px').from(currentPX + 'px')
			.by('left', '-' + pixelShift + 'px').from('-' + currentPX + 'px')
			.duration(300).ease(Animation.ease.both).checkpoint(1, function() {
				if(startingSlideNum == currentSlide){ animating=false; }
				else { scroll('right'); }
		}).go();
	}
 
	currentPX = pixelShift;
}
 
function showSlide(num){
	startingSlide = currentSlide;
	currentSlide = num;
 
	if(num > startingSlide){ scroll('left'); }
	else if (num < startingSlide) { scroll('right'); }
 
	if (startingSlide == maxSlides && currentSlide == 1){ toggleButton('next','enable'); toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides && startingSlide == 1){ toggleButton('prev','enable'); toggleButton('next','disable'); }
	else if (currentSlide == 1){ toggleButton('prev','disable'); }
	else if (currentSlide == maxSlides){ toggleButton('next','disable'); }
	else if (startingSlide == 1) { toggleButton('prev','enable'); }
	else if (startingSlide == maxSlides) { toggleButton('next','enable'); }
}
//-->
</script>

FBML Markup

Simple markup here, slideNav controls the slide with onclicks, the JS does the magic.

<div id="wrapper">
	<h2>Header</h2>
	<ul id="slideNav">
		<li id="prevSlide"><a href="#" class="prev disabled">&lt; previous slide</a></li>
		<li><a href="#" id="slideNav-1" onclick="showSlide(1); return false;" class="selected">1</a></li>
		<li><a href="#" id="slideNav-2" onclick="showSlide(2); return false;">2</a></li>
		<li><a href="#" id="slideNav-3" onclick="showSlide(3); return false;">3</a></li>
		<li><a href="#" id="slideNav-4" onclick="showSlide(4); return false;">4</a></li>
		<li><a href="#" id="slideNav-5" onclick="showSlide(5); return false;">5</a></li>
		<li id="nextSlide"><a href="#" class="next" onclick="nextSlide(); return false;">&gt;</a></li>
	</ul>
	<div id="slideWrap">
        <div id="slide_1" class="slide">
			<h3><a href="#">Title 1</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_2" class="slide">
			<h3><a href="#">Title 2</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_3" class="slide">
			<h3><a href="#">Title 3</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_4" class="slide">
			<h3><a href="#">Title 4</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
 
        <div id="slide_5" class="slide">
			<h3><a href="#">Title 5</a></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
	</div>
	<!-- end slideWrap -->
</div>

John
Hey this great, thanks for the info. I’ve been doing some cool stuff with FBJS for clients using the Static FBML application for pages. I was just trying to ingest all the changes to Facebook today and noticed that FBJS is not in the new developer docs (at least I couldn’t find it).
Is FBJS being killed off? What do you think?
John
Hey this great, thanks for the info. I’ve been doing some cool stuff with FBJS for clients using the Static FBML application for pages. I was just trying to ingest all the changes to Facebook today and noticed that FBJS is not in the new developer docs (at least I couldn’t find it).
Is FBJS being killed off? What do you think?
http://thinkclay.com Clay McIlrath
Nah, FBJS still exists, and isn’t going anywhere anytime soon. They just released the new docs today, but it’s all there, might just need to do a hard refresh.
http://thinkclay.com Clay McIlrath
Nah, FBJS still exists, and isn’t going anywhere anytime soon. They just released the new docs today, but it’s all there, might just need to do a hard refresh.
John
Cool, thanks. Looking forward to playing with this slider, take it easy.
J
John
Cool, thanks. Looking forward to playing with this slider, take it easy.
J
Pierre Malga
Hi, thanks for your tutorial, i have pasted all your code on my fbml page, but it doesn’t seem to work. I only see title 1 and it’s content. As i am very new in internet code stuff i’m sure i must be missing something. What could it be?
(sorry for my poor english)
regards
Pierre Malga
Hi, thanks for your tutorial, i have pasted all your code on my fbml page, but it doesn’t seem to work. I only see title 1 and it’s content. As i am very new in internet code stuff i’m sure i must be missing something. What could it be?
(sorry for my poor english)
regards
Nerudo
How do i use this should I copy the whole pieces of code into my FBML or what?
Nerudo
How do i use this should I copy the whole pieces of code into my FBML or what?
Ryan
This is almost exactly what I’m looking for. Struggling to get it working onmouseover, continuously scrolling. Contact me if you’d be willing to put this together as a paid project. Thanks.
Ryan
This is almost exactly what I’m looking for. Struggling to get it working onmouseover, continuously scrolling. Contact me if you’d be willing to put this together as a paid project. Thanks.
http://www.techsolsystem.com Satish
Thanks a lot for the cooool script..worked with charm
http://www.techsolsystem.com Satish
Thanks a lot for the cooool script..worked with charm
http://twitter.com/tomasdev Tom Roggero
loved it.
Praveen Seo
any one can explain how to use this code. can we copy all code into static FBML or some thing else
Hussain104
Hi,
Thanks for this article. But can you please tell me if its possible to have a vertical carousel instead of a horizontal one? How can i do it?
Thank you.
Peter
That’s really helpful; thanks for publishing this.
Kirtikumar
This is realy a very helpfull tutorial
Thank you
Kirtikumar Panchal
Phillip-hoffmann
I have the same problem, is there a solution to fix it?
Mike
Cool – but doesn’t work with IE ((( !
Greg
IE does not support inline css in Facebook. You have to remove the custom css and put it in another file and include it with a link.
http://twitter.com/pablochacin Pablo Chacin
Hi, thanks for the code. I can’t make it work. The navigation menu doesn’t appear, only the title “Header” and the title of the first slide “Title 1″.
Apparently, the styles are not working. I’m testing using Firefox, so it shouldn’t be a problem to put it inline, right? any idea?
Many thanks in advance
Anonymous
Hi,Nice script! Love it!There was some problems with css, but fbjs its self workingI wonder is there option to add some snippet to auto slide content, lets say every 5 seconds or something like that!?I suppose this code would be priceless then!Looking forward to seeing it!ThanksRegardsAlex
Anonymous
Yeah it’s been a while since I created this, so I imagine the dynamics of Facebook have changed. Auto slide could be setup on Canvas pages, using setInterval() but not within a tab, as tabs disable setInterval and setTimeout unless activated by an event listener like hover, click, etc.
Anonymous
As @Sashareds states above, the CSS is broken. If one of you implement with a fix, please do post code so I can update the post.
Anonymous
It’s definitely possible, but I don’t have the time or desire to do it for you. Most of it could be dealt with styles and then adjusting the pixel shift to shift vertically instead. A bit of research and referencing out vertical carousels might get you on the right path.
Anonymous
Thanks for the reply Clay
Than I need go futher and explore canvas pages perhaps!
But to be honest, I am a bit sick of it and tired to find any proper information about it in interent! Even on facebok!
Do you know any proper resources where I could find such an information?!
P.S.
What happend with facebook wiki?! It’s just gone! All links refered to there, don’t work any more!
Regards,
Alex
Anonymous
The best way to fix it, is to exclude old css, and write up your own! I didn’t dig toо deep for it, just wrote up my own
However if you remove the minus from margin of #wrapper #slideNav, you will see what should see
e.g. now is #wrapper #slideNav { float: right; margin: -2.75em 0 2em 0; }
Should be #wrapper #slideNav { float: right; margin: 2.75em 0 2em 0; }
From now you should see the red buttons!
Hope that helped!
Regards,
Alex
http://thinkclay.com Clay McIlrath
I’m not sure about the Wiki, but FB sucks with documentation. I can send you a couple ebooks I used to get started if you want to shoot me an email Clay [@] bychosen.com
http://twitter.com/ejrdeliquina Errol John
It didnt work on my page?
it only displays the title 1 div?
Jeff
Hello – do you have an example page or demo that you could show? Thanks
Jeff
Hey Guys,
Here is a cope snippet for a rotating banner that fades the previous image out and the new one in. It sorts the images randomly, but you could just get rid of that function. Note – the user must first click somewhere to activate it:
var imgArray = ['http://icons.iconarchive.com/icons/dragonxp/halloween/48/skull-icon.png', 'http://www.veryicon.com/icon/preview/System/Sticker%20System/Skull%20Icon.jpg', 'http://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Skull-Icon.svg/50px-Skull-Icon.svg.png';
function randOrd(){return (Math.round(Math.random())-0.5)}
imgArray.sort(randOrd);
var len = imgArray.length;
var count = 0;
rotate1();
function rotate1() {
var myBlock = document.getElementById('im1');
Animation(myBlock )
.to('opacity', 0)
.duration(500)
.go();
document.getElementById("im1").src = imgArray[count];
count++;
if (count>=len) {count = 0}
var tim1 = window.setTimeout(rotate1, 3000);
}
http://thinkclay.com Clay McIlrath
This is awesome Jeff, thanks for sharing!

Tags:

Category:

Social:

FBJS Slider Carousel

First with the styling

The FBJS script

FBML Markup

Browse posts by tags

Browse by category

Other Pages

Recent Posts

Chosen Development

Contribute