Jump to content

Click Small Image Shows Image In Large Image Holder........


arunpatal

Recommended Posts

Hi, I have a Image holder.

 

<p><img src="" alt="" name="a" width="286" height="307" id="a" /></p>

 

 

 

and i have 4 small images in page.

 

variable of images like $img1, $img2, $img3, $img4

 

<img src="images/<?php echo $img1; ?>.jpg" width="81" height="100" alt="<?php echo $product_name; ?>" /><br />

<a href="images/<?php echo $img1; ?>.jpg">Full Size</a>

 

 

I want that if i click on Image or Full Size, it shows the image in Image holder......

 

 

Can someone please help???? :happy-04:

This is Full code

 

 

 

<?php

// Script Error Reporting

error_reporting(E_ALL);

ini_set('display_errors', '1');

?>

<?php

// Check to see the URL variable is set and that it exists in the database

if (isset($_GET['id'])) {

// Connect to the MySQL database

include "storescripts/connect_to_mysql.php";

$id = preg_replace('#[^0-9]#i', '', $_GET['id']);

// Use this var to check to see if this ID exists, if yes then get the product

// details, if no then exit this script and give message why

$sql = mysql_query("SELECT * FROM products WHERE id='$id' LIMIT 1");

$productCount = mysql_num_rows($sql); // count the output amount

if ($productCount > 0) {

// get all the product details

while($row = mysql_fetch_array($sql)){

$product_name = $row["product_name"];

$price = $row["price"];

$img1 = $row["img1"];

$img2 = $row["img2"];

$img3 = $row["img3"];

$img4 = $row["img4"];

$details = $row["details"];

$category = $row["category"];

$subcategory = $row["subcategory"];

$date_added = strftime("%b %d, %Y", strtotime($row["date_added"]));

}

 

} else {

echo "That item does not exist.";

exit();

}

 

} else {

echo "Data to render this page is missing.";

exit();

}

mysql_close();

?>

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title><?php echo $product_name; ?></title>

<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />

</head>

<body>

<div align="center" id="mainWrapper">

<?php include_once("template_header.php");?>

<div id="pageContent">

<table width="100%" border="0" cellspacing="0" cellpadding="15">

<tr>

 

 

 

 

<td width="12%" valign="top"><div style='float:left;'><img src="inventory_images/<?php echo $id; ?>.jpg" width="81" height="100" alt="<?php echo $product_name; ?>" /><br />

<a href="inventory_images/<?php echo $id; ?>.jpg">Full Size</a><br />

 

<p>

 

<img src="inventory_images/<?php echo $img1; ?>.jpg" width="81" height="100" alt="<?php echo $product_name; ?>" /><br />

<a href="inventory_images/<?php echo $img1; ?>.jpg">Full Size</a>

</div></td>

 

 

 

 

 

<td width="12%" valign="top"><div style='float:left;'><img src="inventory_images/<?php echo $img2; ?>.jpg" width="81" height="100" alt="<?php echo $product_name; ?>" /><br />

<a href="inventory_images/<?php echo $img2; ?>.jpg">Full Size</a><br />

 

<p>

 

<img src="inventory_images/<?php echo $img3; ?>.jpg" width="81" height="100" alt="<?php echo $product_name; ?>" /><br />

<a href="inventory_images/<?php echo $img3; ?>.jpg">Full Size</a>

</div></td>

 

 

 

 

 

 

 

 

 

 

<td width="76%" valign="top"><h3><?php echo $product_name; ?></h3>

<p><?php echo "$".$price; ?><br />

<br />

<?php echo "$subcategory $category"; ?> <br />

<br />

<?php echo $details; ?>

<br />

</p>

<form id="form1" name="form1" method="post" action="cart.php">

<input type="hidden" name="pid" id="pid" value="<?php echo $id; ?>" />

<input type="submit" name="button" id="button" value="Add to Shopping Cart" />

</form>

<p><img src="" alt="" name="a" width="286" height="307" id="a" /></p>

</td>

</tr>

</table>

</div>

<?php include_once("template_footer.php");?>

</div>

</body>

</html>

I don't feel like reading that code. You really need to use code tags.

 

If you wanted to click a smaller image that will send the source to the larger image tag, then you just need to use a class for the smaller images, a class or id for the larger, then when you click the class (smaller image) larger image src = this.src

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.