Slideshow style image transition on click??

Slideshow style image transition on click??

This is the HTML I am currently using:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    #container{width:960px;margin:0 auto;overflow:hidden}
    #sidebar{width:300px;float:left;margin:0 20px 0 0}
    #sidebar ul{list-style:none}
    #sidebar li a{color:#363636;text-decoration:none}
    #sidebar li a:hover{font-weight:700}
    #main{width:640px;float:right;position:relative}
    #loader-gif{position:absolute;top:100px;left:50%}
    #sidebar li a.active{font-weight:700}
    #featured{width:800px;height:600px;margin:0 auto}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/cowboy/jquery-hashchange/raw/master/jquery.ba-hashchange.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript" src="js/site-main.js"></script>
    </head>

    <body>
    <div id="container">
            <div id="featured-wrap">
                <div id="featured"><img src="images/hot-800x600.jpg" width="800" height="600" /></div>
            </div>
            <div id="sidebar">
            <ul>
                <li><a href="overview.php" title="Overview" class="active">Overview</a></li>
                <li><a href="test-1.php" title="Test 1">Test 1</a></li>
                <li><a href="test-2.php" title="Test 2">Test 2</a></li>
                <li><a href="test-3.php" title="Test 3">Test 3</a></li>           
            </ul>
        </div>
        <div id="main">
            <div id="guts">
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
            </div>
        </div>
    </div>
    </body>
    </html>









































This is the JS I am using:
  1. $(function() {

        // Preload images
        var cache = [];
        // Arguments are image paths relative to the current page.
        $.preLoadImages = function()
        {
            var args_len = arguments.length;
            for (var i = args_len; i--;)
            {
                var cacheImage = document.createElement('img');
                cacheImage.src = arguments[i];
                cache.push(cacheImage);
            }
        }
        $.preLoadImages("images/hot-800x600.jpg","images/maserati_gts_wallpaper_800x600_02.jpg","images/maserati_newqp_wallpaper_800x600_001.jpg","TDK06_800x600.jpg");
       
        // Load pages on nav click
        var newHash = "",
        $mainContent = $("#main"),
        $el;
       
        $("#sidebar li").delegate("a", "click", function()
        {
            window.location.hash = $(this).attr("href");
            return false;
        });
       
        $(window).bind('hashchange', function()
        {
            newHash = window.location.hash.substring(1);
           
            if(newHash)
            $mainContent.find("#guts").fadeOut(200, function()
            {
                $mainContent.hide().load(newHash + " #guts", function()
                {
                    $mainContent.fadeIn(200);
                });
                $("#sidebar li a").removeClass("active");
                $("#sidebar li a[href='"+newHash+"']").addClass("active");
            });   
        });
       
        $(window).trigger('hashchange');
       
    });













































So I am using jQuery to dynamically load each page on hashchange, for each page there is a DIV called "featured" that has a featured image for each page, what I would like to do is on hashchange fade out the existing featured image and fade in the featured image for the current page over the top, I would like to do this in the style of the jQuery cycle plugin so that the fade transition is seamless and looks nice, wondering if it is possible to do this and how? I have tried several options but I can't seem to get it working.

Any ideas?

Thank you!