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

Demo

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.

262 Comments

I have gone to Obama’s site, and seen the slideshow in action, however, when I check your slideshow in Firefox2 on Mac or Windows it doesn’t work. I have also check IE7 and IE6, and your version of the slideshow doesn’t work. Perhaps you are in the middle of working on it?

Tresseme said

Oooh..really nice, can I use it?

Guillermo Rauch said

@Brian
It works for me! I tried 3 and 2, and IE7.. really strange

@Tresseme
Sure!

Ghazal said

FF 3 and Safari/Webkit on Mac OSX4, all is correct.
Tks for this nice slideshow.

So beatufiul gallery! Congratulations!

Samuel said

Hi, there are some way to add an autostart fading between pictures?

Dirk said

very nice.

Wonderful work, great skills.
May i maybe suggest you trying to get something with the MooSound embedded for a full media slide show thing? wouldn’t that be a nice add-on to your list of creations?

weras said

Hello, i was wondering whether your BarackSlideshow has timed slide function (pictures automaticly changing in a period of time). If it does how to activate it. I really need it, like badly. I hope you can help and thanks in advance.

Laboo said

Nice but a bit heavy in chargment…

Luke said

Looks great.

One slight glitch, though – when I visit the demo using FF 3 + Greasemonkey + Greased Lightbox (which inserts the Lightbox Script into pages with images), clicking on the links launches them in Lightbox.

Could I suggest that, when the JavaScript for the slideshow loads (thereby proving that JavaScript is working for the user’s browser, and that they will be getting the rich slideshow experience already), it also goes through and removes/replaces the href values of the image links?

Just a suggestion, from an admitted novice, but thought it may be a good solution.

Stephane said

It doesn’t work with Safari…

very nice, the crossfade looks amazing

Samuel said

Could i rotate SWF flash files? its possible?

Nick said

Very nice work.
You might want to use outline-style: none on those links.

Simon said

Hello :) I just love this menu ! :) I will use it forever ;) [ till next obama campain and new menu remake ;P ] But … i have a little problem :/

When i use menu in opera 9.5 it looks fine ! But in IE 7 the block with links [ cities names] is higher than blocks with images ( the last city name is lower than image about 40px ) How can i fix it ? Are there any tags that ie might misundertsood :/

jan said

Hi There!

nice work! i would like to get i work in ie6 but display:block is giving the list too much line-height…any ideas to solve this? thanx & cheers, jan

jan said

okay, i found out….adding “height” did the trick

brambori said

Is it possible that after a specified time it will automaticly go to the next object?

Kaiserlino said

Hi…
Hope there is no problem, but i adapted this plugin to work with WordPress.

If you could help me promoting, i would be glad. :D

http://www.dkcell.com.br/design/2008/dk-obama-plugin/

Here is the link

Fubiz said

Nice script!

fraN said

This is so great!! Thanks!

Genia said

add to the css
outline:none;
to remove the dots around the selected item.

Willin said

Nice slideshow, but a simple comment, the place you say Urubamba, is actually “Machu Pichu”, an UNESCO human patrimony. Is in Perú. By the way is a beatiful place to visit.
Regards from Chile.

Guillermo Rauch said

@Willin
I thought that was the city where the ruins were. Is Machu Picchu an actual city ? I have to wikipedia it

Guillermo Rauch said

@Willin
My research indicates the province of Urubamba holds the district of Machu Picchu. I think in this list, Urubamba fits better, for Machu Picchu is only a very small region.

une said

it doesnt work on IE6

SilverTab said

Sweet script! I love the effect, it’s slick as hell!

About the Urubamba/Machu Picchu thing… to be honest, I visited machu picchu 2 years ago (and most of Peru + Bolivia), and from what I can remember Urubamba is: a province, a small town of Peru, and it’s also a river…. One thing that I’m sure of… Urubamba isn’t *known* as the province that holds the district of Machu Picchu…. I don’t remember hearing the name once while I was there…except for the river, where Aguas Caliente (the closest city to machu picchu) is located… besides that, I don’t think I heard the name once while I was in Peru…
Anyway, about your list… I’m not sure Urubamba fits better, try googling both “Urubamba” and “Machu Picchu” for images and you’ll see for yourself ;) The ruins you are showing in your slideshow are known to 90% of the people as “Machu Picchu”… It may reside in the Urubamba province, you’re probably right about that, but most people aren’t aware of that ( I certainly wasn’t and I visited the place myself)…! Anyway… details…details…

Besides that, well, I’ll say it again, love the script, love the effect! :)
-SilverTab

A. Ellis said

Is there a way to modify this so it just scrolls through the images automatically at a predetermined interval?

00 said

Would be nice if there was a caption to accompany each photo. :)

Otherwise really great looking!! ~ Obama 08!!

Ahmed said

Excellent! + Automatic transition through the slides would be better… just like barack obama’s, anyone know how to do it??? I so badly need it to go through each slide automatically… i’m even prepared to pay for it to be done! I’m sure many other ppl want it also!!

Willem said

Hi,

I downloaded it and it doesn’t work in IE7. The browser opens the image in a new window/tab when I click on a menu item instead of showing the effect. The live demo does work. What is wrong here? I hope someone can help me. I use the script in a very important project.

Willem

Guillermo Rauch said

@Willem
Are you getting a JS error? What version/build of IE are you using exactly ? (check the About window)

Willem said

It also does not open the begin image when I start the effect. It begins with the image of the last menu item… :-(

Willem said

I do not get a JS error. I’m using IE 7 (7.0.5730.11). The live demo works fine, but when I start the downloaded script, it begins with the image from the last menu item and it opens the images in a new window/tab instead of showing it with the effect.

Willem said

Same problem in IE8…

Willem said

I hope someone can help me, because I really like this script!

Dibya Pradana said

hi dev..
do you have the mootools 1.11 version for the script? love the effect very much and I hope i can use it with mootools 1.11

thanx

Eric said

Anyone know I can just us the text links with the arrow moving to follow? Or as anyone seen an example of an arrow follow vertical list menu like that, just the menu?

Thanks!

Bill said

I put the slideshow into a div. It looks fine in the markup, and in the wysiwyg (DWcs3), images stacked over the bg, but upon testing, the spinner just goes round and round, althoough the background images, sidebar, etc. look fine, the images just won’t load. I have checked the url time and again, and even moved the location of the ‘images’ folder to various places, etc.

Firebug informs me I am getting an “Assset is undefined” error in the code on line 28,
which is of course the “new Asset.images” portion of the barackslideshow.js.

Arhg. I have been wracking my brains on this one, but am pretty new to scripting.
Reason for the long post is that perhaps if this gets answered, it will help other as well (me to of course :) )

Thanks for a great site and tools,

Bill

Bill said

Thank You for your response regarding the correct method to make this work in a stand alone Div.
As you suggested, I loaded the mootools-1.2-more.js into my controlling js file and it worked a charm. Also, I had to do an “easter egg hunt” to find the method you suggested, and learned a few things along the way.

Thanks again

Bill

load js into page /method/http://docs111.mootools.net/Remote/Assets.js

Willem said

Guillermo Rauch, can you please help me out? I mentioned earlier that the effect isn’t working correct in IE 7 and 8. The demo works fine, but the download doesn’t. The browser displays the image from the last menu option when I open the effect. There is also no fade in/out when I go from one menu option to an other.

Sarm said

Hello

This gallery not working with HTML . After click on like it’s opening image only in new window. After remove all HTML tage from page. It will start work.

Please fix it

Thanks

Sarm said

Hello

This gallery not working with HTML tags . After click on link it’s opening image in new window. After remove all HTML tags like , , from page. It will start work.

Please fix it

Thanks

Anton said

I would disable the outline which becomes visible if you click on a title, by the following css code:

#menu li a:focus {
outline: none
}

Philipp said

yes, same problem in IE8

Philipp said

yes, same problem in IE8! What should I do?

Dan said

Do you have any intention of re-writing your lavalamp menu (Fancy menu) with the new MorphList code? I tool the old example you wrote for the fancy menu and attempted to replicate it with MorphList and have had no luck so far making it work. Since it is such a small amount of code, can you re-write the fancy menu with MorphList rather than make us guess how to do it. That was a nice effect, but unfortunately using MooTools 1.2 I cannot use it any longer. It is probably something small and stupid I am not seeing, but if you can make it work, I would appreciate seeing it. Also, since I am asking for your attention, is there an easy way to use MorphList to perform the FancyMenu effect with simple text based menu items or are image menus necessary. thanks much. Nice work on the slideshow.

david said

i agree with the others, please add:

a:focus { outline: none; }

to your CSS file ASAP

Greg said

Jan has alluded to it, can someone please tell me the CSS code to reduce the line height in IE? Really like your work though, very pretty. Thank you.

Willem said

Last attempt…(after three earlier requests for help)

The scripts is not working with IE (7 and 8). The browser doesn’t show the fade in/out effect and it begins with the image of the last menu item. Can the developer do something to make it work? I really want to use the script but I have to use something else when it’s not fixed.

SmaryGuy said

For anyone wondering why it is not working. IE generates an empty text-element inside, and then forces the
content to fit. I.e., the height cannot be less than the line-height
of the contents.

If your box is empty, you can set line-height:0px , and it should
counter the problem

so your css would look like this

#slideshow #menu {
background: url(‘images/bg_side.jpg’);
list-style-type: none;
width: 166px;
height: 257px;
line-height:0px;
right: 0;
padding-top: 20px; }

Enjoy and Awesome script man!

Greg said

Thanks SmaryGuy, worked a treat!

Willem said

When is the script going te be fixed? It’s not working with IE7 and 8.

Its Simply Amazing! thanks for this slideshow!

Dietmar said

thanks for this inspiration ;)

Dan said

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

Matt said

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

That is a killer script. I agree that Obama’s website is cut and head above the rest. Uber professional!

Paul said

Hey, its’s a very nice script I would prefer in my site!
Thank you very much for it!

Summer said

Very useful and very nice!
Thank you very much!

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!

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.

212 said

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

Greg said

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

marco barbieri said

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.

Radu said

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

Erik said

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/21498

Can this be done without flash? I’m willing to pay someone to make this work.

Erik

Stampe said

Great slideshow. I love lightweight code, and will definitely find a good use for this…

MY STADY said

It would be nice if it had a timer.

Good work though.

tasker said

Very nice work

Ken Edwards said

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

maramei said

just curious what your feelings are on how the script can be used. do you allow commerical use of your scripts?

mike said

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

Anthony said

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).

Derrick said

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.

Derrick said

Finally messed around and got it to work. However, I renamed it to John McCain slide
show. Obama’s a fraud.

Derrick said

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.

    Guillermo Rauch said

    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

Does anyone have an example with lots of photos in slider and huge photos if possible ?
Thanks in advance

Seb said

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

Seb said

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 !

prashanth said

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…

Jeff McArthur said

This is not working in Opera :(

Randall said

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.

stoukette said

can u make a jquery version ?, thanks :)

very good, thanks

Whitney said

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.

Chris said

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!

    Guillermo Rauch said

    Don’t worry. I’ll be posting BarackSlideshow as a project like the others with instructions on how to use it.

Dave said

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?

The Netherlands said

I don’t get it too (same problems). When will you post the how-to instructions? Thank you.

Bam Bam said

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 said

    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 said

    Sorry, I can’t also find it. Would you be able to provide me also the absolute path? Thank you.

Stephen said

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!

ryan cook said

Do you have a working demo? the one for download is not working. thanks

ana. said

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)

Erick said

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.

gus said

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.

Guillermo Rauch said

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.

campur said

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

Francesco said

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

Thank you … this has me very helped.

David said

Thank you for this script. It is fantastic

federico said

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?

    Will said

    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

It’s honestly too bad this code doesn’t contain correct markup.

I’ve yet to see a pretty implementation of a carrousel that actually uses the following instead of two seperate UL’s:

Item 1

The item is 1

Item 2

The item is 2

jatropha said

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?

Ami said

how can i adjust the timing of the first slide??

Jamie said

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

videolar said

Wery nice slide show thanks

Roy said

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?

Melbourne

Tnx in advance

Roy Janssen said

hmmm, your blog doesn’t like me posting codes… here’s another try

Melbourne

(added some spaces in order to show code)

Roy Janssen said

another attempt:

Melbourne

Roy Janssen said

ok, i’ve posted it here:

source code >> Melbourne
http://www.royjanssen.com/slider/Demo/

Jon said

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!

ALI said

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

Thanks for the great reference post..
ugg women classic

yayo said

Great code!
But the auto the auto slide doesn’t work in IE and Opera. Can you help me?

    mahendra tyagi said

    i m also having such problem that the in barack demo file it shows an error on IE why………..
    jst tell me about it

zhouxingfa said

不知道说的什么

stan said

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 said

    Check the demo in the downloadable zip in the project page.

    stan said

    Can it play without the radio buttons?

    Guillermo Rauch said

    Absolutely! That’s the intent.

    stan said

    should I just be able to delete that and have it work? Wondering what I’m doing wrong. Thanks for any help!

    Guillermo Rauch said

    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.

    Stan said

    Thanks Guillermo… but please… what lines get replaced?!

    Stan said

    I still cannot figure out where the INITIALIZE starts and ends!

sushil shirbhate said

very nice

Ruana said

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!.

RSmith said

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

Shraddha said

It gives problem if there is only one image in the list.
please help

    g said

    good

Szetolf said

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?

William said

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.

Enoma said

The slider is amazing, but i can’t find a way to download it :|

Giorgia said

Good work but, it is possible to add stop/start slideshow and previous/next image buttons?!

asldjfh said

where is the download link lol

Lesmond said

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

Matt said

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???

    Tom said

    Matt, Did you every find out how to add a caption?

    photographer in need said

    how did you resize it

Guest said

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.

Spin said

really nice, wonderful work

Thamy said

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});
});

:)

Thamy said

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 said

    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!

allen said

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.

allen said

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 said

    Great, i was having the same problem and it fixed it very well !
    thank you

    tom said

    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.

Medya said

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!

Tom said

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.

This is great! Thanks a lot :)

chris said

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?

    chris said

    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

cryptonit said

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!

    Dfdfd said

    sdfsdfddsfsdfsdfs fsdfs fsdfsd fsdfsd

al said

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

Paul said

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

spor said

Thanks for sharing, it’s very goog..

peter ural said

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!

KAthy said

Can this be used in zen cart? I would like to have it setting on top of a category.

Mike said

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

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..

sensizim said

This is great! Thanks a lot

123doing said

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.

StudentWebbie said

Awesome script! … thank you very much, it’s very helpful

Superb one its really helped me a lot.

actually im search this script for a long time now i got it yeah!

S i got the script like an yahoo mail.

enteresans.

Hagerstown said

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.

shopping said

excellent slide show from jquery its remember yahoo portal.

Fdshsdh said

shdf

Aaa said

aa

photographer in need said

Hey thanks dude the sideshow is great and works perfectly on my site. I have only two questions first how do you remove white bars on the top and bottom, i didn’t recognize them until I put it on a black background. Second how do I enlarge it, I would really like to increase it by a few pixels so that It fits snugly in a box

Vdvsdf said

gffdfgf

Bouazzabass said

dddddddd

Alezz Sam said

thanks, simply amazing slide shows

Iainrutherford said

Hi
I like this plugin, but I have a question… When I add it to my page and remove the ‘demo’ option buttons it doesn’t work?? Is there something else I need to change to make it work without displaying all the ‘radio’ buttons underneath it in the demo?
Thanks!

Grohl said

It doenst work in IE 9.

Once_and_again said

like

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

Jack said

After the section which will bring the page on IE9 into IE8 mode.

Jack said

It’s not posting the code!

Graeme pinkerton said

Is there any way it can auto run in ie

Amazingly brilliant.

Ganness said

how i can download the script? pls guide me

Aleksandragorska said

great work! where is the download page?

Rajesh said

Just update the latest Mootool and it will start work in all IE

MooTools Core 1.4.2 with compatibility from
http://mootools.net/download

Kralnetci said

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.
http://www.kralnetci.com

Jona said

Not IE9 compatible wich I think is a flaw.

Your thoughts?

About Guillermo Rauch:

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