0

I my working on the site that will have image gallery. Designer idea was to make buttons that switch photos be above the photos a bit.

Like this

Example http://img57.imageshack.us/img57/1253/showq.png

Currently I've made a javascript solution to this - it gets position of photo and applies absolute positioning to the button divs. There are some drawbacks - it works unstable in Opera and IE. Also I had to make some dirty haxx to make it stay in position after zooming. I wonder if there is a better way to do this, preferably without javascript.

freiksenet
  • 3,569
  • 3
  • 28
  • 28
  • Could you please answer http://stackoverflow.com/questions/9943560/html-alignment-issue-in-one-machine-only-both-ie8 ? – LCJ Mar 30 '12 at 13:06

3 Answers3

1

If I understand you correctly, you're trying to center those arrow buttons vertically in relation to the image. This is pretty easily accomplished with just CSS (no javascript required). Here's an example.

The basic idea is that you're using a couple of divs plus some absolute/relative positioning. There's an outer div that drops the top of the whole thing to the center of the parent element and then an inner div that pulls up your content so that the content is centered and not the top of the element.

dustyburwell
  • 5,755
  • 2
  • 27
  • 34
  • That's not exactly what I meant) Sorry if I confused you. My question is - how can I position those two buttons so they stay above the photo, like in my example, without using JS. Absolute position does not work because it moves when I zoom in/out in browser. – freiksenet May 12 '09 at 19:12
1

A popular technique is to split the whole image into two huge (mostly transparent) links. The left half of the photo would take you to the previous image, the right to the next.

Of course you position you images of buttons appropriately and they would move around but I assume the problem you're finding is you have to keep moving your mouse to go through lots of images as the buttons move.... Well with this idea, you only need keep your mouse near the middle, and it should remain over the photo (and therefore a direction).

Example: http://gizmodo.com/photogallery/dreamhomespshop/1008251500

Mouse-over the image and you'll see it's active the complete way across. Not quite the same as your implementation, I'm sure, but the concept applies.

Oli
  • 235,628
  • 64
  • 220
  • 299
  • I've done this too :). Button flashes yellow when you are on the correct side of the image. My problem is how to position buttons correctly) – freiksenet May 12 '09 at 20:22
1

you mean like here ? (dutch website, see photo browser in the center column at the top)

browser zooming works fine in browsers like firefox and safari because they zoom all the content and recorrect pixel-values. To make zooming work in ie(6) you'd need to style all in em's. But browser zooming is crappy for pixel data anyways…

Absolute positioning of the buttons (left 0 and right 0) is not a problem as long as the container element is positioned relative.

Thomas Maas
  • 1,999
  • 12
  • 8