web design

Slidebox – jQuery banner rotator

Slidebox – jQuery banner rotator

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.

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

You are free to use, study, improve and modify this script wherever and however you like.
Creative Commons License All works are licensed under GNU General Public License, GNU Lesser General Public License or Creative Commons Attribution 3.0 Unported License.


178 Comments

Post a comment

Comments pages: 1 2

  1. Alfonso
    Posted on March 29, 2014 at 15:08 Permalink

    The Slidebox is compatible with IE8 and old browsers?

    Reply
  2. jeff
    Posted on January 1, 2014 at 06:17 Permalink

    Hello..

    This is a great slider. Exactly what I was looking for.

    Question. I need to be able to click on the rotating images to access a website for each one. Is there a way of adding an tag within the

    I’ve tried a few ways, but they don’t work.

    Thanks for the good work

    Reply
  3. Jamil
    Posted on June 28, 2013 at 18:44 Permalink

    Thank you, really like this slidebox.

    I am having the same problems as other though. After the last slide, it does not go back to the first slide, a blank slide shows and it stay there unless I manually click on the previous button a couple of times.

    I thought it was another js file on my site that was causing the problem, but when I click on the demo link above it does the same thing. The problem is with IE9 and Firefox, it works fine in Chrome.

    Really want to use this. I clear my cache and tried 3 other machines with diffferent OS.

    Thanks!

    Jamil

    Reply
  4. Julian
    Posted on February 8, 2013 at 15:06 Permalink

    Hi,

    Firstly like to say what a great job you have done on this :)

    I do have a slight issue and reading through the other comments I don’t seem to be the only one with this issue but I could not really find a solution.

    In IE the slider just shows a blank screen once it shows its last image, where on firefox it restarts the loop from image 1.
    I’ve tried this on 4 different computers all running IE and they all have the same problem.

    Works fine on all other browsers.

    Hope you can help or even advise.

    Thanks in advance.

    Reply
  5. Darren
    Posted on January 10, 2013 at 00:23 Permalink

    Sorry – my previous comment was stripped of the tags. Let’s try it again…

    I’m having an issue where the slider picks up ANY and ALL <li> tags and turns them into a slider element. Slidebox should only grab the <li> elements of the first child of the targeted element (i.e. “.slidebox”). How can I resolve this?

    Reply
  6. Darren
    Posted on January 10, 2013 at 00:21 Permalink

    I’m having an issue where the slider picks up ANY and ALL tags and turns them into a slider element. Slidebox should only grab the elements of the first child of the targeted element (i.e. “.slidebox”). How can I resolve this?

    Reply
  7. Odiseo
    Posted on January 8, 2013 at 04:20 Permalink

    Hey Guys! How Ya doing? Well, I’m trying to combine in a same html page via dreamweaver8 the jQuery custom content scroller and this Slidebox jQuery banner rotator both that kindly malihu has shared with us. I’ve tried in different ways but nothing. Someone has tried before? Please let me know. Thank You!

    Reply

Comments pages: 1 2


Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>

css.php