How can fake URL on hover and right-click (copy link localtion) but not on the click?

Question

My website is running Wordpress and I use fancybox to nicely load images and image galleries. The cleaned version of my Wordpress loop output ends up looking like this:

<article>
 <a href="image1.jpg" id="1460" rel="fancybox-1460"><img src="image1-thumbnail.jpg" /></a>
 <div class="nodisplay">
 <a href="image2.jpg" rel="fancybox-1460">&nbsp;</a>
 <a href="image3.jpg" rel="fancybox-1460">&nbsp;</a>
 <a href="image4.jpg" rel="fancybox-1460">&nbsp;</a>
 </div>
</article>

When the user click on the image1 link, the images gallery is launched via fancybox and this is great. I can also provide a direct url to this gallery:

http://www.visualise.ca/#1460

My problem is that when people will visit my website, they will sometimes right click on the thumnails in order to copy the link of the gallery and they will end up giving the following to others:

http://www.visualise.ca/image1.jpg

instead of:

http://www.visualise.ca/#1460

So I would like to fake the url in order to make sure people give the right one to others (url with hash). I have to make sure the url to image1.jpg is changed to [http://www.visualise.ca/#1460][7] on hover and right-click but not on the click itself.

I also think the javascript or jQuery code has to be done inside the loop so I can use the following:

<?php bloginfo('url'); ?>/#<?php the_ID(); ?>

to obtain this from Wordpress:

http://www.visualise.ca/#1460

Many thanks for your time and help.

Answer 1

You can tweak your fancybox script to use image as a background instead and link it your desired link.

something like this..

<a href="http://www.visualise.ca/#1460" id="1460" style="background: url('image1-thumbnail.jpg');"></a>

This way the "Copy Image Location" would not be displayed, and the "Copy Link Location" will copy the URL that you want.

Alternatively

1. You can use javascript to track right clicks that are made, hide the context menu and copy the location into the clipboard and intimate the user about it. (less user friendly)

2. The last option is provide a button like "Copy Image URL" which on clicked will copy the URL to clipboard.