If you like Flickr slideshow, this article explains how to implement it using Prototype-UI framework.
Since long time I was looking for a simple way to implement a Flickr-like slideshow ("image carousel") and finally I found a good compromise between complexity and result to implement it using Prototype-UI, an awesome JavaScript framework based on Prototype and Scriptaculous.
So, to help my readers ;) I implemented a slideshow ready to use and this step-by-step tutorial explains how to customize it and use it in your web projects. Not fear! It's really simple!
Last update: March 10, 2008 - IE6 issue fixed by Anonymous
Download this tutorial Step 1: HTML code
The HTML code for this tutorial is very simple. You have to include in the <head> tag of the page you want to display your slideshow these files:
<script src="lib/prototype.js" type="text/javascript"></script>
<script src="lib/effects.js" type="text/javascript"></script>
<script src="lib/carousel.js" type="text/javascript"></script>
<script src="lib/effects.js" type="text/javascript"></script>
<script src="lib/carousel.js" type="text/javascript"></script>
..and this CSS file to stylize your slideshow:
<link href="prototype-ui.css" rel ="stylesheet" type="text/css" />
Now you can add the following code into the <body> tag:
<div id="horizontal_carousel">
<div class="container">
<ul>
</div>
<div class="buttons">
<div class="previous_button"></div>
<div class="next_button"></div>
<br />
</div>
<div class="container">
<ul>
<li>...some content here.. </li>
<li>...some content here.. </li>
....
</ul><li>...some content here.. </li>
....
</div>
<div class="buttons">
<div class="previous_button"></div>
<div class="next_button"></div>
<br />
</div>
You have to put the content you want to display on your slideshow (for example an image) into a <li> element of the <ul> list:
<ul>
<li><img src="img/img_1.png"></li>
<li><img src="img/img_2.png"></li>
<li><img src="img/img_3.png"></li>
....
</ul>
<li><img src="img/img_1.png"></li>
<li><img src="img/img_2.png"></li>
<li><img src="img/img_3.png"></li>
....
</ul>
If you use a server side language (PHP, Coldfusion, ASP...) you can populate dinamically the list. For example if you are a PHP developer you could use some code like this:
<?php
// Include connection to your database
include('dbconnection.php');
$getImages_sql = 'SELECT * FROM IMAGES';
$getImages mysql_query($getImages_sql);?>
<ul>
<?php while ($row = mysql_fetch_array($getImages {?>
<li><img src=" echo $row.['URL_image'] ?>"></li>
<?php } ?></ul>
... and add this these lines of code before to close the <body> tag:
<script type="text/javascript">
// <![CDATA[
function runTest() {
hCarousel = new UI.Carousel("horizontal_carousel");
}
Event.observe(window, "load", runTest);
// ]]>
</script>
// <![CDATA[
function runTest() {
hCarousel = new UI.Carousel("horizontal_carousel");
}
Event.observe(window, "load", runTest);
// ]]>
</script>
Step 2: CSS code to stylize your slideshow
You can modify the look of your simply modifying the related style sheet. For example to change the slideshow width (to display in this way more or less images on your slideshow) you can change the width attribute of the following CSS elements:
#horizontal_carousel {
width: 250px;
height: 100px;
padding:10px;
background:#f6f6f6;
border:solid 1px #e9e9e9;
}
#horizontal_carousel .container {
width: 260px;
overflow: hidden;
}
width: 250px;
height: 100px;
padding:10px;
background:#f6f6f6;
border:solid 1px #e9e9e9;
}
#horizontal_carousel .container {
width: 260px;
overflow: hidden;
}
...or if you want to change the look of horizontal previous / next buttons you can change the following code:
#horizontal_carousel .previous_button {
float: left;
width: 23px;
height: 7px;
background: url(img/but_prev.png) no-repeat;
z-index: 100;
cursor: pointer;
}
#horizontal_carousel .next_button {
float: left;
width: 23px;
height: 7px;
background: url(img/but_next.png) no-repeat;
z-index: 100;
cursor: pointer;
}
float: left;
width: 23px;
height: 7px;
background: url(img/but_prev.png) no-repeat;
z-index: 100;
cursor: pointer;
}
#horizontal_carousel .next_button {
float: left;
width: 23px;
height: 7px;
background: url(img/but_next.png) no-repeat;
z-index: 100;
cursor: pointer;
}
Internet Explorer 6 Issue Solved
Some readers signaled me an issue with Internet Explorer 6. An anonymous friend suggested the solution to fix it:
#horizontal_carousel .container {
position:relative;
width: 555px;
overflow: hidden;
}
position:relative;
width: 555px;
overflow: hidden;
}
Thanks!
Download this tutorial
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Comments
Subscribe to my feeds | Subscribe comments feeds
Cool! very good job. Thank for the post..
Nice work! I noticed that in IE6 on XP the images display horizontally outside of the DIVs. I tried wrapping everything in an outer div with a fixed width but it didn't seem to work. Any ideas?
IE6 slide Fix:
#horizontal_carousel .container {
position:relative;
width: 555px;
overflow: hidden;
}
@anonymous: thanks to fix this issue with Explorer 6!
this message you needn´t publish :-)
parametr width isn´t important. I forget for it. Important is only:
#horizontal_carousel .container {
position:relative;
overflow: hidden;
}
...IMHO very good slider!
This is not working correctly in IE7. It works in IE 6, Firefox, but in IE7, the bar with the images displays more than 3 images. ANyone else seeing this?
Got a demo?
This worked for me
#horizontal_carousel .container {
position:relative;
width: 100%;
overflow: hidden;
}
Thank you. I like it.
Why I couldn't do that. I try it for a WP theme. I see the menu but it is not sliding, just static.
Where is the problem? (I tried on localhost)
Very nice slideshow - I'm thinking of using it for a design portfolio website. But it isn't working in IE 8 - the same issue that was happening in IE 7 for previous users, it's now happening in IE 8 - any ideas on how to make it behave? Thanks!
How can I insert multiple slideshow in my blog(blogger)? I can insert one slide with your tutorial, but if I want to insert more different slide I cannot, It work only the first that appear on webpage! Please help me!
great discoverment! The slideshow 'flickr-like' effect is exactly what i need for my site cine25.com! Great job at your blog.
What's a great posting...keep creativ brother
:D
A really cool slideshow, even better than the one on Flickr!!
great job of posting it for free, thanks a bunch :)
Thank you. Thank you. Thank you. Your a life saver! Great Tutorial! It Works! Helped a lot that it was free. I am a believer!
Is it possible to implement this feature with actual thumbnail feeds coming from Flickr photos?
Just wanted to say thanks for this tutorial. I really like this slideshow thingie!
Thanks for your tutorial. It looks very nice. Just one question, is it possible to show a enlarged version on click on a thumbnail.
u have done a very good job , Thanks a lot for providing such an idea.
God bless you
hey,
"while ($row = mysql_fetch_array($getImages {?>"
two ")" miss at ($getImages))
:)
nice tutorial.
hi, nice work! but any idea how to make it auto slide?
thanks!
Is it possible that when the slideshow reaches the end the 1st image is populated and it starts over?
this's amazing.thank you x