0

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!

Amy
  • 55
  • 1
  • 4

3 Answers3

1

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="...">
Cloudkiller
  • 1,616
  • 3
  • 18
  • 26
0

I'm guessing you're using the anchor tag in order to get the hand icon on hover. You could get the same effect by using CSS.

style="cursor: hand;"

This should create the same effect and avoid the problem of the anchor tag.

Shawn
  • 196
  • 1
  • 2
  • 13
0

I strongly suggest you to don't use an anchor tag for that. JavaScript events can be added to any DOM element, just like in:

<li class="click-to-expand">
  <img src="..." />
</li>

And also, as some users already replied, you can use CSS pointer property to indicate a possible user interaction when hovering the clickable interface item.

.click-to-expand{
  cursor:pointer;
}

Remember to keep it accessible by providing a valid URL to access the content in case it's necessary (no javascript fallback).

marcio
  • 10,002
  • 11
  • 54
  • 83