BarackSlideshow is a very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images (demo).
How to use
With a markup like this:
Loading



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 automaticallyautostart(defaults to false) Whether to start slideshow automatically upon initializationautointerval(defaults to 2000) Interval time from image to image in mstween(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
Pingback: 20 awesome image galleries. « Paul Rostorp’s Blog
Pingback: 75 CSS, JavaScript & Flash Photo Galleries, Slideshows, Lightboxes And Scripts | TECHFLAPS
Pingback: 7 Excellent JavaScript Content Sliders
Pingback: 75 CSS, JavaScript & Flash Photo Galleries, Slideshows, Lightboxes And Scripts « techflaps
Pingback: Useful Plugins and Resources For MooTools | mavrick
Pingback: Barackslideshow (devthought) « OnlineWebHelp
Pingback: 15个最佳jQuery幻灯插件和实例| Ajax| 前端观察
Pingback: Mootools – john-web
Pingback: 网页色妓个人网站-网页前端-网页设计 » 15个常用jQuery滑动插件和教程
Pingback: Think2free.com » 15 exceptional jQuery photo gallery and slider plugins
Pingback: Wordpress Plugin Dk Obama Slideshow | Daniel Caceiro Aversari
Pingback: BarackSlideshow | A tiny and lightweight slideshow | Ajaxmint - Endless Ajax samples on jQuery, MooTools, ExtJS, Dojo, Prototype and PHP
Pingback: 分享十五个最佳jQuery幻灯插件和教程 : 冷
Pingback: jQuery Content Sliders till Wordpress | Grafix Studio - webbdesigner och grafiker
Pingback: 15个最佳jQuery幻灯插件和教程 | 似水流年
Pingback: Best jQuery Feature Content Slider plugins and tutorials - Wsblogz.com – Web design magazine
Pingback: Best jQuery Feature Content Slider plugins and tutorials
Pingback: 10 תוספי הJquery Sliders היפים ביותר שישדרגו לכם את עיצוב האתר « עיצוב גרפי וטכנולוגיה
Pingback: BarackSlideshow 开源项目 - Ajax代码大全 - Java开源项目 - 图片管理 - ajax图片展示工具 - BarackSlideshow - Java免费软件 - 开源网
Pingback: BeautyCss » Blog Archive » 15款漂亮的JQuery幻灯片插件
Pingback: Favoriete JQuery Sliders | IDLaunch Webdesign, Websitebouw, Websiteonderhoud, phpBB, Wordpress, phpBB Support
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.
or you can do this
Catherine
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.
I’m a bit confused as well … ?
where is the download?
Very Nice Im using this on my new site!
Hey mate can I know your name so I can credit you on my webpage =]
Very Nice Im using this on my new site!
hey dude how did you download it?
cant find the download link, and this really looks cool
Cant’ find the download link either.
how does one download it
No idea how to download this?
how do i download ?
go to view page source…
How to download this Nice Work?
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
Download version 0.3 here:
http://webscripts.softpedia.com/scriptDownload/BarackSlideshow-Download-61697.html
This fixed my IE9 issue!
Thanks Trhess
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????
It doesnt work in IE9. Can your correct it?
Thank you.
It doesnt work in IE9. Can your correct it?
Thank you.
Would love to hear of any IE9 fixes you’ve come across. Thanks.
You ca make it work with this meta inserted inside :
This will meke it compatible with IE9
http://www.kingsystems.ro
Good one
how ken i download it
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
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 ?
You ca make it work with this meta inserted inside :
This will make it compatible with IE9
http://www.kingsystems.ro
I’ve tried but it keeps not working in IE9, any other advice?
I’ve tried this fix as well to no avail.
Downloading and using version 0.3 fixed my IE9 issue.
http://webscripts.softpedia.com/scriptDownload/BarackSlideshow-Download-61697.html
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.
Will this slidershow thing work on wordpress?
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….
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.
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.
How do i center it?
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.
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.
Nice script
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?
Can’t get it to work in IE 9??? Otherwise, perfect!
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.
hello, this looks awesome… no download link? please put it back up! :D
I dont know if someone still has problems with ie9? but for me it helped to download the latest version of mootools.
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
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
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
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
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
this plugin is very bad, no download link, no faq, nothing at all but a simple demo
Can I use this plugin for commercial purposes?
Great job, excelent!
An error triggers when there is in IE9.
Great work. I didn’t see a download link. Is there one? Is this open source or commercial use only?
Many thanks,
Martin Dixon
Pingback: 30+ Beautiful jQuery Image Sliders Collection : DesignMock- Complete Design Sense
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.
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
Pingback: Best of jQuery Content Sliders | JS Tips
It works fine in FF. But the fade effect is not working in IE8.
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
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.
Pingback: 45+ Very Functional Javascript Sliders and Scrollers
Is that possible to link thumbnail images instead of text in right side ?
looks great.
Pingback: 10 UI jQuery Sliders Plugins for Wordpress