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.
-
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});
});
-
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 14 days ago
really nice, wonderful work
-
Guest 16 days 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 19 days 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???
-
Lesmond 20 days 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 29 days 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 about 1 month 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 3 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 4 months ago
very nice
-
stan 4 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 4 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 4 months ago
I still cannot figure out where the INITIALIZE starts and ends!
-
-
zhouxingfa 4 months ago
不知道说的什么
-
yayo 4 months ago
Great code!
But the auto the auto slide doesn’t work in IE and Opera. Can you help me?-
mahendra tyagi about 1 month 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 5 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 5 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 5 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
-
Ami 6 months ago
how can i adjust the timing of the first slide??
-
I don’t get it. I’ve actually found your javascript files and copied them exactly and this still doesn’t work.
My file structure is exactly - I mean exactly - like yours and it still doesn’t work.
What am I (and others) missing?
-
federico 9 months ago
Hi
i tested your script locally and it is very cool. But i have a little problem..when i inserted it into magento there were a lot of js problems .
The main problems is these:
line 16 of mootools-1.2.1-core-yc.js
Message: Property or method not supported by objectLine: 601 of index.php
Message: ‘item’ is nothing or is not an objectCan you help me?
-
The issue for your magento site is the fact that it uses the Mootolls Library. where as Magento uses protype. Those two javascript libraries butt heads and can’t get along. I love the look and feel of this too and wish i could place it on my magento store
-
-
David 9 months ago
Thank you for this script. It is fantastic
-
Thank you … this has me very helped.
-
hello, I really like your script but I’m facing a problem because I don’t know the java language. I would like to remove the options in order to see just the box with the different locations. Is it possible to do it?
Anyone knows where I could find a guide to customize it ?
thank you -
campur 10 months ago
Great Job !!!,
I am a newbie, I dont know how to install for wp or blogspot.
Where can I find the installation guide for wp and blogspot.
I am very appreciate if somebody can send me the installation guide.
Thanks-
There’s a WP plugin here:
http://www.dkcell.com.br/design/geral/dk-obama-plugin/
-
-
OK! BarackSlideshow now has its own project page, it has been updated, the demo package will run without major efforts, and there’s a simple how to use explanation.
-
gus 10 months ago
When I try installing someone’s work, I usually place everything EXACTLY as it arrives onto my site until I can make it work as intended. In that way there’s no question about paths, filenames, and so forth. This slideshow, unfortunately, seems to be hit and miss for most people who’ve written here despite their best efforts. There has to be something fundamentally wrong with the instructions since so many report the same issue, that is, the absence of transition and images open in a new window. I gave this four hours of my time. Now on the back burner unless Mr. Rauch can point us to the secret of his success or to some hidden instructions that will clarify the mystery.
-
Hello,
I am testing this slideshow in a webpage am actually designing. and passed a little time reading and understanding the files, I actually don’t know any java, anyways..I use this slideshow with XML, now I am trying to make the menu linkable to a page . and if it can show videos it would be great. or at least any solution to make this slideshow with linkeable menu, so when you clic con the picture from the slideshow you can open some site or page..
any Ideas please feel free to contact me.
-
for all those who had same problem as me (img opens in new window, no transition) - download MorphList (http://devthought.com/projects/mootools/morphlist/)
problem solved
(ps- dont forget core.js and more.js) -
Do you have a working demo? the one for download is not working. thanks
-
I also got it working correctly with the exception of removing the transition selector. I tried following the advice of adding the following:
var slideshow = new BarackSlideshow(’menu’, ‘pictures’, ‘loading’, { transition: ’slide-left’, auto: true });
It still goes through the rotation of transition effects. Can’t wait for the update. Great work though!
-
Hey Guys
The solution for some of you is that you’re missing two .js files that make it work. Look at your code that you copied over. You need core.js, and more.js. easily done by coping the link from the tag and using it in the demo.html address. MSG me if you have any more questions
-
Paula 10 months ago
Hi Bam Bam,
I love this slideshow as well! I also noticed that the two files that weren’t in the download were missing. My problem is that I cannot locate the two .js files.
Would you be able to provide me with the absolute path so that I may download these two files? I would be beyond appreciative.
-
Adriana 10 months ago
Sorry, I can’t also find it. Would you be able to provide me also the absolute path? Thank you.
-
-
The Netherlands 11 months ago
I don’t get it too (same problems). When will you post the how-to instructions? Thank you.
-
I don’t get it. I’ve actually found your javascript files and copied them exactly and this still doesn’t work.
My file structure is exactly - I mean exactly - like yours and it still doesn’t work.
What am I (and others) missing?
-
Hi, Like Whitney I too am having some serious problems. I want to use this so badly, however there seems to be no instructions, although that’s not the biggest hiccup, as that can be sussed with trial and error.
What is really holding me up, and I’m guessing this is the issue with Whitneys attempt, is that the mootools files are not included within the download, and there seems to be no explanation of exactly what is required in each so I can’t even build them on the mootools site myself.
Some help would be really appreciated!
-
Don’t worry. I’ll be posting BarackSlideshow as a project like the others with instructions on how to use it.
-
-
Hi,
Sorry to sound like such a noob to JS, but I can’t for the life of me get this slideshow to work. I really would like to use it and hopefully understand JS better, but nothing is working. I can’t even get the demo version to work after I downloaded it. The slideshow doesn’t do anything and when I click on a photo, the photo opens up in a new window! Is there some secret to get it to work? Will it only work after uploading the files?Please message me back.
-
very good, thanks
-
can u make a jquery version ?, thanks
-
Randall about 1 year ago
thanks for this! Simple, clean, lightweight…what’s not to like?
If anyone is having trouble getting this to work without removing the transition options, simply go into the barackslideshow.css file and add #slideshow-options{ display: none;}. This way, you can keep the entire transition section in the code of your page, but it won’t show up.
-
Jeff McArthur about 1 year ago
This is not working in Opera
g 
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.