jQuery for Absolute Beginners: Day 14

Today, I’ll show you how to implement a jQuery plugin into your applications. There are literally hundreds of third party plugins available. It would be silly to ignore them! As you’ll find, they’re quite easy to implement! I’ve chosen the s3Slider plugin.

Later, down the road, I’ll show you how to build a plugin! But not today.


Download the Source Code

Day 14: Implementing Your First Plugin

Download the Source Code



41

Comments
  • ilias says:

    Nice one.
    Thanks for the effort!

  • Fawaz says:

    This is a great tutorial, the only down side that it had was, if javascript was disabled then now image would show up, so I took a few minutes and fixed it…

    I made it so that if javascript all the images will be hidden except for one…

    for the CSS i just create a new class and give it all the attributes except for display: none; :http://i44.tinypic.com/23jineq.jpg
    for the HTML i just replace one sliderImage class with my class: http://i43.tinypic.com/28lbdww.jpg
    Javascript i just use removeClass() and addClass: http://i41.tinypic.com/2mfklrn.jpg

  • Snookerman says:

    Great tutorial! I saw that you used an XHTML doctype, I suggest that you take a look at this article, if you haven’t already, to see why XHTML should be avoided:

    http://www.webdevout.net/articles/beware-of-xhtml

    Please keep the tutorials coming, they are awesome!

  • Jeffrey says:

    Nice, Thanks for the heads up on this plugin. You’ve helped me to understand jquery so much better. I feel you have jumpstarted my programming ability. I can’t wait for your php tutorial series and also any asp.net series you create on your personal blog.

  • Thomas says:

    Nice tutorial as always Jeffrey !!!

    Hey here’s a tip: I use a Plug-in for Firefox called IE Tab that changes the loading of the page to the IE method… I think it’s better than using a separate program (IE Tester). So if you install, the button to toggle betwen Firefox and IE it’s located in right – bottom ( I said that because I spended some time trying to figure out ), Cya !!

    Happy new Year , you deserve !!!

  • Jeffrey Way says:

    Hi Thomas. Yep, I use that one too. But you can’t test on IE6 with that tab.

  • Hey Jeffery,

    Thanks for the tutorial, and the series.

    I know this isn’t exactly TF or Jquery related, but how’d you get your desktop to look like lepoard? It looks great…

    Thanks,
    Andrew

  • Shishant Todi says:

    Thanks for this great tutorial and its fun learning this way.

    I have a request can also include :
    http://max.jsrhost.com/ajaxify/
    because I find it easy to learn through screencast after watching the practical application.

    Demo Page:
    http://max.jsrhost.com/ajaxify/demo.php

    Thanks lot.

    Regards,
    Shishant Todi

  • jbcarey says:

    meh… this should have been the “first” tutorial…. looking forward to tomorrows tut.

  • Johan Marklund says:

    Really good tutorials, learnd very much from each off em :) and must say that jquery is a very handy tool to create nice scripts with :D

  • M.A.Yoosuf says:

    i found an issue, why closing towice?

  • Anthony says:

    Couldn’t you just clear with another li instead of a div? Something like this < li class=”clear s3sliderImage > </>

  • Hello, and thank you for using my plugin for this tutorial, i`m really honored.
    I would just like to point out a few things. You don’t have to use unordered lists, you can use whatever element you like(div, p, ol, dt ….), as long as you keep the class/id naming as they should be (the span tag is required). This way you can make your (x)html valid.
    In your example here, you don`t have to put that last item (class=”clear sliderImage”) to div tag, you could put the li tag, and it would work just fine.

    That is all from me for now, thanks again.

  • Abhi says:

    Hey Jeffery, have you tried the new Beta 8 of IE? Why dont you try the Develop menu in Safari? it has some User Agents Specifications. Works quite well.

  • Drew says:

    Jeff,

    These keep getting better and better. Makes me sad to think its coming to an end. Oh well, you can always take over the php tutorials…. :P

    Drew

  • David Cooke says:

    Another great tutorial in the jQuery for beginners series Jeff :)

    Was wondering, if at any point in the series you were considering doing some kind of jQuery, multiple file upload script.
    I would like to see a tutorial on this :)

    Thanks,
    Dave

  • Adam Griffiths says:

    Hey jeffery, thanks for the tutorial.

    For the next tutorial can you show us how to implement a popup type screen like on rjdj.me (click feedback)? I think it’d make a neat tutorial.

    Thanks,
    Adam.

  • That’s so easy! Nice tutorial Jeffrey S3Slider is so cool! :)

  • pab says:

    trying to set it up for a wordpress template using custom fields,

    curious, if anyone has any pointers.

  • Jane says:

    Learning loads from these tutorials – thanks so much, can’t wait for the php series!
    About the google link, what if they change it to 1.2.7, then won’t all the links be broken? If you had a big site with a lot of pages linking to the library, then you’d have to change them all if the google link changed, wouldn’t it be better to have your own copy and just keep saving every new version with the same name? At least then you’d only have to do it once?

  • pab says:

    I Figured it out.

    just a simple question of rewriting the code.

  • joe izang says:

    Dude,

    I don’t know what to say other than a prayer for you and hope that you will find true peace even better than the one you have provided us newbies. Absolutely awesome. one thing though have you ever thought of doing one for php, cakephp mvc that kinda thing?

    anyways much respect.. you rock

    God bless

  • Johnny says:

    I would love to see this with a little xml to load the images and comments. Thanks for the great tuts and keep up the good work.

    Johnny

  • Razvan says:

    Hello,
    I implement this plugin on a site, but it only shows just 3 images. After the 3 image, the slider starts from the first pics.

    Do you have any ideea what could i do to ad more imagesc?

  • cliff says:

    I was just looking through here for an answer to the same problem as Razvan.

    The fourth image is being knocked out. Or should I say, the ‘last’ image is not displaying. Any idea why this is happening?

  • w1sh says:

    Thanks for the tut, I’ve been looking for a plugin like this forever.
    Thanks for the JS disabled fix Fawaz. I was worried about that.
    Thanks for the info on the clear fix Boban. Glad to see it’s fully semantic.
    Can’t wait to try this out.

  • pablo says:

    how can i insert more tha one slider in the same page? thank you

  • Razvan and Cliff: Make sure that you have the correct class name for the clearing div. That is, make sure that it has the same name in both the HTML area and CSS area. Also make sure the div is within the unordered list.

  • Kevin Geary says:

    Not working on my site. The space where the slideshow is supposed to be is blank.

    Can someone please help me?

    kgeary83@gmail.com

  • Brad says:

    im afraid to watch the 15th video I dont like the fact that i wont have NEW material to hear from you!! intermediate jQuery & beginners/intermediate PHP / database management sounds WONDERRRRFUL!! thanks so much Jeffery !!

  • Kirryn says:

    I’m having the same problem as Kevin Geary, all that is displayed for me is a blank page.

    I tried to implement it on a full site first without testing on new document, and got the same problem. So I created a tester, copied the JS / HTML / CSS exactly as it instructs on the plug-in website and still I get a blank page.

    I’ve been trying to get this to work for hours.
    Anyone able to help?

    Regards.
    Kirryn.

  • Masud Ibn Afjal says:

    so so good..
    thanks ..

  • nikemodel says:

    oh~very fantastic!!

    good!!

  • charlie says:

    Thanks, that wasn’t so bad at all. In fact, that was easy. Thanks for all the help!

  • Hello, Can anyone help me, im very new to all this but dont know how to add the script into my html so it shows on my web page, please can anyone help?

  • indi says:

    need help in uploading plugin, please help T_T

  • Sadhan says:

    Hello, I have implemented that in my site and it is working fine. But there is showing only three image though there are four image in my folder. I also increase number of images how it would be possible?

    Please reply.

    Thanks,

    Sadhan.

  • Just wondering if you’d be into doing a follow up on how to implement one of these on wordpress. All looks a bit daunting and haven’t found a basic enough instruction anywhere.

    Thanks for the unreal tutorials!

  • Jason Argonaut says:

    Totally weird, when I link to Google’s jquery-1.3.2.min.js I get an error in Firebug and the plugin doesn’t work. When I use my local version of jquery-1.3.2.js, it’s fine.

    Also, I found that from the plugin maker’s site, s3Slider.js and s3SliderPacked.js give different results. The uncompressed version works ok but the minified version gives an error and breaks the plugin.

    Not too impressed with the plugin so far as I used the exact same code as in the tutorial and my styling is all wonky (the absolutely-positioned li’s are offset from the top and left of the div).

  • KKATHMAN says:

    Hey Jeffrey –

    Did you ever get back around to quering the a database asynchronously?

    I’m specifically looking to do an on page validation against a database while entering a form.

    For example a person enters a referral code # in an HTML form and upon exit from the field, the system validates the code and prints back the name of the organization or person that corresponds to that code then allows the user to complete the form and submit it for complete validatiion and writing to a database.

    Example: Your customer was referred by NetTuts. They fill in their name, address, city, state, zip, and ref code of 111222. As soon as the user puts in the 111222 the system queries a database, looks up 111222 and finds it, bringing back the name NetTuts out beside the ref code field. Then the user presses the submit button with passes all the parameters to be written to a database.

    That should make for an interesting video tutorial.

    thanks.