Photo Gallery Issue

[DizzyDan]

Ok, so i have been trying to incorperate this photo gallery on my website. I looked up a bunch of lessons via google search, and they work! but i just cant seem to be able to manipulate it they way i want it.Basically i want a full view picture area with a list horizontally below the picture area of thumbnails. I want on mouse over for the picture area to show the full view of the thumbnail.example. I was able to go through a few examples of photo gallerys and reproduce how they did it but they didnt explain to much how to customize it or make it your own. one has the thumbs on the left. one had the thumbs on top. i cant seem to move the viewing area and the thumbs area to where i want it.If someone could be so kind to help or send me to a better link where the photo gallery can be explained better that would be great.Thanks

[ShadowMage]

Moving elements around is the simplest part of this...:)This should work without any CSS at all:

<div id='full_img_cont'>   <img id='full_img' src='def_img.jpg' alt='default' /></div><div id='thumb_cont'>   <img id='thumb1' src='thumb1.jpg' alt='thumb1' />   <img id='thumb2' src='thumb2.jpg' alt='thumb2' />   ...</div>

div's by default are block elements so they'll stack on top of each other and images are inline so they'll appear next to each other.

[DizzyDan]

Yes but for some reason after the tutorial i thought i understoon but what ever i dd nothing worked. I will post the code when i get home. i forgot to upload it.

[DizzyDan]

Ok sorry for the long delay, holiday season! Anyway here is a link to the photo gallery i have been working on *note i only have 5 pictures uploaded i left the other thumbnails empty because there will be more when it is completed.GalleryIt works but here are some details i want to try and straighten out:1) Centering the thumbnails at the bottom i tried #container {text-align: center} didnt seem to so anything.2) Is it possible to create a scroll bar or something so i can keep all of the thumbs on one line or is that a javascript thing?3) I made it so when you click the images it takes your to a separate link to view the picture, is it possible to: a. When you hover that images they stay in place untill you hover over a new image. b. Images dont change unless you click them4) For the full size pictures that dont fill the whole size of the container is there a way to center them in the CSS, i can use <center></center> but something tells me there is a better way.Thats about it. Thanks for any and all help on this.

[ShadowMage]

It works but here are some details i want to try and straighten out:1) Centering the thumbnails at the bottom i tried #container {text-align: center} didnt seem to so anything.2) Is it possible to create a scroll bar or something so i can keep all of the thumbs on one line or is that a javascript thing?3) I made it so when you click the images it takes your to a separate link to view the picture, is it possible to: a. When you hover that images they stay in place untill you hover over a new image. b. Images dont change unless you click them4) For the full size pictures that dont fill the whole size of the container is there a way to center them in the CSS, i can use <center></center> but something tells me there is a better way.

I've not visited your site but...1 - See num 22 - Give the container div overflow: auto; and white-space: nowrap; If you do this, you won't need to worry about centering the thumbnails, unless there's fewer than what will fill the div. But since images are inline elements, text-align: center; should do the trick. You might need to explicitly specify display: inline (or inline-block, whichever works) for the images.3 - Not sure what you mean. a and b seem to contradict each other......I mean, do you want them to change when you hover or when you click? a seems to imply they should change when you hover, but in b you say you don't want them to change until the user clicks on them...4 - Again, text-align: center; on the container should work. Otherwise you could try setting the display of the image to block and use margin: 0px auto;

[DizzyDan]

Thanks for the detailed response, hope i can get what you mentioned today!As for number 3 a. and b. what happened here is, i was un aware that creating a gallery like this would result in, when the mouse falls off the thumbnail (even if not on a new image) the image goes back to hidden. So for option A. i was looking for a way when on hover the images stays there untill a new thumb is hovered. or option B. nix the hover idea and have it so images only change when clicked.I fear that they only way to achive a. or b. would be to involve javascript which trying to stear clear of well, because if they have javascript turned off, two i am not to firmilliar with javascript.If javascrit is the only way to go i will deal with the CSS hover for now till i can get involved with javascript (hopefully soon)

[ShadowMage]

As for number 3 a. and b. what happened here is, i was un aware that creating a gallery like this would result in, when the mouse falls off the thumbnail (even if not on a new image) the image goes back to hidden. So for option A. i was looking for a way when on hover the images stays there untill a new thumb is hovered. or option B. nix the hover idea and have it so images only change when clicked.I fear that they only way to achive a. or b. would be to involve javascript which trying to stear clear of well, because if they have javascript turned off, two i am not to firmilliar with javascript.If javascrit is the only way to go i will deal with the CSS hover for now till i can get involved with javascript (hopefully soon)

Yeah, JavaScript is going to be the only way to do that. You'd need to use onmouseover (which would be hover, and if you don't use onmouseout the image won't change when you leave the thumb) or onclick and then modify the src attribute of the large image. But like you said, JavaScript can be disabled so you still need to include some sort of fallback system.

[DizzyDan]

Thanks a lot Mage, I will prob be back here with some minor hooks as i try and complete this.