SiteKickr Web Development

Case Study: Flash vs. jQuery rotator

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:

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>