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.
if ( comments_open() ) { ?>
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?
Oooh..really nice, can I use it?
@Brian
It works for me! I tried 3 and 2, and IE7.. really strange
@Tresseme
Sure!
FF 3 and Safari/Webkit on Mac OSX4, all is correct.
Tks for this nice slideshow.
So beatufiul gallery! Congratulations!
Hi, there are some way to add an autostart fading between pictures?
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?
Pingback: Mootools Slideshow Script: BarackSlideshow | APPZOMBiE
Pingback: Mootools İle Slayt Gösterisi | Baybars.NET - Baybars Kirman
Pingback: links for 2008-06-25 « Simply… A User
Pingback: Links Ⅳ - Peter Kröner - Die Kunst des Machbaren
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.
Pingback: BarackSlideshow - Lightweight Mootools Slideshow Script
Pingback: BarackSlideshow - Pases de imágenes con Mootools | miguelpuig.com
Nice but a bit heavy in chargment…
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.
It doesn’t work with Safari…
Pingback: links for 2008-06-25 | iKeif
very nice, the crossfade looks amazing
Pingback: BarackSlideshow | Otra forma de presentar imágenes con Mootools | ..: CRISTIAN ESLAVA | Diseño Gráfico / Web | Maquetación | Flash | Multimedia | 3D | FotografÃa :..
Pingback: links for 2008-06-25 « toonz
Pingback: OneDesign| BarackSlideshow - Mootools Slideshow
Could i rotate SWF flash files? its possible?
Very nice work.
You might want to use outline-style: none on those links.
Pingback: BarackSlideshow - Liviano y elegante biblioteca para implementar un slideshow - Desarrollo | Publicación sobre diseño, desarrollo, Internet & tecnologÃa - pixelco.us blog
Pingback: LautundKlar Webdesign Blog » Mootools Slideshow Script
Pingback: Un script léger pour un diaporama élégant | Pistachio's blog
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 :/
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
okay, i found out….adding “height” did the trick
Pingback: BarackSlideshow… nu e coincidenţă de nume | CNET.ro
Pingback: Ethan’s Blog » Blog Archive » Blah
Pingback: Mootools : BarackSlideshow | Web Tutorials
Is it possible that after a specified time it will automaticly go to the next object?
Pingback: Dk Obama Plugin - galeria de destaques | Dkcell Design
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
Nice script!
Pingback: WordPress Plugin Competition Blog » Dk Obama Slideshow Plugin
Pingback: Plugin Barack Slideshow para Wordpress | frogx.three
This is so great!! Thanks!
Pingback: links for 2008-07-09 | SOJo: Student of Online Journalism
add to the css
outline:none;
to remove the dots around the selected item.
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.
@Willin
I thought that was the city where the ruins were. Is Machu Picchu an actual city ? I have to wikipedia it
@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.
Pingback: Galipe » Blog Archive » BarackSlideshow, un diaporama léger basé sur mootools
it doesnt work on IE6
Pingback: BarackSlideshow - An elegant, lightweight slideshow script | Whatsup
Pingback: A Slideshow Like BarackObama.com | ChaseSagum.com
Pingback: Barackslideshow Script » » pixey.de
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
Pingback: 100 Scripts and Script Resources | OpenJason
Pingback: BarackSlideshow - Otra manera de mostrar galerias de imagenes - colorate
Is there a way to modify this so it just scrolls through the images automatically at a predetermined interval?
Would be nice if there was a caption to accompany each photo. :)
Otherwise really great looking!! ~ Obama 08!!
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!!
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
@Willem
Are you getting a JS error? What version/build of IE are you using exactly ? (check the About window)
It also does not open the begin image when I start the effect. It begins with the image of the last menu item… :-(
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.
Same problem in IE8…
I hope someone can help me, because I really like this script!
Pingback: Sherina :: BarackSlideshow - An elegant slideshow script :: August :: 2008
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
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!
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
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
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.
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
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
Pingback: BarackSlideshow – Einfaches Script mit Mehrwert | Javascript | Dr. Web Weblog
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
}
yes, same problem in IE8
yes, same problem in IE8! What should I do?
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.
Pingback: BarackSlideshow - Monjes - Cultura libre
i agree with the others, please add:
a:focus { outline: none; }
to your CSS file ASAP
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.
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.
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!
Pingback: Sascha-Seyfert.de – links for 2008-08-20
Pingback: BarackSlideshow - An elegant, lightweight slideshow script | Free Image Galleries
Thanks SmaryGuy, worked a treat!
When is the script going te be fixed? It’s not working with IE7 and 8.
Pingback: 75 (Really) Useful JavaScript Techniques | Developer's Toolbox | Smashing Magazine
Pingback: 75 (Really) Useful JavaScript Techniques | The Creative Children
Its Simply Amazing! thanks for this slideshow!
Pingback: 75 (Really) Useful JavaScript Techniques | aboutCREATION
Pingback: 75 (Really) Useful JavaScript Techniques | POLPDESIGN
Pingback: 75 (Really) Useful JavaScript Techniques | The Human Network (HCI IDC Alumni Blog)
Pingback: 75 Useful JavaScript Techniques | download
thanks for this inspiration ;)
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
Pingback: links for 2008-09-15 | SmileHappy
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
Pingback: 75 técnicas (realmente) útiles con JavaScript - Carrero Bitácora de los Hermanos Carrero, David Carrero Fernández-Baillo y Jaime Carrero Fernández-Baillo.
Pingback: 75 (Really) Useful JavaScript Techniques | Neurosoftware web dev
Pingback: 75 (Really) Useful JavaScript Techniques « Where LOVE begins
Pingback: Elegante Fotogalerie | Grafikdesign-Magazin
That is a killer script. I agree that Obama’s website is cut and head above the rest. Uber professional!
Hey, its’s a very nice script I would prefer in my site!
Thank you very much for it!
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.
Very nice list, thank you.green chi hair straighteners
Pingback: 75 (Really) Useful JavaScript Techniques | Evolution : weblog
Pingback: ??????? ?????????: ??? ?? ?????, ?????? ????? | ???? ?????? ???? ??? ?, ????? ?????? ????? ???? ??? ?
Nice tut!
http://www.prijzenfun.nl
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
Pingback: Presente las images con BarackSlideshow como el website de Barack Obama — Tu Tecnologo
Pingback: BarackSlideshow - An elegant, lightweight slideshow script » My Web Stuff
Pingback: noisylime » Blog Archive » Smooth slideshow
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
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.
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
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
Great slideshow. I love lightweight code, and will definitely find a good use for this…
It would be nice if it had a timer.
Good work though.
Very nice work
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
just curious what your feelings are on how the script can be used. do you allow commerical use of your scripts?
Pingback: Boost My Code » CSS Javascript MooTools » An elegant, lightweight slideshow script
Pingback: 14 Slide Scripts & 20+ Cool Slide Effect Web Designs | DESIGNwalker max
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
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).
Pingback: Barack Obama’s website takes office! | Natetronn
Pingback: Devthought - Guillermo Rauch’s Blog » BarackSlideshow and MorphList updated
Pingback: Gathering of Thoughts » Blog Archive » BarackSlideshow and MorphList updated
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.
Finally messed around and got it to work. However, I renamed it to John McCain slide
show. Obama’s a fraud.
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
Does anyone have an example with lots of photos in slider and huge photos if possible ?
Thanks in advance
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
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 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…
This is not working in Opera :(
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.
can u make a jquery version ?, thanks :)
very good, thanks
Pingback: Gathering of Thoughts » Blog Archive » The new TextboxList is here
Pingback: The new TextboxList is here | BYOHosting.com Blogs
Pingback: Free Image Galleries
Pingback: BarackSlideshow - Slider com Mootools | Links Web
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.
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.
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?
I don’t get it too (same problems). When will you post the how-to instructions? Thank you.
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
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.
Sorry, I can’t also find it. Would you be able to provide me also the absolute path? Thank you.
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!
Do you have a working demo? the one for download is not working. thanks
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)
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.
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.
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.
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/
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.
Thank you for this script. It is fantastic
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?
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
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?
how can i adjust the timing of the first slide??
Pingback: Barack Slideshow – pokaz slajdów w MooTools | MooTools
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
Wery nice slide show thanks
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
hmmm, your blog doesn’t like me posting codes… here’s another try
Melbourne
(added some spaces in order to show code)
another attempt:
Melbourne
ok, i’ve posted it here:
source code >> Melbourne
http://www.royjanssen.com/slider/Demo/
Pingback: Les meilleures solutions de diaporama flash et javascript | WebCssDesign
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!
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
Pingback: Free Slideshow, Gallery And Lightboxes Scripts | VNAMEDIA Sharing Center
Great code!
But the auto the auto slide doesn’t work in IE and Opera. Can you help me?
i m also having such problem that the in barack demo file it shows an error on IE why………..
jst tell me about it
不知道说的什么
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! (?)
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?!
I still cannot figure out where the INITIALIZE starts and ends!
very nice
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!.
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
It gives problem if there is only one image in the list.
please help
good
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?
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.
The slider is amazing, but i can’t find a way to download it :|
Good work but, it is possible to add stop/start slideshow and previous/next image buttons?!
where is the download link lol
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
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???
Matt, Did you every find out how to add a caption?
how did you resize it
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.
really nice, wonderful work
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});
});
:)
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});
});
:)
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!
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.
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.
Great, i was having the same problem and it fixed it very well !
thank you
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.
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!
Pingback: BEST 25 ajax photo sliding solutions | ExtraTuts
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 :)
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?
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
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!
sdfsdfddsfsdfsdfs fsdfs fsdfsd fsdfsd
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
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
Thanks for sharing, it’s very goog..
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!
Can this be used in zen cart? I would like to have it setting on top of a category.
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..
This is great! Thanks a lot
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.
Awesome script! … thank you very much, it’s very helpful
Pingback: BEST 25 ajax photo sliding solutions » abdie.web.id
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.
Pingback: BARACKSLIDESHOW – MooTools幻灯片演示脚本
enteresans.
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.
excellent slide show from jquery its remember yahoo portal.
shdf
aa
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
gffdfgf
dddddddd
thanks, simply amazing slide shows
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!
It doenst work in IE 9.
like
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
After the section which will bring the page on IE9 into IE8 mode.
It’s not posting the code!
Is there any way it can auto run in ie
Amazingly brilliant.
how i can download the script? pls guide me
http://devthought.com/wp-content/projects/mootools/barackslideshow/Demo/
just open above link and rightclick on web page and click on “Save Page AS”. on local machine. open that download file.. it work..
great work! where is the download page?
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
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
Not IE9 compatible wich I think is a flaw.
Pingback: Great Useful Javascript Photo Gallery | MyReadCycle.com - Online Blog, SEO Tips, Internet, Traffic, Software, News