jQuery

jQuery Rotating Banner/Slider with Fade In/Fade Out Effects

I made a plugin for JQuery that allows for me to make a fade in/out jQuery banner slider from a JSON source file. It is on GitHub: https://github.com/Sammaye/jslider (Yes I named it jslider; I know, I’m a pikey).

This plugin is real simple all you need to make is a JSON data source like so:

[{"image":"slide_01.jpg"},{"image":"slide_02.jpg"},{"image":"slide_03.jpg"}]

This JSON file will be the source for all your slides. As you can see I have just specified 3 slides and 3 images, one image for each slide. After you have your source data you just need the page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jslider</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/js/j-slider.js" ></script>
    <script type="text/javascript">$(document).ready(function(){ $(".j-slider_outer").j_slider(); });</script>

    <style>
        .j-slider_outer {
        }

        .j-slider_inner {
            display: block;
            position: relative;
        }

        .j-slider_row {
            position: absolute;
        }

        .j_slider-slide_outer {
            position: absolute;
        }

        .j_slider-slide_active {
            display: block;
            z-index: 45 !important;
        }

        .j_slider-slide {
            display: block;
        }

        .j_slider-next, .j_slider-previous {
            overflow: hidden;
            font-size: 15px;
            font-weight: bold;
            color: #ffffff;
        }

        .j_slider-next {
            display: block;
            position: absolute;
            right: 0;
            z-index: 45;
        }

        .j_slider-previous {
            display: block;
            position: absolute;
            left: 0;
            z-index: 45;
        }

        .j_slider-controls_outer {
            display: block;
            position: absolute;
            right: 3px;
            bottom: 5px;
            z-index: 45;
        }

        .j_slider-controls_inner {
            float: left;
            height: 16px;
            width: 16px;
            font-size: 12px;
            color: #ffffff;
            margin: 0 3px;
            cursor: pointer;
            background: url("ibutton.png");
        }

        .j_slider-controls_active {
            background: url("button.png");
        }
    </style>
</head>
<body>
    <div class="j-slider_outer"><div class="j-slider_inner"></div></div>
</body>
</html>
Advertisements

2 thoughts on “jQuery Rotating Banner/Slider with Fade In/Fade Out Effects

  1. Sam,

    Nice, but you could improve it greatly by adding keyboard navigation, and change a little bit the code to have the choice between multiple effects…

    Another problem I see in your code is that you’re querying specific HTML elements such as div’s instead of using only class names, so we have to do the markup your way which is bad.

    Other than that, it’s cool!

    1. Thanks šŸ™‚

      I agree with your points. I gotta sort this plug-in out some time. I have it on my list :).

      I think I traversed more than picked classes when creating the elements for a reason…though it was a while ago so I’m just stuck here trying to remember :P.

      I think it was speed actually, the difference between creating via class selectors and JQuerys DOM array….but can’t totally remember.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s