// Copyright 2010 htmldrive.net Inc.
/**
 * @projectHomepage http://www.htmldrive.net/go/to/professional-images-title-button-slideshow
 * @projectDescription Professional Images & title & button slideshow with jquery plugin
 * @author htmldrive.net
 * More script and css style : htmldrive.net
 * @version 1.0
 * @license http://www.apache.org/licenses/LICENSE-2.0
 */
    

Professional Images & title & button slideshow with jquery plugin

Demo1

Demo2

Usage

Add js and css files

<link href="css/slideshow_buttontitle.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/slideshow_buttontitle.js"></script>
        

Add html code

        <div id="slideshow" class="slideshow_buttontitle">
            <ul>
                <li><a href="#" title="title1"><img src="images/slideshow_large_1.jpg" alt="slideshow_large"/></a></li>
                <li><a href="#" title="title2"><img src="images/slideshow_large_2.jpg" alt="slideshow_large"/></a></li>
                <li><a href="#" title="title3"><img src="images/slideshow_large_3.jpg" alt="slideshow_large"/></a></li>
                <li><a href="#" title="title4"><img src="images/slideshow_large_4.jpg" alt="slideshow_large"/></a></li>
            </ul>
            <div class="slideshow_simple1_title">
                title
            </div>
            <ul class="slideshow_simple1_nav">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div style="clear: both"></div>
        </div>
        

Add start script

        <script language="javascript" type="text/javascript">
            $(function() {
                $("#slideshow").slideshow_buttontitle({
                    time_interval: '3000',
                    window_background_color: "#FFF",
                    window_padding: '1',
                    window_width: '300',
                    window_height: '250',
                    border_size: '1',
                    border_color: 'black',
                    title_text_color: 'white',
                    title_background_color: '#42AEC2',
                    button_color: '#84C5D2',
                    button_current_color: '#2C7E8F',
                    button_size: '15'
                });
        </script>
        

More script and css style: www.htmldrive.net