Mimic the Envato Marketplaces Image Previews: New Premium Tutorial
plusvideos

Mimic the Envato Marketplaces Image Previews: New Premium Tutorial

on Jan 15th 2011 with 14 comments
Download Source Files

I’m often asked about how to display large image previews when you hover over thumbnails. As an example, hover over a thumbnail on CodeCanyon to see this effect. All it requires is a bit of JavaScript. I’ll show you how from scratch!

Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts from the entire Tuts+ network.


Example

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Phototuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

 
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 the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://ccpmultimedia.com Connor Crosby

    Of course, premium. So tempted to sign up.

    • Nathan Rodrigues

      Sign up… you’ll never regret it haha

  • http://www.cssfreshblend.com Kendall

    Ah, very nice!

  • Ross

    Hi Jeffrey,

    Thanks for putting up that tutorial. Really enjoyed it. I will be using this technique in my current project.

    Everybody. Go buy a Premium membership. It is so worth it! :)

    Ross

    • Binud

      Premium must be good…. but your comment is making you look like an Envato salesman :P ….

  • Kyle

    Very nice tutorial Jeff! Which chrome extension are you using when you are doing log.console?

    Thanks for the great tutorial, this one helped a few things click for me.

    • http://www.jacobbednarz.com Jacob Bednarz

      Firebug is available on Firefox and Chrome. Very handy tool for any web developer.

    • http://www.sitebase.be Sitebase

      console.log is by default supported in Chrome.

  • http://www.cornerofart.com Abdullah Alhourani

    Hello, just I need this website link please, I need more information for the marketplace web sites.

  • Rolf

    Thanks Jeff! Awesome tutorial!

  • Chris

    How’s the compatibility with older browsers for this effect?

  • Ben

    In general I enjoy the premium tuts, but this is really boring :( Not even a kind of loading-icon or so…

    I hope that there will be some nice premium tuts about (animated) canvas stuff, html5, and maybe some javascript engines like Processing.js or ImpactJS.
    Some more stuff about nodeJS (the new PHP ;D ) would be nice as well!

    But thanks anyway, Jeff :)

    • http://maxdegterev.name/ Max

      You can add loading icon so easily that it’s not worth to mention in the screencast. Just add a background image with your loading icon to image container and this will do the trick.

  • http://maxdegterev.name/ Max

    Hi Jeff! I have a question! Or otherwise I think there’s a mistake in logic at line 54 of your script. You check there if a larger image with a class of ‘largePreview’ or whatever was created which is a great idea. But you never check what exact image is it and for what exact thumbnail it was created. You have the same image duplicated a dozen of times so no wonder you can overlook this issue.

    Also I woud really appreciate to have a downloadable source of the script!

    Thanks for the great screencast and enjoy your trip to Australia :)