Create an Image Rotator with Description (CSS/jQuery) Modified, Jquery Slideshow, Image gallery in Jquery, Jquery tutorial for Image Slideshow

Here I am providing the image rotator with few changes made by my self.
you can easily found jquery slideshow like image given below. 

of which I made some changes in position by using CSS.

CSS Code

        #main
        {
            overflow: hidden;
            width: 680px;
            margin: 0 auto;
            background: url('../images/banner.png') no-repeat scroll right bottom #41699C;
            border: 1px solid #41699C;
        }
        a
        {
            color: #fff;
        }
        /*--Main Image Preview--*/
        .main_image
        {
            width: 450px;
            height: 308px;
            float: right;
            position: relative;
            overflow: hidden;
            color: #fff;
        }
        .main_image h2
        {
            font-size: 2em;
            font-weight: normal;
            margin: 0 0 5px;
            padding: 10px;
        }
        .main_image p
        {
            font-size: 1.2em;
            padding: 10px;
            margin: 0;
            line-height: 1.6em;
        }
        .block small
        {
            padding: 0 0 0 20px;
            background: url(icon_calendar.gif) no-repeat 0 center;
            font-size: 1em;
        }
        .main_image .block small
        {
            margin-left: 10px;
        }
        .main_image .desc
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            display: none;
        }
        .main_image .block
        {
            width: 100%;/*
            background: #111;
            border-top: 1px solid #000;*/
        }
        .main_image img
        {    bottom: 0;
    position: absolute;
    right: 0;
        }
     
        .main_image a.collapse
        {
            background: url(btn_collapse.gif) no-repeat left top;
            height: 27px;
            width: 93px;
            text-indent: -99999px;
            position: absolute;
            top: -27px;
            right: 20px;
        }
        .main_image a.show
        {
            background-position: left bottom;
        }
        .image_thumb
        {
            float: left;
            width: 225px;
            background: #41699c;
            border-top: 1px solid #41699C;
        }
        .image_thumb img
        {
            border: 1px solid #ccc;
            padding: 5px;
            background: #fff;
            float: left;
        }
        .image_thumb ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .image_thumb ul li
        {
            margin: 0;
            background: #2c4769 url(../images/nav_a.jpg) repeat-x;
            width: 100%;
            float: left;
            border-bottom: 1px solid #4d5687;
            border-top: 1px solid #22252a;
        }
     
        .image_thumb ul li a
        {
            display:none;
        }
        .image_thumb ul li.hover
        {
            background: #2c4769;
            cursor: pointer;
        }
        .image_thumb ul li.active
        {
            background: #41699c;
            cursor: default;
        }
        html .image_thumb ul li h2
        {
            font-size: 11px;
            margin: 5px 0;
            color:#fff;
            font-weight:bold;
            padding: 0;
        }
        .image_thumb ul li div
        {
            float: left;
            margin-left: 5px;
            padding: 0;
            padding-left:45px;
            height:50px;
            width: 170px;
        }
     
         .image_thumb ul li div.email
        {
            background: url(../images/email.png) no-repeat 0px 5px;
        }
     
         .image_thumb ul li div.social
        {
            background: url(../images/social_ico.png) no-repeat 0px 5px;
        }
         .image_thumb ul li div.cart
        {
            background: url(../images/cart.png) no-repeat 0px 5px;
        }
         .image_thumb ul li div.world
        {
            background: url(../images/world.png) no-repeat 0px 5px;
        }
         .image_thumb ul li div.tool
        {
            background: url(../images/tool.png) no-repeat 0px 5px;
        }
         .image_thumb ul li div.net
        {
            background: url(../images/net.png) no-repeat 0px 5px;
        }
        .image_thumb ul li p
        {
            display: none;
        }

HTML Code

<div id="main">
///////////////////  Image Thumb Start here   //////////////////
                            <div class="image_thumb">
                                <ul>
                                    <li>
                                        <!--<a href="banner1.jpg">
                                        <img src="banner1_thumb.jpg" alt="Slowing Dow" /></a>-->
                                        <div class="block email">
                                            <h2>
                                                Email Unifier</h2>
                                            <p>
                                                Our unique email unifier platform allows you to import all your multiple emails
                                                and contacts in one very easy to use inbox and contact list with a single login.
                                                You can now receive and send emails using different email accounts on gmail, hotmail,
                                                yahoo, AOL and even your business POP3 account. You will now be able to customize
                                                a unified contacts list with a complete contact information. You can easily add
                                                your digital signatures, background, emoticons, cool graphics and animation to your
                                                emails.
                                            </p>
                                        </div>
                                    </li>
                                    <li>
                                        <!--<a href="banner2.jpg">
                                        <img src="banner2_thumb.jpg" alt="Organized Food Fight" /></a>-->
                                        <div class="block social">
                                            <h2>
                                                Integrated Social networks</h2>
                                            <p>
                                                Networking is now multi-dimensional. You are just a tab away from accessing your
                                                facebook, twitter, linkedin and your IMs without having to login separately. Our
                                                own special networking platform is great way to keep in touch with your friends,
                                                family, business teams, business networks and Not only that, you can also update
                                                your status, share photos and links across all your networks with a single update.
                                                Chat with your friends on different messengers from a single easy to use chat tool.</p>
                                        </div>
                                    </li>
                                    <li>
                                        <!--<a href="banner3.jpg">
                                        <img src="banner3_thumb.jpg" alt="Endangered Species" /></a>-->
                                        <div class="block tool">
                                            <h2>
                                                Business teams and collaborative task tool</h2>
                                            <p>
                                                Create your multiple business/project teams and networks and assign and receive
                                                tasks and queries. Our specially designed task management tool will assist you to
                                                follow up on pending tasks/queries with your team. Now, everything important for
                                                your business, project or profession can be managed from a single screen.</p>
                                        </div>
                                    </li>
                                    <li>
                                        <!--<a href="banner4.jpg">
                                        <img src="banner4_thumb.jpg" alt="Evolution" /></a>-->
                                        <div class="block world">
                                            <h2>
                                                My world</h2>
                                            <p>
                                                Create your own web world with great features designed to simplify your life. You
                                                can manage your due bills, your maintenance logs, your documents and photo albums,
                                                your notes, your contacts, your important tasks and daily planner from a single
                                                interface. Now, your world is closer together than ever before.</p>
                                        </div>
                                    </li>
                                    <li>
                                        <!--<a href="banner5.jpg">
                                        <img src="banner5_thumb.jpg" alt="Puzzled Putter" /></a>-->
                                        <div class="block cart">
                                            <h2>
                                                Shopping, Classifieds and jobs</h2>
                                            <p>
                                                Now, everything you may need is here with our unique and simple one screen interface.
                                                How about shopping when you get a short break from emails and networking, while
                                                still keeping in touch! You can look for a suitable job or a candidate and a product
                                                or service you want or want to offer in our free classifieds and jobs section. We
                                                will just gently update you when you have suitable match for your requirements without
                                                cluttering up your inbox.</p>
                                        </div>
                                    </li>
                                    <li>
                                        <!--<a href="banner6.jpg">
                                        <img src="banner6_thumb.jpg" alt="Secret Habit" /></a>-->
                                        <div class="block net">
                                            <h2>
                                                Business Networking</h2>
                                            <p>
                                                An individual is the most basic unit of any business, as a business professional,
                                                as a consumer, or even as a business owner. Reach out to the world through our innovative
                                                business networking platform.<br />
                                                <br />
                                                Register your business in our business directory and create your business catalog
                                                and classifieds</p>
                                        </div>
                                    </li>
                                </ul>
                            </div>

///////////////////  Image Thumb Ends here   //////////////////


                            <div class="main_image">
                                <!--  <img src="images/banner.png" alt="" />-->
                                <div class="desc">
                                    <a href="#" class="collapse">Close Me!</a>
                                    <div class="block">
                                        <h2>
                                            Email Unifier</h2>
                                        <p>
                                            Our unique email unifier platform allows you to import all your multiple emails
                                            and contacts in one very easy to use inbox and contact list with a single login.
                                            You can now receive and send emails using different email accounts on gmail, hotmail,
                                            yahoo, AOL and even your business POP3 account. You will now be able to customize
                                            a unified contacts list with a complete contact information. You can easily add
                                            your digital signatures, background, emoticons, cool graphics and animation to your
                                            emails.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

Script Section

    <script type="text/javascript">
        var i = 0;
        var j = 0;
        $(document).ready(function() {

            //Show Banner
            $(".main_image .desc").show(); //Show Banner
            $(".main_image .block").animate({ opacity: 0.85 }, 1); //Set Opacity

            //Click and Hover events for thumbnail list
            //$(".image_thumb ul li:first").addClass('active');

            $(".image_thumb ul").find("li").eq(i).addClass("active");

            $(".image_thumb ul li").click(function() {
                //Set Variables
                var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
                var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
                var imgDesc = $(this).find('.block').html(); //Get HTML of block
                var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block

                if ($(this).is(".active")) {  //If it's already active, then...
                    return false; // Don't click through
                } else {
                    //Animate the Teaser
                    $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() {
                        $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginTop: "0" }, 250);
                        $(".main_image img").attr({ src: imgTitle, alt: imgAlt });
                    });
                }

                $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
                $(this).addClass('active');  //add class of 'active' on this list only
                return false;

            }).hover(function() {
                $(this).addClass('hover');
            }, function() {
                $(this).removeClass('hover');
            });


            //Toggle Teaser
            $("a.collapse").click(function() {
                $(".main_image .block").slideToggle();
                $("a.collapse").toggleClass("show");
            });

        });  //Close Function
   
    </script>

Also as given jquery slideshow is working after you clicking on it.
But by using my script you can run it by a set time interval itself.

for this u just need to add script at ur page.

//////////////  For auto RUN on 5 second            ////////////////////
    <script type="text/javascript">

        function now() {
            j = i;
            i = i + 1;
            if (i > 5) {
                i = 0;
            }
            // alert(i);
            var nxt_li;
            $(".image_thumb ul").find("li").eq(j).removeClass('active');
            nxt_li = $(".image_thumb ul").find("li").eq(i).addClass("active");
            //alert(nxt_li);

            //  $(nxt_li).addClass('active');
            var imgAlt = $(nxt_li).find('img').attr("alt"); //Get Alt Tag of Image
            var imgTitle = $(nxt_li).find('a').attr("href"); //Get Main Image URL
            var imgDesc = $(nxt_li).find('.block').html(); //Get HTML of block
            var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
-

            //Animate the Teaser
                $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() {
                    $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginTop: "0" }, 250);
                    $(".main_image img").attr({ src: imgTitle, alt: imgAlt });
                   
                });
            $nxt_li.addClass("active");

            $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists

             
            return false;

        }

        setInterval(now, 5000); ////////////   can change interval
    </script>