Small need help for Jquery image gallery modification

Question

I am using this image gallery in my project. need the effect of hover. But there is an issue when user clicks on that image it opens the image in a new window. How can i prevent that.

Here is the code sample and here is the demo.

Answer 1

when you create the a link try to drop the rel and the class screenshot, and change the href.

href="http://www.cssglobe.com" class="screenshot"

from the site :

To create an image preview with a link to the full size image, you have to add the screenshot class to your html element, and a rel attribute, containing the full size image url as a value:

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine"> Css Globe</a>

Answer 2

The HTML for each hyperlink containing an image is as follows:

<li><a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>

Remove the href or change the href to # or javascript:void(0) like this and it should work:

<li><a href="#" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>

OR

<li><a href="javascript:void(0)" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a></li>

Another way would be to modify the plugin to add a click() event handler for the hyperlinks and put a return false in there to stop the link from working. Which is good because for users with JS turned off they could still click and go through to see the image full size.

Answer 3

Just kill the default event on the links:

//jQuery 1.4
$(document).delegate('a.preview', 'click', function () { return false; });

//jQuery 1.3
$('a.preview').click(function () { return false; });

Do not, under any circumstances, use javascript:void(0); That only serves to confuse users that are observant but not savvy. A "#", meanwhile, would pop you to the top of the page without a cancelled event.

If you're curious as to what's the difference between $(document).delegate(selector, click, fn) and $(selector).click(fn):

Delegate listens on the document and, if the event's target matches the selector, it invokes the handler. click() listens directly on the set of target elements. Delegate tends to be more performant from a front-loading standpoint, and has the advantages that no elements have to be on the page for it to work correctly, and every new element on the DOM comes into its purvey - so if you added new gallery items, you could view them without binding new handlers.