stuartw
11-27-2007, 06:29 PM
Hi all,
I am hoping that some of you might be able to help me with the final development of my image gallery.
It can be viewed at www.yorkshiredales.org.uk/gallery_test-5.htm
As you will see, I have 5 landscape images and 1 portrait, all with a thin green border. On hover, the alt-text is shown in a bar over the top of the thumbnail (done in CSS using the span technique). When a thumbnail is clicked, the large image is shown as a pop up using a javascript.
The final thing I need to do is increase the size of the thumbnail containing borders so that they are all the same regardless of the dimensions of the image. I would rather do this without resorting to tables too - largely to avoid the accessibility problems they can have.
As it is, I have 2 sets of css classes - one for landscape images and one for portrait images. The code is as follows:
<code>
/*********Landscape format Images**************/
#landscape_image li{
width:125px; /* width of thumbnail container box*/
border:solid #004531; /* colour of lines around thumbnail*/
border-width:1px 1px 1px 1px; /* lines around the thumbnails */
background:#fff; /* colour behind thumbnail image */
padding:10px; /* space around each thumbnail */
text-align:center; /* each thumbnail centred */
position:relative;
float:left;
display:inline;
margin:5px; /* space between thumbnail holders */
}
#landscape_image a:hover {
float: none;
}
#landscape_image a span{
/*\*/
position:absolute;
left:-9999px;
}
#landscape_image a:hover span{
top:10px;
left:10px;
right: 10px;
width: 125px;
text-align: center;
background:#FFF;
color:#004531; /* colour of title text in hover bar */
padding:5px 0px 5px 0px;
font-size:90%;
border:1px solid #004531;
border-width:0 0 3px 0; /* depth of line at bottom of hover bar */
filter: alpha(opacity=100);
/**/
}
/*****Portrait format Images******************/
#portrait_image li{
width:95px; /* width of thumbnail container box*/
border:solid #004531; /* colour of lines around thumbnail*/
border-width:1px 1px 1px 1px; /* lines around the thumbnails */
background:#fff; /* colour behind thumbnail image */
padding:10px; /* space around each thumbnail */
text-align:center; /* each thumbnail centred */
position:relative;
float:left;
display:inline;
margin:5px; /* space between thumbnail holders */
}
#portrait_image a:hover {
float: none;
}
#portrait_image a span{
/*\*/
position:absolute;
left:-9999px;
}
#portrait_image a:hover span{
top:10px;
left:10px;
right: 10px;
width: 95px;
text-align: center;
background:#FFF;
color:#004531; /* colour of title text in hover bar */
padding:5px 0px 5px 0px;
font-size:90%;
border:1px solid #004531;
border-width:0 0 3px 0; /* depth of line bottom of title hover bar */
filter: alpha(opacity=100);
/**/
}
</code>
The html is as follows:
<code>
<p>Churnstands</p>
<ul>
<div id="landscape_image">
<li><a href="ch002a.jpg" title="asdasdasdas<br>Automatically imported picture." rel="thumbnail" ><img src="thumbnail-ch002a-jpg-10986-1-1-2.gif" width="125" height="83" alt="asdasdasdas" border="0" /><span>asdasdasdas</span></a></li>
<li><a href="ch003a.jpg" title="asdasdasdsasda<br>Automatically imported picture." rel="thumbnail" ><img src="thumbnail-ch003a-jpg-10990-1-1-2.gif" width="125" height="94" alt="asdasdasdsasda" border="0" /><span>asdasdasdsasda</span></a></li>
<li><a href="ch005.jpg" title="This is the title of the image.<br>Automatically imported picture." rel="thumbnail" ><img src="thumbnail-ch005-jpg-10992-1-1-2.gif" width="125" height="94" alt="This is the title of the image." border="0" /><span>This is the title of the image.</span></a></li>
<li><a href="ch071.jpg" title="I believe that this was one of Frances' favourites<br>Automatically imported picture." rel="thumbnail" ><img src="thumbnail-ch071-jpg-11008-1-1-1.gif" width="125" height="94" alt="I believe that this was one of Frances' favourites" border="0" /><span>I believe that this was one of Frances' favourites</span></a></li>
<li><a href="ch012.jpg" title="Lots of words to type in here and then I will type some more to make the title even longer.<br>Automatically imported picture." rel="thumbnail" ><img src="thumbnail-ch012-jpg-11010-1-1-1.gif" width="125" height="94" alt="Lots of words to type in here and then I will type some more to make the title even longer." border="0" /><span>Lots of words to type in here and then I will type some more to make the title even longer.</span></a></li>
</div>
<div id="portrait_image">
<li><a href="ch069.jpg" title="Lots of words to type in here and then I will type some more.<br>Automatically imported picture." rel="thumbnail" ><img src="thumbnail-ch069-jpg-11019-1-1-0.gif" width="94" height="125" alt="Lots of words to type in here and then I will type some more." border="0" /><span>Lots of words to type in here and then I will type some more.</span></a></li>
<div>
</ul>
</div>
</code>
One thought I had was based on Stu Nicholls gallery at http://www.cssplay.co.uk/menu/slide_show.html - he puts each set of images in a table, but then removes the table styling using <code> border-collapse:collapse;
margin:0;
padding:0;
</code>
He also has vertical and horizontal classes for each image orientation, using a border and a top margin to position the images in the centre:
<code>
/* add a border to the horizontal slide and position it centrally using a top margin */
.menu2 ul li a:hover ul li a.horiz span img {
border:1px solid #888;
margin-top:21px;
}
/* add a border to the vertical slide and position it centrally using a top margin */
.menu2 ul li a:hover ul li a.vert span img {
border:1px solid #888;
margin-top:9px;
}
</code>
The only problem with this is that even amongst images of the same orientation there might be images of different sizes. Would there be any way of somehow setting the margins on each side of the thumbnail as the required 'box' width (145px) less the max dimension of a thumbnail, divided by 2?
Thanks for any help you can give - if you have any other ideas as to how I could do it I would be really grateful.
Best wishes,
Stuart
I am hoping that some of you might be able to help me with the final development of my image gallery.
It can be viewed at www.yorkshiredales.org.uk/gallery_test-5.htm
As you will see, I have 5 landscape images and 1 portrait, all with a thin green border. On hover, the alt-text is shown in a bar over the top of the thumbnail (done in CSS using the span technique). When a thumbnail is clicked, the large image is shown as a pop up using a javascript.
The final thing I need to do is increase the size of the thumbnail containing borders so that they are all the same regardless of the dimensions of the image. I would rather do this without resorting to tables too - largely to avoid the accessibility problems they can have.
As it is, I have 2 sets of css classes - one for landscape images and one for portrait images. The code is as follows:
<code>
/*********Landscape format Images**************/
#landscape_image li{
width:125px; /* width of thumbnail container box*/
border:solid #004531; /* colour of lines around thumbnail*/
border-width:1px 1px 1px 1px; /* lines around the thumbnails */
background:#fff; /* colour behind thumbnail image */
padding:10px; /* space around each thumbnail */
text-align:center; /* each thumbnail centred */
position:relative;
float:left;
display:inline;
margin:5px; /* space between thumbnail holders */
}
#landscape_image a:hover {
float: none;
}
#landscape_image a span{
/*\*/
position:absolute;
left:-9999px;
}
#landscape_image a:hover span{
top:10px;
left:10px;
right: 10px;
width: 125px;
text-align: center;
background:#FFF;
color:#004531; /* colour of title text in hover bar */
padding:5px 0px 5px 0px;
font-size:90%;
border:1px solid #004531;
border-width:0 0 3px 0; /* depth of line at bottom of hover bar */
filter: alpha(opacity=100);
/**/
}
/*****Portrait format Images******************/
#portrait_image li{
width:95px; /* width of thumbnail container box*/
border:solid #004531; /* colour of lines around thumbnail*/
border-width:1px 1px 1px 1px; /* lines around the thumbnails */
background:#fff; /* colour behind thumbnail image */
padding:10px; /* space around each thumbnail */
text-align:center; /* each thumbnail centred */
position:relative;
float:left;
display:inline;
margin:5px; /* space between thumbnail holders */
}
#portrait_image a:hover {
float: none;
}
#portrait_image a span{
/*\*/
position:absolute;
left:-9999px;
}
#portrait_image a:hover span{
top:10px;
left:10px;
right: 10px;
width: 95px;
text-align: center;
background:#FFF;
color:#004531; /* colour of title text in hover bar */
padding:5px 0px 5px 0px;
font-size:90%;
border:1px solid #004531;
border-width:0 0 3px 0; /* depth of line bottom of title hover bar */
filter: alpha(opacity=100);
/**/
}
</code>
The html is as follows:
<code>
<p>Churnstands</p>
<ul>
<div id="landscape_image">
<li><a href="ch002a.jpg" title="asdasdasdas<br>Automatically imported picture." rel="thumbnail" ><img src="thumbnail-ch002a-jpg-10986-1-1-2.gif" width="125" height="83" alt="asdasdasdas" border="0" /><span>asdasdasdas</span></a></li>
<li><a href="ch003a.jpg" title="asdasdasdsasda<br>Automatically imported picture." rel="thumbnail" ><img src="thumbnail-ch003a-jpg-10990-1-1-2.gif" width="125" height="94" alt="asdasdasdsasda" border="0" /><span>asdasdasdsasda</span></a></li>
<li><a href="ch005.jpg" title="This is the title of the image.<br>Automatically imported picture." rel="thumbnail" ><img src="thumbnail-ch005-jpg-10992-1-1-2.gif" width="125" height="94" alt="This is the title of the image." border="0" /><span>This is the title of the image.</span></a></li>
<li><a href="ch071.jpg" title="I believe that this was one of Frances' favourites<br>Automatically imported picture." rel="thumbnail" ><img src="thumbnail-ch071-jpg-11008-1-1-1.gif" width="125" height="94" alt="I believe that this was one of Frances' favourites" border="0" /><span>I believe that this was one of Frances' favourites</span></a></li>
<li><a href="ch012.jpg" title="Lots of words to type in here and then I will type some more to make the title even longer.<br>Automatically imported picture." rel="thumbnail" ><img src="thumbnail-ch012-jpg-11010-1-1-1.gif" width="125" height="94" alt="Lots of words to type in here and then I will type some more to make the title even longer." border="0" /><span>Lots of words to type in here and then I will type some more to make the title even longer.</span></a></li>
</div>
<div id="portrait_image">
<li><a href="ch069.jpg" title="Lots of words to type in here and then I will type some more.<br>Automatically imported picture." rel="thumbnail" ><img src="thumbnail-ch069-jpg-11019-1-1-0.gif" width="94" height="125" alt="Lots of words to type in here and then I will type some more." border="0" /><span>Lots of words to type in here and then I will type some more.</span></a></li>
<div>
</ul>
</div>
</code>
One thought I had was based on Stu Nicholls gallery at http://www.cssplay.co.uk/menu/slide_show.html - he puts each set of images in a table, but then removes the table styling using <code> border-collapse:collapse;
margin:0;
padding:0;
</code>
He also has vertical and horizontal classes for each image orientation, using a border and a top margin to position the images in the centre:
<code>
/* add a border to the horizontal slide and position it centrally using a top margin */
.menu2 ul li a:hover ul li a.horiz span img {
border:1px solid #888;
margin-top:21px;
}
/* add a border to the vertical slide and position it centrally using a top margin */
.menu2 ul li a:hover ul li a.vert span img {
border:1px solid #888;
margin-top:9px;
}
</code>
The only problem with this is that even amongst images of the same orientation there might be images of different sizes. Would there be any way of somehow setting the margins on each side of the thumbnail as the required 'box' width (145px) less the max dimension of a thumbnail, divided by 2?
Thanks for any help you can give - if you have any other ideas as to how I could do it I would be really grateful.
Best wishes,
Stuart