displaying images from a database 1

[Hondy]

Hi

I have a PHP script that pulls images into a repeating div which works great. I'm trying to make it so that when you click on the div it pops up a window via javascript. The problem I have is that the onclick event always pulls out the last image the page loaded instead of being part of the PHP loop. How can I make it display the relevant image rather than the last image in the loop?

Also, how do you make code appear as such in these posts?

Thanks very much for looking


<div id="content">
<!-- Content Window -->

<?php do { ?>
<script>
function myfunction(){TINY.box.show(content2,0,0,0,1)}
var content2 = "<img src='<?php echo $fullpath?>' width='298' height='373' alt='' />";
</script>

<?php
$mypath1 = $row_rs_images['path'];
$mypath2 = $row_rs_images['category'];
$mypath3 = $row_rs_images['image'];
$sep = "/";
$fullpath = $mypath1.$sep.$mypath2.$sep.$mypath3;
?>

<div id="image" onClick="myfunction();">
<img src="<?php echo $fullpath ?> "width="100" height="100"/><?php echo $row_rs_images['description']; ?>
<?php echo $fullpath;?>
</div>

<?php } while ($row_rs_images = mysql_fetch_assoc($rs_images)); ?>
</div>

 

[BillyRayPreachersSon]

To post code as code, post it between [ignore]

[/ignore] tags (click the "Process TGML" link below the posting box for more information).

The main problem is that you have multiple copies of the "myfunction" function and content2 variables - one for every iteration in the loop. Therefore the last one to be written to the page will be used.

Fix this and that's half the battle.

Then, instead of hard-coding the string to show in the popup, read the filename from the IMG element inside the DIV. You can do this in many ways, but for you, the easiest would be something like:

<div ... onclick="myfunction([!]this[/!]);">

function myfunction(div) {
   var imageSrc = div.getElementsByTagName('img')[0].src;
   var content2 = '<img src="' + imageSrc + '" width="298" height="373" alt="" />';
   TINY.box.show(content2, 0, 0, 0, 1);
}

Another point to note: You are using the same big image for your thumbnails as your full-size view, so why bother giving the users thumbnails at all if they still have to download the full-size image? If you're going to show thumbnails, res the originals down to the thumbnail size.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Hondy]

Thanks Dan, I appreciate it.

In all honesty, I'm not too sure how I can make lower res thumbnails on the fly. The only way I can think to do it is by having 2 images, one lo-res and one high-res.

 

[BillyRayPreachersSon]

That's how I would do it... so not sure why it's a problem.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[Hondy]

oh ok, thats a good way to do it? I thought there may have been some smarter way that I didn't know about. I'll give that a go then.

 

[Broox]

Hi Hondy

There's a great tool that i use for creating Low Res images on the fly called ImageMagick. It's completely open-source and can be used from the command line, asp, php, perl etc.

Hope this helps,

Daniel

http://www.broox.co.uk

 

[Hondy]

Thanks Daniel, I will investigate that!