Natedesigns





Image resize with Hover Intent

For a project i was working on the images the client wanted to show were really quite small, I thought it woul dbe nice to load in larger ones, after page had loaded, and give the user the option of seeing more. It wasn’t implemented in the end, but I still think it has numerous applications, not necessarily in it’s current form. Feel free to hack.

$(document).ready(function() {

/*//////////////////////////////
It's most likely that you're laoding in small images, if so we need to grab the larger ones, 
so that when they are made larger there is not pixelation.
-------------------------------
Some other examples of timeout/hover function can be seen here: 
http://benalman.com/code/projects/jquery-dotimeout/examples/hoverintent/ ------------------------------- */ $('SELECTOR').each( function(){ el = $(this); //replace the src with link to new images - this might need to be played with depending on your filename... this.src = this.src.replace("landscape_75", "landscape_300"); el.css('width','75px'); } ); $("SELECTOR").hover( function () { el = $(this); //transfer jQuery this to variable - not sure why but doesn't work if you just use $(this) el.data('timeout', setTimeout( function () { //Set the function to start after 500 miliseconds el.stop().animate({ "width": "300px" }, 200); //stop any prior animations, animate width (height was set to auto in my case) }, 500)); }, function () { clearTimeout(el.data('timeout')); //on hover out, clear timeout, and animate back to original size. el.stop().animate({ "width": "75px" }, 200); }); });