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.
Simple Images Slider to Creat 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!
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!
|
