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.
-
David 15 days 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 about 1 month 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-
Guillermo Rauch about 1 month ago
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.
-
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 2 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 about 1 month ago
Sorry, I can’t also find it. Would you be able to provide me also the absolute path? Thank you.
-
-
The Netherlands 2 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 4 months 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 4 months ago
This is not working in Opera
-
prashanth 4 months ago
hi thanks for the script. I liked it very much and its working fine in Mozilla but in IE6 the auto slide does not seem to work.. is there any way to solve this problem…, Plz help me if any one knows…
-
Seb 4 months ago
resolved
i used another code for fixe header (found here http://www.pmob.co.uk/temp/fixedlayoutexample5.htm) and it’s works fine !thanks again for your script !
-
Hi, thanks for this nice slideshow.
Maybe you may help me, i’ve a problem with positionning the slideshow under IE when i use css for fixed a header (container height 100%) !Any help would be very appreciated !
test page here : http://www.pleasegroove.me/test.htm -
Does anyone have an example with lots of photos in slider and huge photos if possible ?
Thanks in advance -
Derrick 4 months ago
This turned out to be a nice script, however, if you try to change the demo, it does
not work. You’re stuck with the random transitions.anyone know how to adjust the transitions? I found it in the .js file, but how do you
detach from demo. This could prove to be a deal breaker.-
In response to your prior comments, and based on the requests of other users, I’ll fix the zipped demo and add a new one without the transition selector.
For now just use it like this
var slideshow = new BarackSlideshow(’menu’, ‘pictures’, ‘loading’, { transition: ’slide-left’, auto: true });
transition: can be slide-left, slide-top, slide-right, slide-bottom or fade
-
-
Finally messed around and got it to work. However, I renamed it to John McCain slide
show. Obama’s a fraud. -
DOESN’T WORK. I uploaded this and its a no go. You click on the link and the photo opens up in a new
window by itself. -
Anthony 6 months ago
Hey I’m having some problems implimenting the 1.2 version. I’ve got the script from the Barack Slidshow update, and i cant get it to trigger…
window.addEvent(’domready’, function() {
new MorphList($(’menu’).getElement(’ul’));
});That (with FancyList in place of MorphList) was what made the 1.1 version to work, how do i get it to work for the 1.2 version? Please help,or is there any way to get 1.2 demo of the menu working (in using the same example as the 1.1 demo).
-
mike 6 months ago
This slideshow is awesome (thank you) but doesn’t work with any lightbox (lightbox, slimbox, milkbox…)
Do you have an idea about that?
thank you
-
maramei 6 months ago
just curious what your feelings are on how the script can be used. do you allow commerical use of your scripts?
-
Ken Edwards 6 months ago
Can you point me to a few websites that are using the BarackSlideshow. I want to do one that automatically moves threw the list. thanks
-
Very nice work
-
It would be nice if it had a timer.
Good work though.
-
Great slideshow. I love lightweight code, and will definitely find a good use for this…
-
Erik 7 months ago
UPGRADE??? Is it possible to add more list items and have them scroll up-n-down (like a carousel effect) from a mouse hover?
I got this idea from a flash file:
http://www.flashden.net/item/xml-banner-rotator-5/21498Can this be done without flash? I’m willing to pay someone to make this work.
Erik
-
I need a little bit of your help please … I found the reason why it doesn;t work for me… and I am so SAD because I was looking for something like this for a long time…. OK, this is the reason:
I use a template an my menu it’s “put” into page with this command, by this code !!!!!!
and the slideshow by this code !!!!!!
It seems that this two codes don’t work togheter or something, because when I take this code out from the page the slideshow works… If the both codes are in the page, when I try to use the SLIDESHOW THE PICTURE OPENS IN A NEW WINDOWS TAB, ETC. Please help me because I like this so much and I was looking for a long time for something like this. Ty in Advence -
marco barbieri 7 months ago
can I implement it in Iweb? with the html snippet or maybe using an Iframe?
what file (from those included in the downloaded link) would I have to put in the html snippet?thanks an architecture student from italy.
-
Greg 7 months ago
Excellent script. Is it possible to add a Next and Previous button? If so can you advise how. Also how could I add a second menu? For example I like the sidemenu with descriptions but I’d like a new menu that has like image numbers 01 to whatever with the Next and Prev buttons each side.
Hope you can help
Cheers
-
hello,
i want to show the first image in menu not loading id when i put the id=”loading” in the first that doesn’t work.
please help.sorry i don’t speak english well.
thank you
-
Ok, figured out what it was doing in IE6. It breaks in IE6 if any of the images that you are calling in your “pictures” div are missing from the directory or are improperly linked to the source image.
The only IE6 issue I have found is the line height of the list style but that is easily fixed.
Guillermo, you should add that fix to the css in the download files.
-
Great script. Would really love to use it but it isn’t working in IE6. When links are clicked, nothing happens. The images are not showing. Also, the loading graphic doesn’t leave, it remains with the spinning gif image.
Please provide any info you have for making this work in IE6, thanks!
-
Very useful and very nice!
Thank you very much! -
Hey, its’s a very nice script I would prefer in my site!
Thank you very much for it! -
That is a killer script. I agree that Obama’s website is cut and head above the rest. Uber professional!
-
Hi, I was wondering if you could explain your “show” function. Specifically:
image.dispose().fade(’hide’).inject(this.curimage || this.images.getFirst(), this.curimage ? ‘after’ : ‘before’).fade(’in’);
image.getElement(’img’).setStyle(’display’, ‘block’);
$pick(this.curimage, image).get(’tween’).chain(function() { this.fireEvent(’onShow’, image); }.bind(this));I’m writing a simple image slideshow (on a timer) and you seem to have a great solution. I just can’t figure it out.
Thanks
-
Dan 10 months ago
Hey guys, this is just plain old beautiful.
Im trying to implement this into Sharepoint for our organization.
I was just wondering if anyone has tried this and been successful?
The problem im having is that when you click on one of the items it loads the picture in a new window instead on inline like it should
Any suggestions would be great -
thanks for this inspiration
-
Its Simply Amazing! thanks for this slideshow!
-
Willem 10 months ago
When is the script going te be fixed? It’s not working with IE7 and 8.
gus 
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 object
Line: 601 of index.php
Message: ‘item’ is nothing or is not an object
Can you help me?