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;
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;
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;
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