Hey guys, now that my site is validating and the overall layout is finished, the last thing I'm having trouble with is the gallery. I've done two different test galleries (using modified templates) and could really use some help with making them work. Gallery A: tigersjunkyard.com/xilon/gallery-test.html 1) Is there a way to use this type of layout, but add in code that pops up caption information upon hover? For example, when someone hovers over a thumbnail, and that slightly larger version of the image pops up, I'd love to also have the image information appear either in the black space at the bottom of the box, or even more preferably, in a separate box just to the right or left of the thumbnail box. Is that possible? 2) You'll notice this test gallery isn't incorporated into the main layout of my site like the other one...that's because when I tried to add it into a page with the proper layout, it doesn't appear in the main content area like it should. It seems to be caught in the title area. This is what it looks like: tigersjunkyard.com/xilon/gallery.jpg -- any idea why that's happening? Gallery B: tigersjunkyard.com/xilon/gallery-test.shtml 1) In the hover caption, when I try to make the "Download full size" text a link, it does become a link but a double link appears up in the thumbnail section as well. Similar issue if I try to make the medium sized image itself a link. But I have to have an option to view the full sized image. 2) Having adapted someone else's template, I'm having trouble figuring out if there's a more practical way to set up the code. As of now, all of the thumbnails are individual background images listed in the stylesheet...example - a.slidea {background:url(image.jpg);} - this is obviously not useable if I want to have many images and multiple gallery pages. Is there a way to set up a gallery with this layout, but without having to make each thumbnail a separate item in the stylesheet? So...does anyone have any ideas on how to make either of these work? Preferably the first one, since it doesn't require thumbnails, but getting either one functional would be great. The codes are below: Gallery A - All Code <style type="text/css"> body { margin: 0; padding: 0; background: #000000; font-size: 13px; color: #ffffff } /* common styling */ a {color:#000;} a:hover {text-decoration:none;} a:visited {color:#000;} /* slides styling */ .photo {width:635px; text-align:left; position:relative; margin:0 auto;} .photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;} .photo ul.topic li {display:block; width:125px; height:31px; float:left;} .photo ul.topic li a ul, .photo ul.topic li ul {display:none;} .photo ul.topic li.active a {color:#ffffff; background:#000000; text-decoration: none;} /*BOX PADDING */ .photo ul.topic li.active ul {display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:425px; background:#000000; width:464px; padding:10px 10px; border:20px solid #660000; z-index:1;} .photo ul.topic li ul li {display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;} .photo ul.topic li ul li a {display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;} .photo ul.topic li ul li a img {display:block; width:100px; height:75px; border:5px solid #eee;} .photo ul.topic li a:hover ul li a:hover, .photo ul.topic li:hover ul li a:hover {white-space:normal; position:relative;} .photo ul.topic li a:hover ul li a:hover img, .photo ul.topic li:hover ul li a:hover img {position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;} p.link a:hover {background-color: #2B2E21;color:#fff;} p.link a:link span{display: none;} p.link a:visited span{display: none;} p.link a:hover span { position: absolute; margin:15px 0px 0px 20px; background-color: #ffffff; max-width:300; padding: 2px 10px 2px 10px; border: 5px solid #660000; font: normal 16px verdana; color: #000000; text-align:left; display: block;} </style> </head> <body> <div class="photo"> <ul class="topic"> <li class="active"><a class="set" href="#Landscapes"><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="lightbox3.html" alt="" title="" /><img src="landscapes/Kappa Crucis - Desert Shadows - Martin Roes.jpg" /></a></li> <li><a href="landscapes/Kappa Crucis - Misty Mountains - Martin Roes.jpg"><img src="landscapes/Kappa Crucis - Misty Mountains - Martin Roes.jpg" alt="" title="" /></a></li> <li><a href="landscapes/Risus - Blue Ice Desert - Martin Roes.jpg"><img src="landscapes/Risus - Blue Ice Desert - Martin Roes.jpg" alt="" title="" /></a></li> <li><a href="landscapes/Risus - Lakeside Sunset - Dobromir Dimitrov.jpg"><img src="landscapes/Risus - Lakeside Sunset - Dobromir Dimitrov.jpg" alt="" title="" /></a></li> <li><a href="landscapes/Risus - Misty Dawn - Dobromir Dimitrov.jpg"><img src="landscapes/Risus - Misty Dawn - Dobromir Dimitrov.jpg" alt="" title="" /></a></li> <li><a href="landscapes/Risus - Sunset Shadows - Jerome.jpg"><img src="landscapes/Risus - Sunset Shadows - Jerome.jpg" alt="" title="" /></a></li> <li><a href="landscapes/Xilon - Alkadine Mountains at Dawn - Brian Simes.jpg"><img src="landscapes/Xilon - Alkadine Mountains at Dawn - Brian Simes.jpg" alt="" title="" /></a></li> <li><a href="landscapes/Xilon - Alkadine Mountains at Twilight - Brian Simes.jpg"><img src="landscapes/Xilon - Alkadine Mountains at Twilight - Brian Simes.jpg" alt="" title="" /></a></li> <li><a href="landscapes/Xilon - Lukanen Mountains - Paul Gibson.jpg"><img src="landscapes/Xilon - Lukanen Mountains - Paul Gibson.jpg" alt="" title="" /></a></li> <li><a href="landscapes/Zenon - Distant Rain - Thomas Broadfoot.jpg"><img src="landscapes/Zenon - Distant Rain - Thomas Broadfoot.jpg" alt="" title="" /></a></li> <li><a href="landscapes/Zenon - Rogue Rock at Dusk - Thomas Broadfoot.jpg"><img src="landscapes/Zenon - Rogue Rock at Dusk - Thomas Broadfoot.jpg" alt="" title="" /></a></li> <li><a href="landscapes/Zenon - The Andaline Shallows - Thomas Broadfoot.jpg"><img src="landscapes/Zenon - The Andaline Shallows - Thomas Broadfoot.jpg" alt="" title="" /></a></li> </ul> <br class="clear" /> </div> </body> </html> Code (markup): Gallery B - Page <div id="container_left"> <div class="thumbs"> <a class="gallery slidea" href="#nogo"><em><img src="galleries/landscapes/Risus - The Road to Drakken - Jeff Hindmarsh.jpg" width="402px" alt="landscapes" /></em><span><b><i>Download full size</b></i><br/><br/><b>Artist:</b> Jeff Hindmarsh<br/><b>Title:</b> The Road to Drakken</b><br/><b>Description:</b> A view of the ice road to Drakken Village<br/><b>Dimensions:</b> 1600 x 1200 px<br/><B>File Size:</b> 452 kb<br/><b>Programs:</b> Terragen<br/><b>Notes:</b> This image is the property of the artist and may not be used without his/her permission</span></a> <a class="gallery slideb" href="#nogo"><em><img src="galleries/landscapes/KC - After the Rain - Stephen A. Zimmerman.jpg" width="402px" alt="landscapes" /></em><span><b>Artist:</b> Stephen A. Zimmerman<br/><b>Title:</b> After the Rain</span></a> <a class="gallery slidec" href="#nogo"><em><img src="galleries/scenes/Acadia Minor - The Watering Hole - Gigi.jpg" alt="scenes" /></em><span><b>Artist:</b> Gigi Holacik<br/><b>Title:</b> The Watering Hole</span></a> <a class="gallery slided" href="#nogo"><em><img src="galleries/scenes/Kappa Crucis - Calling the Children - Kreegan.jpg" alt="scenes" /></em><span><b>Artist:</b> Kevin Mall<br/><b>Title:</b> Calling the Children</span></a> <a class="gallery slidee" href="#nogo"><em><img src="galleries/space/Risus - Ice World - Paul Gibson.jpg" alt="space" /></em><span><b>Artist:</b> Paul A. Gibson<br/><b>Title:</b> Ice World I</span></a> <a class="gallery slidef" href="#nogo"><em><img src="images/space.jpg" alt="space" /></em><span>None<br />Header image</span></a> <a class="gallery slideg" href="#nogo"><em><img src="images/stars.gif" alt="space" /></em><span>None<br />Sidebar image</span></a> </div> Code (markup): Gallery B - CSS /* ALTERNATE IMAGE GALLERY STRUCTURE */ /* all galleries */ a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:47px; float:left; margin:4px; z-index:50;} a.slidea {background:url(galleries/landscapes/Risus - The Road to Drakken - Jeff Hindmarsh-tn.jpg);} a.slideb {background:url(galleries/landscapes/KC - After the Rain - Stephen A. Zimmerman-tn.jpg);} a.slidec {background:url(galleries/scenes/Acadia Minor - The Watering Hole - Gigi-tn.jpg);} a.slided {background:url(galleries/scenes/Kappa Crucis - Calling the Children - Kreegan-tn.jpg);} a.slidee {background:url(galleries/space/Risus - Ice World - Paul Gibson-tn.jpg);} a.slidef {background:url(images/space-tn.jpg);} a.slideg {background:url(images/stars.gif);} a.gallery em, a.gallery span {display:none;} a.gallery:hover {border:1px solid #fff;} /* styling for LEFT gallery */ #container_left {position:relative; width:600px; height:450px; background:#d1c8c3; border:1px solid #a49188; margin:1em auto;} #container_left img {border:1px; width: 402px; height: 250px;} #container_left .thumbs {width:170px; position:absolute; left:0; top:0;} #container_left a.gallery:hover span {display:block; position:absolute; width:402px; height:50px; top:265px; left:175px; padding:5px; color:#000; z-index:100;} #container_left a.gallery:hover span:first-line {font-style:normal; font-size:1.1em; color:#000;} #container_left a.gallery:active, #container_left a.gallery:focus {border:1px solid #000;} #container_left a.gallery:active em, #container_left a.gallery:focus em {display:block; position:absolute; width:402px; height:250px; top:5px; left:180px; padding:5px; color:#000; border:1px solid #3d330f; z-index:50;} #container_left h1 {clear:both; margin:0; padding-top:80px; padding-left:250px; width:300px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;} #container_left h1 em {font-size:0.6em; color:#000;} Code (markup):
I'm not sure which one is best to use. I'm kinda leaning towards gallery A because I like the little pop up when you hover over the thumbnail. Then again, I like the little preview on the side that gallery B has. One way to add captions to gallery A, is to create a div class that is hidden initially like so: .caption { display:none; width:100px; height:25px; color:#FFF; } Code (markup): Then add the following after that: .photo ul.topic li ul li a:hover .caption { display:block; } Code (markup): As you can see, the caption class div will have to go inside the <a> tags. You should also take out the first a:hover after "ul.topic li" so that only one a:hover is left. I don't think having that extra hover will do anything. I could be wrong. I already tried the CSS without that extra a:hover, and it worked. In fact, my method only worked if there was only that one a:hover. Also don't use li:hover, or anything:hover. Some browsers don't recognize this; and when I say some browsers, I mean internet explorer. Just stick with a:hover and you should be fine. You might also want to reposition caption. Just use a relative positioning. As for the appearing in the header thing, I can't really help you there unless you post the code for that. Hope this helps!
Hey there, thanks so much for all the suggestions. I'd love to give them a try but I'm really not a web designer and don't intuitively know how to structure everything, so please bear with me :*) All right, I entered the two codes at the bottom of the style section. Is that okay? Unfortunately, I don't know where to go from there. I'm supposed to add <div class="caption"> into each link, right? But where exactly does it go? And where do I close it? For example, one of the links: <li><a href="lightbox3.html" alt="" title="" /><img src="landscapes/Kappa Crucis - Desert Shadows - Martin Roes.jpg" /></a></li> For that image, where would the caption div parts go and where would I actually enter the caption information? There seem to be a few sections with that format, all one after another: .photo ul.topic li a:hover ul li a:hover, .photo ul.topic li:hover ul li a:hover {white-space:normal; position:relative;} .photo ul.topic li a:hover ul li a:hover img, .photo ul.topic li:hover ul li a:hover img {position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;} Code (markup): Which one should be removed? Again, I'm not the most css-savvy. Should anything else be removed from the style or main body? What sort of code would I enter (and where) to get the caption under the images at the bottom of the box? Oops, yeah that might be helpful. I'll post the code for that if it looks like the gallery structure is working. Sorry for all the questions and thanks so much for your time, I really appreciate the help!
Sorry, I should have explained a little better. I was going write a detailed explanation, but then I realized that I suck at explaining, so I just fixed your code. <style type="text/css"> body { margin: 0; padding: 0; background: #000000; font-size: 13px; color: #ffffff } /* common styling */ a {color:#000;} a:hover {text-decoration:none;} a:visited {color:#000;} /* slides styling */ .caption { display:none; width:100px; height:25px; background:#FFF; color:#000; position:relative; /* change this to position your caption relative to the pop up */ margin:0 auto; /* centers it */ top:128px; } .photo {width:635px; text-align:left; position:relative; margin:0 auto;} .photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;} .photo ul.topic li {display:block; width:125px; height:31px; float:left;} .photo ul.topic li a ul, .photo ul.topic li ul {display:none;} .photo ul.topic li.active a {color:#ffffff; background:#000000; text-decoration: none;} /*BOX PADDING */ .photo ul.topic li.active ul {display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:425px; background:#000000; width:464px; padding:10px 10px; border:20px solid #660000; z-index:1;} .photo ul.topic li ul li {display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;} .photo ul.topic li ul li a {display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;} .photo ul.topic li ul li a img {display:block; width:100px; height:75px; border:5px solid #eee;} .photo ul.topic li ul li a:hover {white-space:normal; position:relative;} .photo ul.topic li ul li a:hover img{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;} .photo ul.topic li ul li a:hover .caption { display:block; } p.link a:hover {background-color: #2B2E21;color:#fff;} p.link a:link span{display: none;} p.link a:visited span{display: none;} p.link a:hover span { position: absolute; margin:15px 0px 0px 20px; background-color: #ffffff; max-width:300; padding: 2px 10px 2px 10px; border: 5px solid #660000; font: normal 16px verdana; color: #000000; text-align:left; display: block;} </style> </head> <body> <div class="photo"> <ul class="topic"> <li class="active"><a class="set" href="#Landscapes"><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="lightbox3.html" alt="" title=""> <img src="landscapes/Kappa Crucis - Desert Shadows - Martin Roes.jpg" /> <div class="caption">caption 1</div> </a></li> <li><a href="landscapes/Kappa Crucis - Misty Mountains - Martin Roes.jpg"> <img src="landscapes/Kappa Crucis - Misty Mountains - Martin Roes.jpg" alt="" title="" /> <div class="caption">caption 2</div> </a></li> <li><a href="landscapes/Risus - Blue Ice Desert - Martin Roes.jpg"> <img src="landscapes/Risus - Blue Ice Desert - Martin Roes.jpg" alt="" title="" /> <div class="caption">caption 3</div> </a></li> <li><a href="landscapes/Risus - Lakeside Sunset - Dobromir Dimitrov.jpg"> <img src="landscapes/Risus - Lakeside Sunset - Dobromir Dimitrov.jpg" alt="" title="" /> <div class="caption">caption 4</div> </a></li> <li><a href="landscapes/Risus - Misty Dawn - Dobromir Dimitrov.jpg"> <img src="landscapes/Risus - Misty Dawn - Dobromir Dimitrov.jpg" alt="" title="" /> <div class="caption">caption 5</div> </a></li> <li><a href="landscapes/Risus - Sunset Shadows - Jerome.jpg"> <img src="landscapes/Risus - Sunset Shadows - Jerome.jpg" alt="" title="" /> <div class="caption">caption 6</div> </a></li> <li><a href="landscapes/Xilon - Alkadine Mountains at Dawn - Brian Simes.jpg"> <img src="landscapes/Xilon - Alkadine Mountains at Dawn - Brian Simes.jpg" alt="" title="" /> <div class="caption">caption 7</div> </a></li> <li><a href="landscapes/Xilon - Alkadine Mountains at Twilight - Brian Simes.jpg"> <img src="landscapes/Xilon - Alkadine Mountains at Twilight - Brian Simes.jpg" alt="" title="" /> <div class="caption">caption 8</div> </a></li> <li><a href="landscapes/Xilon - Lukanen Mountains - Paul Gibson.jpg"> <img src="landscapes/Xilon - Lukanen Mountains - Paul Gibson.jpg" alt="" title="" /> <div class="caption">caption 9</div> </a></li> <li><a href="landscapes/Zenon - Distant Rain - Thomas Broadfoot.jpg"> <img src="landscapes/Zenon - Distant Rain - Thomas Broadfoot.jpg" alt="" title="" /> <div class="caption">caption 10</div> </a></li> <li><a href="landscapes/Zenon - Rogue Rock at Dusk - Thomas Broadfoot.jpg"> <img src="landscapes/Zenon - Rogue Rock at Dusk - Thomas Broadfoot.jpg" alt="" title="" /> <div class="caption">caption 11</div> </a></li> <li><a href="landscapes/Zenon - The Andaline Shallows - Thomas Broadfoot.jpg"> <img src="landscapes/Zenon - The Andaline Shallows - Thomas Broadfoot.jpg" alt="" title="" /> <div class="caption">caption 12</div> </a></li> </ul> <br class="clear" /> </div> </body> </html> Code (markup): I commented caption where you can change the position values of the div. If you don't understand positioning too well, then you should find a good positioning tutorial. Sorry, I can't post links yet, otherwise I would find a good tutorial for you. Also, I just spaced out some of the HTML to help you see what I changed. Basically I just added the <div class="caption"> inside the <a> after the image. I think it doesn't matter whether or not it goes after the image, as long as it is within the <a> tags. Hope you can get it to work! Oh yeah. I forgot to tell you that you should include smaller images as thumbnails. I think you're just resizing the whole image. That's not really a good way because the page will load slower. You should use an image editor like Photoshop to create a small thumbnail image.
Hey rikun, thank you so much for your time and help! I've got a finished working gallery now, so this thread can be considered closed :*)