jQuery.simpleJSlide-1.1 / Simple jQuery Slide Show Plugin With Unobtrusive JavaScript Support

Well, the time actually came for me for both my first Nuget package and jQuery plugin : jQuery.simpleJSlide-1.1

In this blog post I am not going to go through how I created the Nuget package. Instead, I am going to explain how this small and simple slide show plugin works.

If you are interested in Nuget, there are many great learning stuff on Nuget Docs and you can also watch some basic and extreme videos on Nuget;

 http://docs.nuget.org/docs/start-here/videos

jQuery.simpleJSlide is an awesome and super simple jQuery slide show plugin. This plugin also takes advantage of unobtrusive JavaScript method as well. As I explained above, you can reach this plugin easily via Nuget;

Also, there is a sample package which has a basic sample example inside it. If you would like to install this package and also would like to have an example, I recommend you to install jQuery.simpleJSlide.Sample;

jQuery.simpleJSlide.Sample package has a dependency on jQuery.simpleJSlide package and jQuery.simpleJSlide has a dependency on jQuery and jQuery.ui.unobtrusively package. jQuery UI Unobtrusively package is a simple package which contains only one .js file that enables you to wire-up jQuery UI unobtrusively. This code iterates the page elements, finds elements with the custom attribute data-ui-fn and then apply the desired JavaScript / jQuery attribute. (Quoted from MSJoe) For Example;

<asp:TextBox runat="server" ID="startDate" data-ui-fn="datepicker" />

When you reference the proper JavaScript files (jQeury, jQuery UI and jQuery.UI.Unobtrusively) to a page, you are enabling jQeury UI Datepicker by writing above code. Yes, you are not writing one line of JavaScript code here. Very simple and clean. But what if we want to override or set some options. We’ll get to that latter but I am not going to dive into this package more in this blog post though.

I pushed this package into Nuget live feed but this code actually written by Damian Edwards who is a web guy at Microsoft. After I pushed the package to Nuget live feed, I told him about the package and he is now the admin of the package.

As I motioned, this jQuery plugin and the others can be used by this way.

Let’s look at what this plugin can give us. For the sake of simplicity I’m going to create a new ASP.NET Web Site with Visual Studio 2010;

I’m going to fire up PMC (Package Manager Console) and install jQuery.simpleJSlide.Sample package;

As you can see, it gets bunch of things and set it up a sample for us. Your solution should look like as it is on left hand side. I made a little change on the folder structure so it doen't have look like as it is on left side. Let’s open up the index.htm file and see how the sample code looks like;

Don’t try to read the code. It is not the case here. Just looked at it and see if there is any JavaScript code inside the DOM. There is not. Then, let’s see what this page is doing;

As you can see it is fully functional, simple image slider with play and stop buttons. Let’s look at the code a little closer;

<div class="simpleJSlide" data-ui-fn="simpleJSlide" data-ui-simpleJSlide-actionactive="true" 
    data-ui-simpleJSlide-playbuttonid="play" data-ui-simpleJSlide-stopbuttonid="stop" data-ui-simpleJSlide-notificationactive="true">

    <h2>simpleJSlide Example Page</h2>

    <div id="mainImageContainer">
        <img alt="image" id="containerImage" src="" />
    </div>

    <div id="thumbContainer">
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/1.jpg" data-ui-simpleJSlide-imgSrc="img/1.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/2.jpg" data-ui-simpleJSlide-imgSrc="img/2.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/3.jpg" data-ui-simpleJSlide-imgSrc="img/3.jpg" /><br />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/4.jpg" data-ui-simpleJSlide-imgSrc="img/4.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/5.jpg" data-ui-simpleJSlide-imgSrc="img/5.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/6.jpg" data-ui-simpleJSlide-imgSrc="img/6.jpg" /><br />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/7.jpg" data-ui-simpleJSlide-imgSrc="img/7.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/8.jpg" data-ui-simpleJSlide-imgSrc="img/8.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/9.jpg" data-ui-simpleJSlide-imgSrc="img/9.jpg" /><br /><br />

        <span class="funcBtn" id="play">Play</span> <span class="funcBtn" id="stop">Stop</span> <span id="notificationContainer"></span>
    </div>

    <div class="clearFix"></div>

</div>

There is some conventions here;

1. You need to specify a div element and declare data-ui-fn attribute and give it simpleJSlide as value.
2. Inside this div element, there must be two div elements whose ids are mainImageContainer and thumbContainer.
3. mainImageContainer div element must contain an img element whose id is containerImage and this image will be the container for your bigger sized images.
4. Every img element inside thumbContainer div element will be recognized as a thumbnail image. There is no way to excape that for now but maybe this can be done in the future or you can do it by yourself.
5. Every single image inside thumbContainer div element must contain data-ui-simpleJSlide-imgSrc attribute. The value of this attribute should contain bigger sized image src attribute for the particular thumbnail image as you can see above.

Also, there are some options that you can override. You can specify them by simply declaring the option name after data- ui-simpleJSlide- attribute on the div element whose data-ui-fn value is simpleJSlide. Here are the options that you can override;

• actionactive (data- ui-simpleJSlide-actionactive) as Boolean : Specifies if the images can be iterated or not. It is set to false by default.
• notificationactive (data- ui-simpleJSlide-notificationactive) as Boolean : Specifies if you want to display a massage after clicking play and stop buttons. It is set to false by default.
• playbuttonid (data- ui-simpleJSlide-playbuttonid) as String : Id of the element which will start play function by clicking for iterating images. It is set to simpleJSlidePlayButton by default.
• stopbuttonid (data- ui-simpleJSlide-stopbuttonid) as String : Id of the element which will start stop function by clicking for stopping iterating images. It is set to simpleJSlideStopButton by default.
• notificationcontainerid (data- ui-simpleJSlide-notificationcontainerid) as String : Id of the element which will hold the notification massage for play and stop notification. It is set to notificationContainer by default.
• playingtext (data- ui-simpleJSlide-playingtext) as String : Value of the notification massage which will be displayed for play function start. It is set to Now Playing… by default.
• stopedtext (data- ui-simpleJSlide-stopedtext) as String : Value of the notification massage which will be displayed for stop function start. It is set to Stopped… by default.

As you see on the example, I’ve overridden some options inside the DOM.

Obtrusive and Total Lame Way

Well, if you would like to use this with JavaScript instead of this unobtrusive way, you totally can. The following code shows how the above example can be done that way;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <link href="Content/site.css" rel="stylesheet" type="text/css" />

    <script src="../Scripts/jquery-1.6.1.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.simplejslide-1.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#simpleJSliderDiv").simpleJSlide({
                actionactive: true,
                playbuttonid: "play",
                stopbuttonid: "stop",
                notificationactive: true
            });

        });

    </script>

</head>

<body>

<div class="simpleJSlide" id="simpleJSliderDiv">

    <h2>simpleJSlide Example Page</h2>

    <div id="mainImageContainer">
        <img alt="image" id="containerImage" src="" />
    </div>

    <div id="thumbContainer">
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/1.jpg" data-ui-simpleJSlide-imgSrc="img/1.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/2.jpg" data-ui-simpleJSlide-imgSrc="img/2.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/3.jpg" data-ui-simpleJSlide-imgSrc="img/3.jpg" /><br />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/4.jpg" data-ui-simpleJSlide-imgSrc="img/4.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/5.jpg" data-ui-simpleJSlide-imgSrc="img/5.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/6.jpg" data-ui-simpleJSlide-imgSrc="img/6.jpg" /><br />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/7.jpg" data-ui-simpleJSlide-imgSrc="img/7.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/8.jpg" data-ui-simpleJSlide-imgSrc="img/8.jpg" />
        <img alt="image" title="Click to See Bigger" class="thumbhotel" src="img/thumb/9.jpg" data-ui-simpleJSlide-imgSrc="img/9.jpg" /><br /><br />

        <span class="funcBtn" id="play">Play</span> <span class="funcBtn" id="stop">Stop</span> <span id="notificationContainer"></span>
    </div>

    <div class="clearFix"></div>

</div>

</body>
</html>

I am not using Nuget !

Don’t worry. I have pushed the plugin to GitHub as well. Here is the project link : https://github.com/tugberkugurlu/jQuery-simpleJSlide

Enjoy