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:
http://www.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:
http://tigersjunkyard.com/xilon/gallery.jpg -- any idea why that's happening?
Gallery B:
http://www.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
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>
Gallery B - Page
Code:
<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>
Gallery B - CSS
Code:
/* 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;}
