CSS Image Gallery problem: desperate for help!

**High2k** · 07-17-2008, 01:04 PM

I have incorporated the CSS Image Gallery successfully into a Joomla article and thought I had it working just fine. However, I have been told that the enlarged image disappears off the top of the page with some people when they try to access the thumbnails further down the page. You can see what I mean at http://www.ptlimo.co.uk/index.php/car-gallery
I can't seem to replicate this problem on any of my machines, but visitors have complained about this. Is there some way around this?
I'm guessing that I need to have the enlarged image displaying in the sentre of the browser window rather than in the current position but I have no idea how to do this. The solution has to be a CSS solution as I do not know how to incorporate javascript into a Joomla site

**Peter McCartney** · 07-19-2008, 06:58 AM

Hi! I also see this happening but I put this down to my small monitor. I've been watching this hoping someone of greater skills could help, as I"m not an expert.

In the link at the very bottom you can see what I have done with the help of this group and one other expert, whose link is included in my post.

It is based on this link:

http://www.dynamicdrive.com/style/cs...image-gallery/

but I have added an extra gallerycontainer in order to have the larger images appear above and below the thumbnails.

I hope this helps.

Take Care,
Peter

http://stvincentsdarlinghurstmalenur...-part-two.html

**TheJoshMan** · 07-20-2008, 02:04 AM

My own personal suggestion due to the size constraints of your layout would be to reduce the size of the thumbnails to maybe 1/4 of what they are now. Line them up in a single row at the top, then have the gallery container div specified to show beneath them in a fixed position.

**TheJoshMan** · 07-20-2008, 04:39 AM

Here is the HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
  <base href="http://www.ptlimo.co.uk/index.php/car-gallery" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="Limo Hire Highlands,limo hire scotland,platinum limo hire,wedding limo,hen night limo" />
  <meta name="title" content="Gallery: Cars I" />
  <meta name="author" content="Administrator" />
  <meta name="description" content="Platinum Limo Hire Highlands &amp; Moray. Wedding Limo, Hen Nights, Corporate Limo Hire" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Gallery: Cars I</title>
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/siteground-j15-27/css/template.css" type="text/css" />
</head>
<body id="page_bg">
	<div class="center">		
		<div id="wrapper">
			<div id="area">	
				<div id="header_top"></div>
				<div id="header"> 
				  <a href="/index.php"></a>			  </div>
				<div id="content">
					<div class="pill_m">
						<div id="pillmenu">
</div>
					</div>	
				<div id="content_top"></div>
					<div id="leftcolumn">	
								<div class="module_menu">
			<div>
				<div>
					<div>
											<ul class="menu"><li class="item1"><a href="http://www.ptlimo.co.uk/"><span>Home</span></a></li><li class="item61"><a href="/index.php/airport-transfers"><span>Airport Transfers</span></a></li><li class="item58"><a href="/index.php/anniversaries"><span>Anniversaries</span></a></li><li class="item56"><a href="/index.php/birthdays"><span>Birthdays</span></a></li><li class="item59"><a href="/index.php/kids"><span>Children's Parties</span></a></li><li class="item62"><a href="/index.php/corporate"><span>Corporate</span></a></li><li class="item55"><a href="/index.php/hen"><span>Hen Nights</span></a></li><li class="item57"><a href="/index.php/romantic"><span>Romantic</span></a></li><li class="item60"><a href="/index.php/shopping"><span>Shopping Trips</span></a></li><li class="item54"><a href="/index.php/stork"><span>Stork Limo</span></a></li><li class="parent item53"><a href="/index.php/weddings"><span>Weddings</span></a></li><li class="item63"><a href="/index.php/testimonial"><span>Testimonials</span></a></li><li id="current" class="active item73"><a href="/index.php/car-gallery"><span>Car Gallery</span></a></li><li class="parent item68"><a href="/index.php/customer-gallery"><span>Customer Gallery</span></a></li><li class="item64"><a href="/index.php/contact"><span>Contact Us</span></a></li></ul></div></div></div></div></div><div id="maincolumn">	
						<div class="nopad">
															<table class="contentpaneopen">
<tr>
		<td class="contentheading" width="100%">
					Gallery: Cars I			</td>

				
		
					</tr>
</table>

<table class="contentpaneopen">



<tr>
<td valign="top" colspan="2">
Roll your mouse over any of the images below to view the enlarged image.<br /><br /> <br /><br /><br /><br /><br /><br /> <br /> <br /><br />

<div class="gallerycontainer">
<ul>
<li><a class="thumbnail" href="#thumb">
<img title="car8thb.jpg" alt="limo hire moray" src="/images/stories/gallery/car8thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car8.jpg" />
</span>
</a></li>

<li><a class="thumbnail" href="#thumb">
<img title="car9thb.jpg" alt="limo hire elgin" src="/images/stories/gallery/car9thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car9.jpg" />
</span>
</a></li>

<li><a class="thumbnail" href="#thumb">
<img title="car10thb.jpg" alt="limousine hire" src="/images/stories/gallery/car10thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car10.jpg" />
</span>
</a></li> 

<li><a class="thumbnail" href="#thumb">
<img title="car11thb.jpg" alt="limo hire highlands" src="/images/stories/gallery/car11thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car11.jpg" />
</span>
</a></li>
 

<li><a class="thumbnail" href="#thumb">
<img title="car12thb.jpg" alt="limo hire moray" src="/images/stories/gallery/car12thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car12.jpg" />
</span>
</a></li> 

<li><a class="thumbnail" href="#thumb">
<img title="car13thb.jpg" alt="limo hire elgin" src="/images/stories/gallery/car13thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car13.jpg" />
</span>
</a></li> 

<li><a class="thumbnail" href="#thumb">
<img title="car14thb.jpg" alt="limousine hire" src="/images/stories/gallery/car14thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car14.jpg" />
</span>
</a></li> 

<li><a class="thumbnail" href="#thumb">
<img title="car15thb.jpg" alt="limo hire highlands" src="/images/stories/gallery/car15thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car15.jpg" />
</span>
</a></li>


<li><a class="thumbnail" href="#thumb">
<img title="car16thb.jpg" alt="limo hire moray" src="/images/stories/gallery/car16thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car16.jpg" />
</span>
</a></li> 

<li><a class="thumbnail" href="#thumb">
<img title="car17thb.jpg" alt="limo hire elgin" src="/images/stories/gallery/car17thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car17.jpg" />
</span>
</a></li> 

<li><a class="thumbnail" href="#thumb">
<img title="car18thb.jpg" alt="limousine hire" src="/images/stories/gallery/car18thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car18.jpg" />
</span>
</a></li>

<li><a class="thumbnail" href="#thumb">
<img title="car19thb.jpg" alt="limo hire highlands" src="/images/stories/gallery/car19thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car19.jpg" />
</span>
</a></li>

<li><a class="thumbnail" href="#thumb">
<img title="car20thb.jpg" alt="limo hire moray" src="/images/stories/gallery/car20thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car20.jpg" />
</span>
</a></li> 

<li><a class="thumbnail" href="#thumb">
<img title="car21thb.jpg" alt="limo hire elgin" src="/images/stories/gallery/car21thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car21.jpg" />
</span>
</a></li> 

<li><a class="thumbnail" href="#thumb">
<img title="car22thb.jpg" alt="limousine hire" src="/images/stories/gallery/car22thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car22.jpg" />
</span>
</a></li> 

<li><a class="thumbnail" href="#thumb">
<img title="car23thb.jpg" alt="limo hire highlands" src="/images/stories/gallery/car23thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car23.jpg" />
</span>
</a></li>

<li><a class="thumbnail" href="#thumb">
<img title="car24thb.jpg" alt="limo hire moray" src="/images/stories/gallery/car24thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car24.jpg" />
</span>
</a></li> 

<li><a class="thumbnail" href="#thumb">
<img title="car5thb.jpg" alt="limo hire moray" src="/images/stories/gallery/car5thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car5.jpg" />
</span>
</a>
</li> 

<li><a class="thumbnail" href="#thumb">
<img title="car6thb.jpg" alt="limo hire elgin" src="/images/stories/gallery/car6thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car6.jpg" />
</span>
</a></li> 

<li><a class="thumbnail" href="#thumb">
<img title="car7thb.jpg" alt="limousine hire" src="/images/stories/gallery/car7thb.jpg" height="28px" width="45px" />
<span>
<img src="/images/stories/gallery/car7.jpg" />
</span>
</a></li> 

</ul>
</div>

</td>
</tr>

</table>
<span class="article_separator">&nbsp;</span>
</div>	
</div>
</div>
</div>
<div id="content_bottom"></div>
<div class="clr"></div>
</div>				
</div>	
<div id="footer">
<p>&nbsp;</p>
<div id="sgf">
P T Limo, Site designed by <a href="http://www.css-design.co.uk">CSS Web Design</a> 
 		</div>
	</div>	
</body>
</html>

And the CSS to replace your original Gallery CSS:

Code:

/* begin css gallery */
.gallerycontainer{
position: relative;
top:-150px;
height: 480px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: blue;
padding: 2px;
left: -1000px;
border: 1px dashed blue;
width:604px;
height:377px;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top:80px;
left:0px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
.gallerycontainer ul{
margin:0 0 0 0;
padding:0 0 0 0;
}
.gallerycontainer ul li{
list-style-type:none;
display:inline;
clear:right;
padding:0 0 0 0;
margin:0 0 0 0;
}
/* end css gallery */

And last but not least...
You can view it live: HERE