Building the imgPreview Plugin
videos

Building the imgPreview jQuery Plugin

on Feb 13th 2009 with 52 comments

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.




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


James Padolsey is JimmyP on Codecanyon
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

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!  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments

  • Pingback: 15 Most Interesting jQuery Tutorials « PSD to HTML , Slicing PSD to HTML

  • Pingback: 15 Most Interesting jQuery Tutorials « Nulls

  • http://www.DescargarMusicaDeListenGO.com Denis

    MUY MUY BUENO LOCO!

    Really grate man!

    congratz, and thank you very much dude

    cya

  • Pingback: 55 Decisive Useful jQuery Tutorials « FED视野

  • Parth

    Hi,
    I am trying the achive the same in Content Editor Webpart in sharepoint,
    But it is not working can you suggest me something..!!?

    Thanks
    Parth

  • http://www.foredigel.org foredi gel

    i want to learn how to make it, jquery plugin. Nice tutorial here.

  • Pingback: 55 jQuery实用教程 | ued二区

  • http://waterbees.com Alex

    For those of you who want to fix the position of the tooltip you can directly edit this plugin js file:

    Look for the following lines:

    “h.mousemove(function(a)”

    You can modify both the top and left designations to specify any kind of .css floating position. I’ll post what I did below:

    h.mousemove(function(a)
    {
    d.css({top:’40px’,
    left:a.pageX+b.distanceFromCursor.left+’px’})
    })

    Cheers

  • http://www.foreditangerang.com foredi tangerang

    A lot of interesting things found on your blogs, like the topic! The author thanks and success in the blog!

  • http://www.tinfigstudios.com Jameel Moses

    Is it possible to have the link be an empty anchor? In other words, do nothing when clicked on. If it weren’t for that, this would be a perfect solution for me.

    Thanks!

  • http://www.infoneg.com Samir

    Estan recontrabuenos estos tutos muy bien hechos ya pude hacer algunos efectos de vista previa en imagenes pequeñas a grandes, me salvo de una….

    Gracias

← Older Comments