Slidebox – jQuery banner rotator

Last updated on Mar 14, 2012 Originally published on July 26, 2010 by malihu, under Plugins.

Slidebox is a classic, simple jquery/css banner rotator/slideshow featuring slide captions, next and previous slide buttons, slides micro-thumbnails, carousel-like rotation and auto-slideshow.

view demo Slidebox with basic/minimum styling, Multiple Slideboxes

download Get all files related to post

How to use it

Download slidebox archive which contains the plugin files, as well as examples and some demo graphics. Extract files and upload jquery.mSimpleSlidebox.js, jquery.mSimpleSlidebox.css and the images, icons etc. you’ll use (if any) to your web server.

Include jquery, jquery UI, jquery.mSimpleSlidebox.css and jquery.mSimpleSlidebox.js in your html document

<link rel="stylesheet" href="jquery.mSimpleSlidebox.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.mSimpleSlidebox.js"></script>

The code above can be inserted inside the head tag or at the very bottom of your document, before the closing body tag (which is normally recommended for better performance). In either case, it’s more efficient to include the css file before any javascript (usually inside the head tag). Notice that we’re using Google’s CDN to get jquery and jquery UI libraries (why?).

What these files do

jquery is the javascript library used by the slidebox plugin (I’m making the crazy assumption here that you do know what jquery is. In case you don’t, here it is).

jquery UI (jQuery User Interface) extends jquery library and provides animation easing (you can make your own custom jquery UI bundle if you wanna cut down the size, see http://jqueryui.com/download).

jquery.mSimpleSlidebox.js is our plugin file (this does all the tricks)

jquery.mSimpleSlidebox.css is the css file we use to style our slideboxes. You could of course put slidebox styling in your main stylesheet document to reduce http requests.

Insert slidebox markup in your html body

<div class="slidebox">
    <ul>
        <li>
            <div>slide 1 content</div>
        </li>
        <li>
            <div>slide 2 content</div>
        </li>
        <li>
            <div>slide 3 content</div>
        </li>
        <li>
            <div>slide 4 content</div>
        </li>
    </ul>
</div>

Each slidebox is marked-up as an unordered list (<ul>), wrapped in a div which can have any id or class name (in this case .slidebox). Each list item (<li>) represents a single slide and each slide contents are within a div (or any element of your choice). Simple and clean.

Call mSlidebox function on document ready or window load (after the inclusion of the plugin files), either in the head or body tag

<script>
    (function($){
        $(document).ready(function(){
            $(".slidebox").mSlidebox();
        });
    })(jQuery);
</script>

The .slidebox selector used here could be anything you want (any id, class name etc.) as long as it’s the same in your slidebox(es) markup. Note that we’re wrapping our jquery code with (function($){ ... })(jQuery);. This ensures no conflict between jquery and other libraries using $ shortcut. See Using jQuery with Other Libraries for more info.

Calling our function on document ready ($(document).ready()) is the standard, most common way used. It roughly means that our code will execute after the DOM is ready. When manipulating images or document sections that contain images and other objects that load separately, it is best to use window load ($(window).load()) so the code executes after all page elements are fully loaded.

In the example below, slidebox plugin will be applied after all page elements (such as slide images, backgrounds etc.) are fully loaded:

<script>
    (function($){
        $(window).load(function(){
            $(".slidebox").mSlidebox();
        });
    })(jQuery);
</script>

That’s pretty much all the basics you need to do in order to use the plugin.

Final result example

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="jquery.mSimpleSlidebox.css">
    </head>
    <body>
        <div class="slidebox">
            <ul>
                <li>
                    <div>slide 1 content</div>
                </li>
                <li>
                    <div>slide 2 content</div>
                </li>
                <li>
                    <div>slide 3 content</div>
                </li>
                <li>
                    <div>slide 4 content</div>
                </li>
            </ul>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <script src="jquery.mSimpleSlidebox.js"></script>
        <script>
            (function($){
                $(document).ready(function(){
                    $(".slidebox").mSlidebox();
                });
            })(jQuery);
        </script>
    </body>
</html>

Configuration

mSlidebox function can get the following option parameters in order to customize its behavior and basic functionality:

autoPlayTime: Integer	The time of auto-playing next slide, value in milliseconds
animSpeed: Integer	Slide transition/animation speed, value in milliseconds
easeType: String	Slide transition/animation easing type, see jquery UI easing for all available easing types
buttonsPosition: String thumbsPosition: String	Position of slidebox next/previous buttons and slides thumbnails, values: `"inside"`, `"outside"`. Example: controlsPosition:{ buttonsPosition: "inside", thumbsPosition: "outside" }
pauseOnHover: Boolean	Pausing auto-slideshow when cursor is over slidebox area, values: `true`, `false`
numberedThumbnails: Boolean	Display numbers inside slides thumbnails, values: `true`, `false`

An example of defining these options parameters and their default values is as follows

$(".slidebox").mSlidebox({
    autoPlayTime:7000,
    animSpeed:1000,
    easeType:"easeInOutQuint",
    controlsPosition:{
        buttonsPosition:"inside",
        thumbsPosition:"inside"
    },
    pauseOnHover:true,
    numberedThumbnails:false
});

Style & Design your Slidebox

You can style your slidebox(es) using the jquery.mSimpleSlidebox.css file which contains a basic style for any slidebox with class name .slidebox. I suggest keeping this basic/minimum styling and doing your custom styling over an additional class name, id etc. For example, you could give an additional class (e.g. myClass) to your slidebox:

<div class="slidebox myClass">
    ...
</div>

Then, in your stylesheet you could define all your custom styling using .myClass. This way your slidebox has all the basic styling (via .slidebox) and all your custom design via your class name (.myClass).

You can also have a separate styling and design for each of your slideboxes on the same page, either by giving them different class names or ids or simply by targeting them in your css like this:

.slideboxContainer_1 ul li{
    /* 1st slidebox slides style... */
}
.slideboxContainer_2 ul li{
    /* 2nd slidebox slides style... */
}
.slideboxContainer_3 ul li{
    /* 3rd slidebox slides style... */
}

…and so on. Each slidebox in your document is automatically wrapped in a div with class its index number, in the form of slideboxContainer_+index number (e.g. slideboxContainer_1). This way you can easily use those classes to style each slidebox.

The same goes for styling differently each slide of any slidebox:

.slideboxContainer_1 ul .slideboxSlide_1{
    /* 1st slidebox 1st slide style... */
}
.slideboxContainer_1 ul .slideboxSlide_2{
    /* 1st slidebox 2nd slide style... */
}
.slideboxContainer_1 ul .slideboxSlide_3{
    /* 1st slidebox 3rd slide style... */
}

…and so on. Each slide also gets automatically an additional class with its index number. So for example, if you have 3 slideboxes on your document and you wanna style the 4th slide of the 2nd slidebox, you can easily do it by:

.slideboxContainer_2 ul .slideboxSlide_4{
    /* ... */
}

In general, you can style your slideboxes and everything in them in many ways and however you like (class names, nth selectors, using + or ~ etc.). You can really go berserk on styling and do some pretty complex stuff 😉 The download archive contains the styling I’ve done for the demo so you could use that and build on it.

For your convenience, I’m providing the final markup of a slidebox after it’s being processed by the script, so you can see the result and have a “blueprint” for styling:

<div class="slideboxContainer slideboxContainer_1">
    <div class="slidebox">
        <ul class="slideboxSlides">
            <li rel="1" class="slideboxSlide slideboxSlide_1">
                <div class="slideboxCaption"> ... </div>
            </li>
            <li rel="2" class="slideboxSlide slideboxSlide_2">
                <div class="slideboxCaption"> ... </div>
            </li>
            <li rel="3" class="slideboxSlide slideboxSlide_3">
                <div class="slideboxCaption"> ... </div>
            </li>
        </ul>
        <a href="#" class="slideboxPrevious"/>
        <a href="#" class="slideboxNext"/>
        <div class="slideboxThumbs">
            <a href="#" class="slideboxThumb selectedSlideboxThumb" rel="1"/>
            <a href="#" class="slideboxThumb" rel="2"/>
            <a href="#" class="slideboxThumb" rel="3"/>
        </div>
    </div>
</div>

Changelog

Mar 14, 2012
- The original slidebox script has been greatly enhanced and optimized, as well as converted to a proper jquery plugin for easy implementation and customization

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT

Donating helps greatly in developing and updating free software and running this blog 🙂

Slidebox – jQuery banner rotator

How to use it

What these files do

Final result example

Configuration

Style & Design your Slidebox

Changelog

License

Tags

182 Comments

Post a comment

Slidebox – jQuery banner rotator

How to use it

What these files do

Final result example

Configuration

Style & Design your Slidebox

Changelog

License

Tags

Posts related to this article

182 Comments

Post a comment