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>
<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
No comments:
Post a Comment