Building the imgPreview Plugin

Building the imgPreview jQuery Plugin

Feb 13th in Screencasts by James Padolsey

Today, we'll be featuring the winner of our "Screencast Competition". Created by James Padolsey, this video tutorial will demonstrate how to build a relatively advanced jQuery plugin from scratch.

A big congratulations goes out to James. He'll be receiving $200 cash, a 1 year subscription to TUTS+, and $100 worth of credit at our Envato marketplaces.

PG

Author: James Padolsey

I'm a freelance web developer based in Hampton, UK. I write about and enjoy front-end web development. Most of what I write focuses on my favorite topic, JavaScript! To read my blog or find out more about me please visit my site!

Preview
  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    Barttos February 13th

    Great xD

    ( Reply )
  2. PG

    DKumar M. February 13th

    Nice one James…. I actually know a good alternative for same. Still good tutorial… thanks for sharing!!

    ( Reply )
  3. PG

    insic February 13th

    really awesome. Ive this this plugin working in James site. and now i fully understand how it works. good job no wonder this is the champion.

    ( Reply )
  4. PG

    Ben Carroll February 13th

    Wow I never realized how upside down jQuery is… I am glad I have stuck with mootools!

    ( Reply )
  5. PG

    David Singer February 13th

    jQuery rocks!

    ( Reply )
  6. PG

    Jeff Hui February 13th

    This is an awesome screencast. No one why it’s first :)

    MooTools emulates traditional OO system that most other languages implement. jQuery just follows javascript’s prototyping more closely.

    ( Reply )
  7. PG

    M.A.Yoosuf February 13th

    its pretty awesome, its like the Theaiforests one, also like my recent blog post.

    i mean the same concept

    just have a cross check http://tinyurl.com/amg6bj

    ( Reply )
  8. PG

    James February 13th

    Thanks for the comments! :)

    @Ben, I’m glad to have enlightened you; maybe you could enlighten us as to why you see jQuery as “upside down” … If anything MooTools is upside down, trying to make JavaScript into something it’s clearly not (a class based language). JavaScript’s strengths IMO are prototyping and the fact that it’s a functional programming language – jQuery plays to both of these strengths! In the end it’s down to programming technique and preferences. If you’re going to make a throw away comment like that on a jQuery hotbed (like Nettuts) then be prepared for a flaming! :D

    @M.A.Yoosuf, Nice work on that gallery! :)

    ( Reply )
  9. PG

    Wuiqed February 13th

    James, this is wonderful. Big props for what I think is one of the best screencasts I’ve ever seen. I learned more about jQuery during these 30 minutes than I’ve learned about anything in such a short time! Concise but pedagogic, simple but advanced. Please, let me reiterate: wonderful!

    A question: which editor are you using?

    ( Reply )
  10. PG

    Craig Farrall February 13th

    Awesome screencast James, an I must also add, a worthy winner. Congratulations :)

    ( Reply )
  11. PG

    Frika February 13th

    Nice tutorial, thank you
    I have recognized that in IE7 is no fading image in the example with fading text and images. And the text (the a list) in the same example is looking very ugly, don´t know why.

    ( Reply )
  12. PG

    Chukki.de February 13th

    Very nice Screencast…it’s like the “Tips” in Mootools…only a little bit better :)
    I use it in our company for the presantation of a product if someone hovers the Name in the menu.

    ( Reply )
  13. PG

    nolonx February 13th

    Thanks for the screencast James!

    I had already figured out much of this on my own, but still I learned a few things I didn’t know.

    And in any case I’m glad to see that the way I’m writing my plugins actually do make sense, so thank you for the confirmation! :)

    ( Reply )
  14. PG

    Ethan February 13th

    Amazing! Thank you so much! Now I see why this won!

    ( Reply )
  15. PG

    Shane February 13th

    Congratulations James – the screencast is great. I especially like the selector code.

    Go jQuery!

    ( Reply )
  16. PG

    Ibrahim February 13th

    Congratulations James, awesome screencast :)

    ( Reply )
  17. PG

    Cyril February 13th

    Amazing !!!

    ( Reply )
  18. PG

    chris simpson February 13th

    amazing, as always. i love how customisable it is. Thanks James!

    ( Reply )
  19. PG

    Tim Hall February 13th

    Wow… awesome tutorial James! I really enjoy learning these advanced jQuery skills. I don’t know how I would have figured out half of the stuff I know without these tutorials.

    My question is why do some lines end with a comma and others a semi-colon? For instance, the $container line (minus the line breaks) ends with a comma while the $img line ends with a semi-colon. They appear to be very similar so I was wondering what the distinction is.

    Thanks!

    ( Reply )
  20. PG

    Brenelz February 13th

    Great screencast James! Worthy winner forsure…

    Wish I was as much of a jQuery expert as you

    ( Reply )
  21. PG

    Anthony James Bruno February 13th

    Pretty nice implementation of something similar here: http://www.tolleson.com/archive.php

    ( Reply )
  22. PG

    Cossizle February 13th

    Judging from the comments this sounds great! I’ll have to take a look once I get a few things off my desk here at the office! Thanks!

    ( Reply )
  23. PG

    James February 13th

    Thanks for the comments, I’m glad you all found it useful!! :)

    @Tim, the comma can be used when declaring several variables, so instead of:

    var a = 1; var b = 2; var c = 3;

    You could do:

    var a = 1, b = 2, c = 3;

    @Wuiqed, Komodo Edit.

    ( Reply )
  24. PG

    Jack F February 13th

    Bow down! Awesome tutorial worthy winner! A couple of questions from me if you don’t mind:

    1. This line:

    $container = $(”);
    Cofnused me. So here are you creating a variable called container of which the contents are a new div which also has a inside?

    Although I never knew that using ” makes jQuery create the closing tag as well :D

    2. What editor are you using there?

    Thanks!

    ( Reply )
  25. PG

    Jash Sayani February 13th

    jQuery is the future !

    ( Reply )
  26. PG

    TJ February 13th

    Well done James, love your stuff!

    ( Reply )
  27. PG

    MD February 13th

    Great tutorial!! Thanks :)
    Hey… your firefox looks like chrome! how did u do that?

    ( Reply )
  28. PG

    Leonardo February 13th

    I Love JQuery !!!

    Great Plugin

    ( Reply )
  29. PG

    Rik Girbes February 14th

    dude amazing!! Ty

    Rik

    ( Reply )
  30. PG

    Derek February 14th

    Always good stuff from you. Keep them coming.

    ( Reply )
  31. PG

    Bernardo February 14th

    Great Tutorial

    ( Reply )
  32. PG

    Andres F February 14th

    James, thanks for a great screencast! I plan on watching it at least a few more times to make sure I fully grasp everything you mentioned. Very well done, and congrats again. I hope to see yet even more jQuery stuff in the near future.

    ( Reply )
  33. PG

    Hayden February 14th

    Great tutorial! However, I was wondering if there is a way to make the image go above the cursor if there isn’t enough screen space below it (similar to ThemeForest). Thanks!

    ( Reply )
  34. PG

    Bill February 14th

    God damn this is awesome, although it f***ed with my mind heh ^^

    ( Reply )
  35. PG

    MSB February 15th

    fabulous..
    10/10.. :)

    ( Reply )
  36. PG

    hotcouponz February 15th

    Great tutorial as always. Thank you

    ( Reply )
  37. PG

    Gaurav M February 15th

    Great
    jQuery always in rocking Mood

    ( Reply )
  38. PG

    Chris Gunther February 16th

    Awesome tutorial. Job well done. Looking forward to more like this.

    ( Reply )
  39. PG

    Pillai Design February 16th

    Wow, endless possibilities with this trick!

    ( Reply )
  40. PG

    Jason February 16th

    Fantastic tutorial, really like how you described each part of building a proper and expandable plugin. I’m glad your video is here, and hope it will help teach the importance of quality plugins that developers can then share across the community.

    Thanks!

    ( Reply )
  41. PG

    Frog February 17th

    Neat little tool

    ( Reply )
  42. PG

    Roy del Rosario February 17th

    Hey Jeff, or anybody who’s managing this fantastic site ;) … i think the Source code is not linked properly.. (it’s linked to the Demo page)

    ( Reply )
  43. PG

    bisnis internet May 4th

    Your create very useful plugin, thanks

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    May 4th