Slider Gallery

Hello, in this example you have a very nice Slider Gallery made with jQyery.

Create a new html page, and in the head section create the link with css an jQuery plugin:

    <title>Slider jQuery Gallery</title>

    <style type="text/css">
        * { margin: 0; outline: none; }
        body { background-color: #444444; }
        .c { clear: both; }
        #wrapper { margin: 0 auto; padding: 0 40px 60px 40px; width: 960px; }
       
    </style>

    <!-- Slider jQuery Gallery.js -->
    <script type="text/javascript" src="js/sliderman.1.2.1.js"></script>
    <link rel="stylesheet" type="text/css" href="css/sliderman.css" />
    <!-- /Slider jQuery Gallery.js -->
</div>

In the code above you have some css style if you want to make the container like my example, but i sugest to make your container and put them in the css style file.

In the body section copy the html code and the javascript:

    <div id="wrapper">

        <div id="examples_outer">
           
            <div id="slider_container_1">

                <div id="SliderName">

                    <img src="img/1.jpg" />
                    <div class="SliderNameDescription"><a href="#3"> Lorem Ipsum </a> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>


                    <img src="img/2.jpg" />
                    <div class="SliderNameDescription"><a href="#3">Layout </a> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </div>

                   
                    <img src="img/3.jpg" />
                    <div class="SliderNameDescription"><a href="#3">Convallis </a> lorem eu volutpat. Suspendisse fermentum arcu in lorem fringilla ultricies. Nam vel diam nisi.</div>
                   
                    <img src="img/4.jpg" />
                    <div class="SliderNameDescription"><strong>Nullam nec velit vel leo tristique commodo.</strong><br />Nulla facilisi. Fusce lacus massa, ullamcorper sed hendrerit quis, venenatis eget tortor.</div>
                </div>
                <div class="c"></div>
                <div id="SliderNameNavigation"></div>
                <div class="c"></div>

                <script type="text/javascript">

                    // we created new effect and called it 'demo01'. We use this name later.
                    Sliderman.effect({name: 'demo01', cols: 10, rows: 5, delay: 10, fade: true, order: 'straight_stairs'});

                    var demoSlider = Sliderman.slider({container: 'SliderName', width: 640, height: 300, effects: 'demo01',
                    display: {
                        pause: true, // slider pauses on mouseover
                        autoplay: 3000, // 3 seconds slideshow
                        always_show_loading: 200, // testing loading mode
                        description: {background: '#ffffff', opacity: 0.5, height: 50, position: 'bottom'}, // image description box settings
                        loading: {background: '#000000', opacity: 0.2, image: 'img/loading.gif'}, // loading box settings
                        buttons: {opacity: 1, prev: {className: 'SliderNamePrev', label: ''}, next: {className: 'SliderNameNext', label: ''}}, // Next/Prev buttons settings
                        navigation: {container: 'SliderNameNavigation', label: ' '} // navigation (pages) settings
                    }});

        </script>

                <div class="c"></div>
            </div>
            <div class="c"></div>
        </div>

        <div class="c"></div>
    </div>

Now create a new css file and set the name style css, the copy the styles:

#slider_container_1 { float: left; padding: 10px; width: 640px; background: #000000; -moz-border-radius: 10px 10px; -webkit-border-radius: 10px 10px; border-radius: 10px 10px; }

#SliderName{
    width: 640px;
    height: 300px;
    margin: auto;
}

.SliderNamePrev{
    background: url(../img/left.gif) no-repeat center center;
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    top: 138px;
    left: 10px;
    text-decoration: none;
}

.SliderNameNext{
    background: url(../img/right.gif) no-repeat center center;
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    top: 138px;
    right: 10px;
    text-decoration: none;
}

.SliderNameDescription{
    font-family: Verdana;
    font-size: 10px;
    text-align: left;
    padding: 5px;
}

#SliderNameNavigation { margin: 10px 0 0 0; padding-top: 15px; height: 15px; text-align: center; -moz-border-radius: 6px 6px; background: #fff; }

#SliderNameNavigation a:link, #SliderNameNavigation a:active, #SliderNameNavigation a:visited, #SliderNameNavigation a:hover{
    margin: 0 2px;
    background: url(../img/nav.gif) no-repeat center center;
    font-size: 0px;
    line-height: 0px;
    padding: 12px;
    text-decoration: none;
}

#SliderNameNavigation a.active:link, #SliderNameNavigation a.active:active, #SliderNameNavigation a.active:visited, #SliderNameNavigation a.active:hover{
    background: url(../img/nav_active.gif) no-repeat center center;
}

 The last step is to download the jQuery script!