This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Sunday, March 2, 2008

Simple images slider to create Flickr-like slideshows

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

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>

..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>
<li>...some content here.. </li>
<li>...some content here.. </li>
....
</ul>
</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>

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>


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

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

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


Thanks!

Download this tutorial

blog comments powered by Disqus
Hüseyin said...

Cool! very good job. Thank for the post..

Anonymous said...

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?

Anonymous said...

IE6 slide Fix:

#horizontal_carousel .container {
position:relative;
width: 555px;
overflow: hidden;
}

Antonio said...

@anonymous: thanks to fix this issue with Explorer 6!

Anonymous said...

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!

Anonymous said...

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?

BillyG said...

Got a demo?

AmitYadav said...

This worked for me

#horizontal_carousel .container {
position:relative;
width: 100%;
overflow: hidden;
}

Peter said...

Thank you. I like it.

Emre said...

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)

Naina said...

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!

gabryboom said...

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!

m!ketrix said...

great discoverment! The slideshow 'flickr-like' effect is exactly what i need for my site cine25.com! Great job at your blog.

patembe said...

What's a great posting...keep creativ brother
:D

kobian design said...

A really cool slideshow, even better than the one on Flickr!!

great job of posting it for free, thanks a bunch :)

Anonymous said...

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!

Jorge Quinteros said...

Is it possible to implement this feature with actual thumbnail feeds coming from Flickr photos?

Sander said...

Just wanted to say thanks for this tutorial. I really like this slideshow thingie!

Justin said...

Thanks for your tutorial. It looks very nice. Just one question, is it possible to show a enlarged version on click on a thumbnail.

Anonymous said...

u have done a very good job , Thanks a lot for providing such an idea.
God bless you

gocsp said...

hey,

"while ($row = mysql_fetch_array($getImages {?>"

two ")" miss at ($getImages))

:)

nice tutorial.

Anonymous said...

hi, nice work! but any idea how to make it auto slide?

thanks!

Anonymous said...

Is it possible that when the slideshow reaches the end the 1st image is populated and it starts over?

Anonymous said...

this's amazing.thank you x

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News