Comments on: FBJS Slider Carousel

By: Clay McIlrath

Clay McIlrath — Tue, 15 Feb 2011 20:48:00 +0000

This is awesome Jeff, thanks for sharing!

By: Jeff

Jeff — Tue, 15 Feb 2011 20:11:00 +0000

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);
}

By: Jeff

Jeff — Tue, 15 Feb 2011 20:01:00 +0000

Hello – do you have an example page or demo that you could show? Thanks

By: Errol John

Errol John — Fri, 28 Jan 2011 05:50:00 +0000

It didnt work on my page?
it only displays the title 1 div?

By: Clay McIlrath

Clay McIlrath — Wed, 29 Dec 2010 03:29:00 +0000

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

By: Anonymous

Anonymous — Sat, 04 Dec 2010 15:35:00 +0000

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

By: Anonymous

Anonymous — Sat, 04 Dec 2010 12:50:00 +0000

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

By: Anonymous

Anonymous — Thu, 02 Dec 2010 17:40:00 +0000

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.

By: Anonymous

Anonymous — Thu, 02 Dec 2010 17:39:00 +0000

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.

By: Anonymous

Anonymous — Thu, 02 Dec 2010 17:37:00 +0000

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.