Jump to content

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


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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.