In this study, our goal was to compare the development time to create a very simple 3 slide rotator in jQuery vs. Adobe Flash.
From the start, It seems clear that jQuery poses a couple advantages:
- Free
- No proprietary software required
- Ability to change the fade / delay speeds easily
While, Adobe Flash will certainly offer more control to fine tune any given rotator / slideshow.
For our Case Study, I was looking to create a very simple rotator with simple fade in/out transitions and image captions.
Results:
jQuery rotator: 35 minutes
Flash rotator: 32 minutes
Given the slight development time improvement of the Flash rotator, my personal choice would still be jQuery. The jQuery rotator has fewer dependencies (the jQuery library and that the browser supports Javascript). The code is also clean and elegant. Given, that if this rotator had more the 3 slides, the code would get a little "nested".
The CSS
body { margin-top: 80px; background-color: #030001; }
div { position: absolute; left: 50%; top: 50%; margin-left: -375px; margin-top: -280px; }
table { display: none; position: absolute; left: 50%; top: 50%; margin-left: -500px; margin-top: -205px; }
table td { text-align: center; width: 485px; padding-left: 15px; }
table td:first-child { padding-right: 15px; padding-left: 0; }
img { display: none; }
table img { display: block; }
a img { border: 0; }
.slide-text { margin-top: 35px; }
.enter { margin: 23px auto; }
The jQuery
$(window).load(function(){
$('#slide1-image').fadeIn(2000, function() {
$('#slide1-text').fadeIn(2000, function() {
$('#slide1-image').delay(3000).fadeOut(1500);
$('#slide1-text').delay(3000).fadeOut(1500, function() {
$('#slide2-image').fadeIn(2000, function() {
$('#slide2-text').fadeIn(2000, function() {
$('#slide2-image').delay(3000).fadeOut(1500);
$('#slide2-text').delay(3000).fadeOut(1500, function() {
$('table').fadeIn(3000);
});
});
});
});
});
});
});
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>sitekickr Example</title>
<link media="screen" rel="stylesheet" href="img.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="img.js"></script>
</head>
<body>
<div id="slide1">
<img id="slide1-image" src="http://www.sitekickr.com/img/slide1-image.jpg" alt="" />
<a href="http://www.sitekickr.com/blog/"><img id="slide1-text" class="slide-text" src="http://www.sitekickr.com/img/slide1-text.jpg" alt="" /></a>
</div>
<div id="slide2">
<img id="slide2-image" src="http://www.sitekickr.com/img/slide2-image.jpg" alt="" />
<a href="http://www.sitekickr.com/"><img id="slide2-text" class="slide-text" src="http://www.sitekickr.com/img/slide2-text.jpg" alt="" /></a>
</div>
<table id="slide3">
<tr>
<td>
<img id="slide3-left" src="http://www.sitekickr.com/img/slide3-left.png" alt="" />
<a href="http://www.sitekickr.com/blog/"><img id="enter-left" class="enter" src="http://www.sitekickr.com/img/enter.jpg" alt="" /></a>
</td>
<td>
<img id="slide3-right" src="http://www.sitekickr.com/img/slide3-right.jpg" alt="" />
<a href="http://www.sitekickr.com/"><img id="enter-right" class="enter" src="http://www.sitekickr.com/img/enter.jpg" alt="" /></a>
</td>
</tr>
</table>
</body>
</html>