Hover Gallery helppp!

[shazkol]

Hi all, I am trying to help the lady who is helping me with coding up my site. The site url is www.papersourceonline.com.au

I am trying to have a gallery of 11 or 12 images across that line up nicely with no white space either side and I want the small thumbnails to expand on hover. The problem we are having is that all the code we have seen so far seems to put the expanded view over to the right side or left side and it does not allow the images on the extreme edges to even have an expanded view. It is weird stuff.. thought it would be dead easy to do, but we are struggling. You can see what we have done in Gallery 2 which now has white spaces either side to accommodate the code I do not like.

Does anyone have any idea of where we can get code that just puts the expanded view over the top of the thumbnails but in the middle of the screen and not crop it if there are not enough rows of thumbnails.

thanks in advance
Sharon

[Paul O'B]

Hi Welcome to Sitepoint

If you want the hover image to show at the right you will need ot remove the overflow:hidden from the main parent. I assume the overflow:hidden was for float clearing so use another method such as this:

#jsn-content {
	overflow:visible;
	zoom:1.0;
}
#jsn-content:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

The space around the images is controlled by the margin on this element.

.hoverBox a { margin:0; }

Stu Nichols had a lot of good css image galleries if you want something that looks a bit nicer.

[shazkol]

Hi Welcome to Sitepoint

If you want the hover image to show at the right you will need ot remove the overflow:hidden from the main parent. I assume the overflow:hidden was for float clearing so use another method such as this:

#jsn-content {
	overflow:visible;
	zoom:1.0;
}
#jsn-content:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

The space around the images is controlled by the margin on this element.

.hoverBox a { margin:0; }

Stu Nichols had a lot of good css image galleries if you want something that looks a bit nicer.

[shazkol]

Hi Paul, thanks for replying.

I am wanting the hover image to sit in the middle of the screen and not to one side. All the code we have found puts it to one side which means we cannot have images right across.

If you can help, it would be appreciated.

cheers, Sharon

[Paul O'B]

Hi,

You can't change the behaviour of the hover effect with css alone unless you add classes to to the last few elements on each row and then you can move the image left instead of right. Obviously that would be awkward if the images are dynamic and you don't know how many there are etc.

If you are doing it by hand then you could manually add classes to those items and that will allow you to over-ride the normal position of the hover effect.

The only other option is to script it so that the position of the image is changed based on whether it will overlap the edge or not but that would be a question for the javascript forum.

[shazkol]

Paul hi
I will pass this onto the lady helping me. For something so very simple, I cannot believe how difficult it is to do. Do you think there are other sites out there with ready made scripts where I can see the code in action?

thanks
Sharon

[Paul O'B]

Hi,

It's not really that simple because you are asking for some logic to be added which css doesn't do. Css just presents and it can't decide that when a hovered image is close to an edge it should recalculate the position and move the image. That's the job of a script as it is a behaviour.

There are plenty of hover galleries around so just google css/js hover galleries. If you aren't up to scratch with js then there are some jquery ones around also (if you are already using the library).

However, wouldn't you be better of with a slight re-design like those Stu nichol's examples I showed you that are much neater and don't need a script.

[shazkol]

Paul hi
do you think this link will give me what I am trying to achieve?
http://www.dynamicdrive.com/dynamici...agebubbles.htm

I will have a look again at those Stu Nichols layouts and see how much we can customise as I did not love them the way they were.

thanks again
Sharon

[Paul O'B]

Hi,

I think that example might be a little hard to customise for your multiple images.

I think you would be better off with the usual scroller and keep it all together or perhaps display the hover image in the center of the thumbnails in a pre-defined space. At the moment its very awkward to hover from one image to the next and impossible to select the second row without moving the mouse off the page and back again. This makes it a bad experience for the user and really does need a bit of design rethink.

[shazkol]

Hi Paul
thank you so very much for your help. I have taken your advice and opted for a different style of gallery to make my customer's experience not a tragic one :-)

cheers,
Sharon