Page 1 of 1

problem using php and javascript for a photogallery.

Posted: Tue Aug 28, 2007 9:14 am
by roondog
I'm trying to make a photo gallery with thumbnails and when the3y are clicked the full size picture is shown.
here is my code

Code: Select all

<?php

$con = mysql_connect("localhost","******","*****");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("model", $con);

$result = mysql_query("SELECT * FROM fashion");

while($row = mysql_fetch_array($result))
  {
  echo "<a onClick='document.getElementById('main').src=". $row[picname] . ";><img class='t_nail' src=". $row[picname] . " alt='thumbnail' /></a>";
}
  
mysql_close($con);
?>
I get the thumbnails but can get the onClick to work.

Posted: Tue Aug 28, 2007 9:23 am
by Kieran Huggins
double check your HTML source -- it doesn't appear to have anything to do with PHP.

Posted: Tue Aug 28, 2007 9:46 am
by Steve Mellor
your problem is with the javascript. This is (in HTML) what you're after

Code: Select all

<a href="#" onclick="myPic.src='big.jpg'";>
<img name="myPic" id="myPic" class="t_nail" src="small.jpg" alt="thumbnail" />
</a>
But you'll need to switch some of the quote marks so that you don't escape the string before you want to.

Try this:

Code: Select all

echo "<a href=\"#\" onclick=\"myPic.src='$row[picname]'\";>
<img name=\"myPic\" id=\"myPic\" class=\"t_nail\" src=\"$row[picname]\" alt=\"thumbnail\" />
</a>";
Javascript can be funny at times.

[NINJA STEALTH EDIT]

Also, you will want to increment the id and name of the img element if you're going to be looping them.

Posted: Tue Aug 28, 2007 10:08 am
by Zoxive
Just double checking, you realize you are using the same data?

Code: Select all

echo "<a onClick='document.getElementById('main').src=". $row[picname] . ";><img class='t_nail' src=". $row[picname] . " alt='thumbnail' /></a>"; 
$row['picname'] is used both times.

Posted: Tue Aug 28, 2007 10:11 am
by Steve Mellor
Zoxive wrote:Just double checking, you realize you are using the same data?
Either way his code wouldn't have worked. Mine does :D

It's a very good point though. You won't notice a picture change if you have the same picture twice. Of course you could put the picture in a different directory and get around the naming problem.