You never showed what your javascript function toggleImage looks like, which would be what deals with this assuming the rest of your code works.
Lauraw;10964064 wrote:
function dynamicCSS()
{
global $rs;
// for .thumb-it we need #top: -50%; for IE...but it doesn't work.
$thumb = $rs['thumbs'] + 20;
What "doesn't work"? What is $rs?
Anyway, I'd go with something along the lines of
function showImage(src) {
var i = document.getElementById('largeVersion');
if (i.src == src && i.style.display != 'none') {
i.style.display = 'none';
}
else {
i.src = src;
i.style.display = 'inline';
}
}
function hideImage() {
var i = document.getElementById('largeVersion');
i.style.display = 'none';
}
</script>
<style type="text/css">
.thumb {
width: 32px;
height: 40px;
margin: 8px 4px 8px 4px;
}
#largeVersion {
display: none;
position: fixed;
top: 40%;
left: 40%;
}
</style>
</head>
<body style="margin:20px;">
<img id="largeVersion" src="" onclick="hideImage();" />
<?php
$thumbs = array('thumbs here');
$images = array('images here');
echo '<div>';
for ($i = 0; $i < count($thumbs); ++$i) {
if ($i > 0 && $i % 5 == 0) {
echo '</div><div>';
}
echo '<img class="thumb" src="'.$thumbs[$i].'" onclick="showImage(\''.$images[$i].'\')" />';
}
?>
That is, create one non-displayed image element with position: fixed to show the large version of the clicked thumb (rather than have one img element per large version).
If the large image is clicked, or the same thumb is clicked again, hide the large version. Otherwise, show the next thumb clicked by changing the src of the large version.
However, since you have code to deal with IE6, iirc you'd need some fixes to deal with its incorrect handling of position: fixed.
Also, if all of your large images don't have the same size, you might not want to use fixed values for top/left for #largeVersion like I did, but rather use javascript to calculate exactly where this image should be to be perfectly centered (which will depend on the image sizes).
If you rather have one image element per thumb, you'd have to keep track of what image element is currently being displayed, which is easy to do
<script type="text/javascript">
var currentImage = false; // making use of a global variable
function toggleImage(id, src) {
// do not use "var currentImage" here, or you'd use a variable with local scope
// just "currentImage" will reference the global var.
if (currentImage && currentImage.style) {
currentImage.style.display = 'none';
}
var i = document.getElementById('img'+id);
i.src = src;
i.style.display = 'inline';
currentImage = i; // global var keeps track of currently shown image
}
</script>
