Launch Fancybox using onmouseover image swap click to external image

[Cameron Ross]

Hi, I’ve tried a few things to make this work and searched in the forums, however I cannot see anything even remotely similar to what I’m trying to do, I thought this would just happen on default, as the ‘link’ is an image (JPG in this case).

Here’s the code:

<a class="fancybox" href="/wp-content/uploads/launch_this_image_in_fancybox.jpg"><img onmouseover="this.src='/wp-content/uploads/Button_Hover.png'" onmouseout="this.src='/wp-content/uploads/Button.png'" alt="" src="/wp-content/uploads/Button.png" /></a>

I’ve tried playing with the settings, ensured the JPG is noted in the settings, tried classes etc and cannot find a combination that ‘works’ – any ideas?

So clicking the “Button” should launch the requested link in a fancy box window on screen. Or am I way off here with what this plugin can do?

Cheers!

[RavanH]

Hi Cameron, FancyBox will take care of all things that happen after clicking the link — i.e. opening the link target (== image in this case) in a lightbox modal window. But what your link looks like is entirely up to you.

Have you tried adding javascript: before the this.src='/wp-content/uploads/Button_Hover.png' part? And maybe use the full URL (including site address) instead of a relative path to the button image…

[Author]

Posts