Static thumbnail popup on mouseover
Posted on 2012-08-23
I have a page of thumbnail images generally 8 x 5 (sometimes more) and I wish to see a larger version of the image when I put the cursor over the thumbnail (mouseover).
Quite a simple task in itself which I have achieved, however there are a couple of conditions that I still wish to be applied to the the popped up image and these are as follows:-
1. Popped up image to be static - currently as the mouse is moves the popped up image moves with it.
2. Page awareness - if the thumbnail is on the far right currently the thumbnail pops up to the right of the mouse cursor and is lost off the page, ideally wish this top popup to the other of the mouse when too close to a page edge.
3. Not a light box - I know I could preview the image using a light-box but in this instance it isn't what I'm trying to achieve. I wish to move my mouse over the many thumbnails and if I hold the mouse over the thumbnail a larger preview of the image pops up in the vicinity of the thumbnail and when i move my mouse off the thumbnail it disappears.
I appreciate any help or suggestions of a jquery code/plugin, css, or php solution to this little problem.