BarackSlideshow – An elegant, lightweight slideshow script
This post discusses a project which has its own page. Please refer to BarackSlideshow for the most up-to-date information.
I guess pretty much everyone has seen Barack Obama’s website by now, which is clearly one of the prettiest of all candidates we’ve heard of so far. Not only is it an example of state-of-the-art design, but it’s also nice to navigate and interact with.
I decided to imitate the homepage slideshow. I had already experimented with similar animated lists, which allowed me to have it ready within minutes
The creation
I took my previous class (SlideList), and made a few changes here and there. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists.
I extended it and came up with a new class that receives the images and loading spinner as parameters (note: it’s arguable whether this is the best decision OOP-wise, but due to the simplicity of this script, this was the right call)
The code
To ensure all images are loaded before the user makes any interaction, the MooTools Assets component is used.
The CSS plays a major role (as in every other animation-focused script). I suggest you analyze it carefully before implementing it in your applications or websites. You’ll probably need to adjust the ids, or use classes instead to keep your stylesheets clean.
The markup is meaningful and simple. Two lists are used (one for the images and the other for the links). The loading element is included in the HTML, but it’s probably better to inject it from the script directly.
The pictures
The beautiful pictures were taken from Flickr with permission of the owners, unless they were directly released for non-commercial use. Thanks vgm8383, dogonnit, M. TANIGUCHI, GustavoBuriola & others!
The demo
Click here to see it in action or go to the project page for download and other details.
-
Hagerstown 20 days ago
I’m trying to use your script but it’s conflicting with a jQuery script on the same page. Here’s the link to the jQuery script it’s conflicting with: http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/. On jQuery script it’s conflicting with, if I comment out the jquery-1.3.1.js, your script works fine.
Any suggestions would be greatly appreciated.
-
enteresans.
-
S i got the script like an yahoo mail.
-
actually im search this script for a long time now i got it yeah!
-
Superb one its really helped me a lot.
-
StudentWebbie 3 months ago
Awesome script! … thank you very much, it’s very helpful
-
It’s very good.
I like this.
Thanks for share.
And I wrote something to introduce this project for my readers.
You can find the post about this in my website.
If something is wrong,pls figure it out.thanks. -
This is great! Thanks a lot
-
Thank you it is very useful to me but ican not installed in my site, please help me how to instlla slider in my website..
-
Mike 4 months ago
I would like to use the BarackSlideshow as a menu selector as well as a slideshow. For example I would like to change the images on a mouseover of each menu item and then on selection of a menu item open a specific page on the website.
Great tool look forward to using
-
KAthy 4 months ago
Can this be used in zen cart? I would like to have it setting on top of a category.
-
peter ural 4 months ago
At which place i have to set the following initialization. In the HTML document or in the .js file?
“window.addEvent(‘domready’, function(){
new BarackSlideshow(‘menu’, ‘pictures’, ‘loading’, {transition: ’slide-left’, auto: true});
});”Plz help me, thanks a lot!
-
Thanks for sharing, it’s very goog..
-
Hey Friends,
I have a problem with the “Barackslideshow” on my website.
I want to integrate a flv-video in my “Barackslideshow”.
How can I make a stop on this Mootools Slideshow, if I click on the play button in one of the li-elements with a flv-player?
Have anyone a answer of my question? Thank you for help
bye paul -
al 5 months ago
Hi Great slide show.
I’m trying to make the side menu slide using Fx.Slide. I need to add Fx.Slide to your more.js file but when I do it breaks the slide show.
Could you give me the list of what you have in your more.js?thanks
al
-
cryptonit 5 months ago
This is a great Slideshow! But I’m facing a strange behaviour: When I’m using a half-transparent png as background for the menu and/or the pictures- list this script adds a gradient to the background (only in ie). That’s definitely not what I expected this script would do…
Is this a bug or is it a feature? If it’s a feature how can I disable it?thx for your help!
-
chris 5 months ago
I am not an expert but not totally brand new. But i feel like an idiot, I am sure this has to be something simple. I can’t get it to work.
Here is the script tags in my page where I am wanting the slide:
window.addEvent(‘domready’, function(){
new BarackSlideshow(‘menu’, ‘pictures’, ‘loading’, {transition: ’slide-left’, auto: true});
});anyone see anything wrong?
-
my comment below didn’t include the script tags nor the script src tags so it will be hard to debug, i guess tags r disabled here
-
-
This is great! Thanks a lot
-
Tom 5 months ago
Great slideshow. I’ve gotten it running as designed but want to make a change so that it matches other pages on my site. I am using a preloader from Gayadesign.com (queryloader) for my other pages and want to use it on a page with this slideshow instead of the spinner. I can disable the spinner ok but there seems to be a conflict with the js for the preloader and the js for the BSS. Any help/direction is appreciated.
-
I haven’t tried the plug yet but it looks very nice!
I can think of a few sites I can use something like this on.
Thanks!
-
allen 6 months ago
i found the problem for the fade when using IE8, it’s in the css. you have to remove the position: relative; from the #slideshow #pictures li img element.
Change:
#slideshow #pictures li img { display: block; position: relative; bottom: 0; }To:
#slideshow #pictures li img { display: block; bottom: 0; }and it works.
-
Aurel 5 months ago
Great, i was having the same problem and it fixed it very well !
thank you -
I tried this change but am still experiencing a problem with the fade in ie8. Any other idea what might cause the fade to not work. Ok in all other browsers.
-
-
It appears the fade effects don’t work in IE8. It works fine in IE6 which is strange because it’s usually the other way around.
All the other effects work fine just not the fade.
-
damn it, the tags from my comment are missing.
so, here is goes again:
if somebody out there is still confused about the initialization, it’s simple (after lots of attempts, i got it myself):
in the demo page, he includes “demo.js” on the head. take it off and then initialize it with that little part he says in the text.
then, the files (inside the script tags) will look like this:
“mootools-1.2.1-core-yc.js”
“mootools-1.2.2.2-more.js”
“Fx.MorphList.js”
“../Source/BarackSlideshow.js”
//here starts the initialization
window.addEvent(‘domready’, function(){
new BarackSlideshow(‘menu’, ‘pictures’, ‘loading’, {transition: ‘fade’, auto: true});
});
-
stefan plau 4 months ago
At which place i have to set the following initialization. In the HTML document or in the .js file?
“window.addEvent(’domready’, function(){
new BarackSlideshow(’menu’, ‘pictures’, ‘loading’, {transition: ’slide-left’, auto: true});
});”Please help, thanks a lot!
-
-
if somebody out there is still confused about the iniciatilization, it’s simple (after lots of attempts, i got it myself):
in the demo page, he includes “demo.js” on the . take it off and then initialize it with that little part he says in the text.
then, it’ll be like this:
window.addEvent(‘domready’, function(){
new BarackSlideshow(‘menu’, ‘pictures’, ‘loading’, {transition: ‘fade’, auto: true});
}); -
Spin 6 months ago
really nice, wonderful work
-
Guest 6 months ago
This is a great demo, i was able to customize it to my needs however i notice one little bug in Firefox that i’m not sure how to get rid of. Currently i have the slideshow running automatically however while it’s running i notice that there’s a small amount of time where the other links on my page aren’t clickable. This occurs during the switch over of the images in the slideshow, once it transitions to the next image then the other links are clickable. Does anyone know how i can fix this, this only occurs in firefox. Also if this isn’t a clear explanation of the problem please let me know.
Thanks.
-
Matt 6 months ago
This is great! I’ve managed to resize it fine and it works great with a few changes to the stylesheet. Would it be possible to add another variable so that an image description could be displayed over the bottom section of each photo???
-
Matt, Did you every find out how to add a caption?
-
-
Lesmond 6 months ago
Great slide show, like it a lot, but I just want the show to run on its own, with no Transition at all, any help/pointers would be appreciated.
Thanks Les
-
asldjfh 7 months ago
where is the download link lol
-
Good work but, it is possible to add stop/start slideshow and previous/next image buttons?!
-
The slider is amazing, but i can’t find a way to download it
-
Well this works in FF but not in older versions of IE. Am I missing something. I even tried the demo link from this site on IE and still no luck.
-
Szetolf 7 months ago
hmmm i’ve got a problem…
what happens if there’s like 40 items instead of just 6…
i tried to make 15 items and the menu went over … is there a way to get a scroll or something into the script?btw, can I use put this into magento?
-
It gives problem if there is only one image in the list.
please help-
good
-
-
Really like menu in the barack demo, is there an easy way to freeze the animation on hover?-also flyout submenus would be nice.
great work!Regards Roger
-
Ruana 9 months ago
Great looking Slideshow. Thank you.
I just read through all the comments and… for the future:
why not provide the people with a list of dependences and perhaps a link to where they can get them (in the case of mootools-1.2.2.2-core.js and mootools-1.2.2.2-more.js directly from the moo-homepage). That would have made half of the postings unneccessary. Also, a short hint on the demo page that the people should not initialize the slideshow with the demo.js they find there but have to use the js-snippet on the introduction page to make it work as intended would avoid a lot of misunderstanding.
Aside of that, I love the look of your slideshow and will definately use it in my next project. Probably together with the lavalamp menu which I only knew of JQuery before. Only today did I find out that the JQuery scipt is based on your code. Great work!. -
sushil shirbhate 9 months ago
very nice
-
stan 9 months ago
Very elegant, but i can’ make it work without the OPTIONS section at the bottom of the page. I’m assuming that is simply a demo, but when I remove the CSS LINK REL and/or the OPTIONS section the slideshow doesn’t work! (?)
-
Guillermo Rauch 9 months ago
Check the demo in the downloadable zip in the project page.
-
Can it play without the radio buttons?
-
Absolutely! That’s the intent.
-
should I just be able to delete that and have it work? Wondering what I’m doing wrong. Thanks for any help!
-
Yeah, but you have to use the initialization snippet in the project page http://devthought.com/projects/mootools/barackslideshow/, not the one in the demo.
-
Thanks Guillermo… but please… what lines get replaced?!
-
Stan 9 months ago
I still cannot figure out where the INITIALIZE starts and ends!
-
-
zhouxingfa 10 months ago
不知道说的什么
-
yayo 10 months ago
Great code!
But the auto the auto slide doesn’t work in IE and Opera. Can you help me?-
mahendra tyagi 7 months ago
i m also having such problem that the in barack demo file it shows an error on IE why………..
jst tell me about it
-
-
Thanks for the great reference post..
ugg women classic -
Hi,
my website is in Php-Fusion, can you please tell me how to install this script for my Php-Fusion website as an panel. I think we have to combine some codes which I’m not good at. I appreciate anyone could answer my question -
Jon 10 months ago
Love the gallery. Have one question, is it possible to begin the slideshow on the first picture rather than having to click to begin?
Thanks!
-
Roy Janssen 11 months ago
ok, i’ve posted it here:
source code >> Melbourne
http://www.royjanssen.com/slider/Demo/ -
another attempt:
Melbourne
-
hmmm, your blog doesn’t like me posting codes… here’s another try
(added some spaces in order to show code)
-
Hi,
first of all, thanks a lot for the script. I’ve made some changes to your script (like sizes) in order to fit my own website.
One question remaining: can I link the city names both to a picture and weblink in order to load a page? Something like this?
Tnx in advance
-
Wery nice slide show thanks
-
Jamie 11 months ago
Has anyone got this to work with flash files. So instead of just images the could contain .swf files or image files?
If so please could I see an example
g 
excellent slide show from jquery its remember yahoo portal.