IT IS HERE! Get Smashing Node.JS on Amazon Kindle today!
Show Posts
← Back to homepage

BarackSlideshow is a very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images (demo).

Demo

How to use

With a markup like this:

BarackSlideshow is initialized as follows:

window.addEvent('domready', function(){
    new BarackSlideshow('menu', 'pictures', 'loading', {transition: 'slide-left', auto: true});
});

Options

  • transition (defaults to ‘fade’) Can be ‘slide-left’, ‘slide-right’, ‘slide-top’, ‘slide-bottom’, ‘fade’
  • auto (defaults to false) Whether to move from image to image automatically
  • autostart (defaults to false) Whether to start slideshow automatically upon initialization
  • autointerval (defaults to 2000) Interval time from image to image in ms
  • tween (defaults to {duration: 700}) Options to pass to MooTools Fx.Tween, which takes care of image transitions.

Changelog

  • 0.1: First release
  • 0.2:
    • Added ‘transition’ option. Can be slide-(bottom|top|left|right) or fade, or a function that returns any of those values
    • Added ‘tween’ to options to customize the transition effect
    • BarackSlideshow::show now also alters the menu state
    • Other tiny changes
  • 0.3: Integrated with the updated Fx.MorphList

92 Comments

Bob Bliss said

Thanks for this demo (Bob Bliss)

I would like the remove the Transitions and Auto Play option from the HTML page and just default to Auto Play = false and Transition = slide-left. I see the css in BarackSlideshow.js but I don’t know how to hard code those options so I can remove user options like ondemo.

Thanks for help.

    catherine said

    or you can do this

    Catherine

Michael said

Maybe I’m a little too tired, but the previous page had two links, 1 for demo and 1 for download. The download link brought me to this page, but I can’t find it. I did find MorphList.

    Journey said

    I’m a bit confused as well … ?

      Likedesign said

      where is the download?

Very Nice Im using this on my new site!

kaii said

Hey mate can I know your name so I can credit you on my webpage =]

Mapinsis said

Very Nice Im using this on my new site!

    photographer in need said

    hey dude how did you download it?

Skokomaster said

cant find the download link, and this really looks cool

Black_cherry2002 said

Cant’ find the download link either.

photographer in need said

how does one download it

A_jones86 said

No idea how to download this?

Talktotee said

how do i download ?

Zius075 said

How to download this Nice Work?

djkoka said

Hello, I’m spanish so sorry about my english.
I had the same problems to download this beautifull work, so I read the page source code and look for what files are required. I have made a shell script for linux to download all requiered files to take the slider, you only have to edit the css file and the index file in order to put the correct files routes. sasdgoodsafdsgssfilfasdfasdfrrouteroutes.http://www.sendspace.com/file/5qvzya
http://www.sendspace.com/file/5qvzyaasd

    Patrick said

    This fixed my IE9 issue!

Isc said

Thanks Trhess

Diogene said

Good job my friend, but i would like to dump the photos and put in with things like text and Ul and Li.

I also want to reverse the order left to right which was no biggie.

Is that possible to make this not about photos????

Grohl said

It doesnt work in IE9. Can your correct it?
Thank you.

Grohl said

It doesnt work in IE9. Can your correct it?
Thank you.

    Rachel said

    Would love to hear of any IE9 fixes you’ve come across. Thanks.

    King Systems said

    You ca make it work with this meta inserted inside :

    This will meke it compatible with IE9
    http://www.kingsystems.ro

Rijudrj said

Good one

marwa said

how ken i download it

Anonymous said

Thanks for sharing..But some how it does not support Internet Explore..i tried to tweak but its just fail to support on all IE versions..even 9. Any Help will be much appreciated

eric said

Sorry if I am being a noob, but how exactly can I implement this in my website? what files do I need? just the barackslideshow.js and barackslideshow.css ?

It doesn’t seem to work in IE 9 any fixes ?

    King Systems said

    You ca make it work with this meta inserted inside :

    This will make it compatible with IE9

    http://www.kingsystems.ro

      Emanuele Lacopo said

      I’ve tried but it keeps not working in IE9, any other advice?

      Patrick said

      I’ve tried this fix as well to no avail.

        Patrick said

        Downloading and using version 0.3 fixed my IE9 issue.
        http://webscripts.softpedia.com/scriptDownload/BarackSlideshow-Download-61697.html

          Rachel said

          Still no luck on IE9 for me. Can you offer any more guidance Patrick? Did you have to update the other scripts as well (Mootools, MorphList etc.)? Perhaps you could just send a link to yours and I can investigate the settings? Thanks for your help in diagnosing this.

cfong said

Will this slidershow thing work on wordpress?

Lewis Cave said

I’d also like to know when/if an IE9 fix could be made to this, as otherwise it is superb. I don’t really want to force IE7/8 rendering on my entire page just to get this to work….

Britta Bjur said

This is a fantastic slider! Very easy to set up. Thanks so much for sharing! I’m wondering if there’s a way to add a pause button to this slider? I’m completely new to all of this and my searches so far have brought up nothing useful. If you could give me some ideas or even some code to add a pause button, you would be a life-saver! Thanks again.

Anonymous said

Great script. Easy to implement. The only problem I am having is with images of varying sizes. The script, as it is now, places images on top of each other so if the photo on top is smaller then the one displayed behind it you get a layering effect. It would be better if the script hid each image before displaying it but maybe then we couldn’t get the fade effect. Might be impossible, but thought I would mention it.

tom said

How do i center it?

Bogdanbr said

Nice script. I have one question, how can i make the slider to start auto when you first open the site, i mean the “BarackSlideshow” to be there for like 2 seconds and then to auto start the next pictures ?? Thanks.

Leosc430 said

Very nice script. I also have same question as Bogdanbr. How to make the slide auto start also add descriptions according to the showing image.

insik jeon said

Nice script

J4G said

Can this be used commercially?

Sorry, but can anyone help me to understand how to use this code? The ul list is easy to see, but what about the components needed? I also tried downloading the js files linked in the demo page, but it doesn’t work for me… please help?

Patrick said

Can’t get it to work in IE 9??? Otherwise, perfect!

Anonymous said

I’ve a question. How could I implement it twice on my website? It seems that there is a conflict but I can’t find out where exactly. Do you have any idea that might help? Thanks in advance.

gethin said

hello, this looks awesome… no download link? please put it back up! :D

Roy said

I dont know if someone still has problems with ie9? but for me it helped to download the latest version of mootools.

Claudio Rovere said

Hallo, I’m Italian and I using this great script:
one question:
how can I set s direct link in the menù
Now the link active is only on click one the image

Claudio Rovere said

Hallo, I’m Italian and I using this great script:
one question:
how can I set s direct link in the menù
Now the link active is only on click one the image

Claudio Rovere said

Hallo, I’m Italian and I using this great script:
one question:
how can I set s direct link in the menù
Now the link active is only on click one the image

Claudio Rovere said

Hallo, I’m Italian and I using this great script:
one question:
how can I set s direct link in the menù
Now the link active is only on click one the image

Andrei Zisu said

An error triggers when there is only one element in slideshow. I am no mootools expert, but located the error to file: barackslideshow.js line 56

Pacomermela said

this plugin is very bad, no download link, no faq, nothing at all but a simple demo

Felipe said

Can I use this plugin for commercial purposes?
Great job, excelent!

AngrySnail said

An error triggers when there is in IE9.

Martin Dixon said

Great work. I didn’t see a download link. Is there one? Is this open source or commercial use only?

Many thanks,
Martin Dixon

Marc Herman said

Looks nice but I got an error: TypeError: ‘undefined’ is not a function (evaluating ‘this.element.getChildren()’).
Using your mootools version 1.2.2.2. solves the problem but that disrupts other (jQuery) scripts.
I have MooTools Core 1.4.2 installed (+ Fx.MorphList.js)
Can I get it to work? I really like this.

AccessBit Developer said

My images just up and disappear in IE. It works fine by itself in its own document. I have some fancybox JQuery on the page as well but have greyed out the scripts and still get the same thing. It also covers up my CSS3 mega Drop Down Menu and i have the set z-index script running i guess it just ignores it

Rajendra said

It works fine in FF. But the fade effect is not working in IE8.

LordDarkPhantom said

Link is here for those that do not know: http://webscripts.softpedia.com/scriptDownload/BarackSlideshow-Download-61697.html

Works absolutely perfectly. Tested version 0.3 of Barack Slideshow on latest version of Google Chrome (17) and Internet Explorer (9).

No JavaScript errors/warning from Chrome’s developer tools.

Smooth, fast, very elegant and customisable. Make sure to get all the JavaScript files, place them in correct directory and initialise the script by inserting in the :

window.addEvent(‘domready’, function(){
new BarackSlideshow(‘menu’, ‘pictures’, ‘loading’, {transition: ‘slide-left’, auto: true});
});

Note that you will have to get rid of the shadow background (CSS) if you do not have a white background, but this does not result in a loss of functionality.

Very great script, 9/10, would recommend!

Improvement: Make shadow background transparent

Mike said

Would be nice to hear back from someone about how to accomplish the following using this script:

1) Make the slideshow area relative, i.e. 100% and proportional, rather than fixed width/height (including photo and text menu)
2) Remove the slideshow options underneath; that’s great capability but I don’t feel the need to give my visitors a choice about transitions
3) Set the slideshow to use the slide-fade progression automatically
4) Automatically start after the page has loaded

I am not new to web stuff, but I’m on expert either. I can follow a recipe, but not invent it. So I’m needing some help here if at all possible.

I like the functionality of this script and would enjoy being able to use it.

chitra said

Is that possible to link thumbnail images instead of text in right side ?

Erez said

looks great.

Your thoughts?

About Guillermo Rauch:

CTO and co-founder of LearnBoost / Cloudup (acquired by Automattic in 2013). Argentine living in SF.