Search code examples
javascriptgalleryimage-galleryphoto-gallery

Javascript Gallery onmouseUp with "#" link without jumping to top of page


I realize that this is probably an "old school" way of doing this, but I finally got my gallery to work with one exception. If the gallery is located lower on the page, the "#" link on the thumbnails causes the page to jump the top. Is there a better way to create this gallery?

http://pacmill.bigrigmedia.com/cms/portfolio-detail-test3.html

Thanks in advance!


Solution

  • Adding a return false will usually stop the page from jumping to the top when clicking on a # link.

    <a href="#" onclick="return false;"><img src="..." /></a>
    

    For your problem, I would go with Shawn's solution and just use CSS. So delete all of the links around the images and add this to your document:

    <style> img{cursor:pointer;} #Display{cursor:auto;} </style>
    

    The second entry (#Display) is to make sure your main image does not get the pointer cursor. It would be better to just drop a class on each of your images and then assign the cursor to images with that class. That would look like so:

    <style> img.myImage{cursor:pointer;} </style>    
    <img class="myImage" src="...">