Forum Moderators: open
I have got some code working below which creates a nice effect when shopping on a website. Basically i have a large image, and 4 thumbnails below, when i hover over the thumbnails the main image changes to match etc..
<snipped url>
Now at the moment i have the following code:-
<script type="text/javascript">$(function() {
$(".jqzoom").jqzoom();
});
function loadImg(img){
var imgName = "mainImage";
var srcs = ["http://www.example.com/lou/garments/pic2.jpg",
"http://www.example.com/lou/garments/pic12.jpg",
"http://www.example.com/lou/garments/pic11.jpg",
"http://www.example.com/lou/garments/pic13.jpg",
];
document.images[imgName].src=srcs[img];
document.getElementById(imgName).href=srcs[img];
}
</script>
I am using jQzoom to apply a zoom magnifier for the images.
Then my PHP code is shown below:-
include("conn.php");
$query = "SELECT * FROM category_selection WHERE selection_id = '".$_GET['selection_id']."'";
$result = mysql_query ($query);
while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
echo "<h2>$row[item_name]</h2>";
echo "<p class='img-container'><a href='http://www.example.com/lou/garments/pic2.jpg' class='jqzoom' title='heart skull' id='mainImage'><img src='http://www.example.com/lou/garments/pic2.jpg' border='1' width='320' height='350' class='left' id='mainImage'/></a>";
echo "<br />";
echo "<a href='garments/pic2.jpg' rel='lightbox'><img src='garments/pic2.jpg' border='1;' width='50' height='50' class='left' onMouseOver='loadImg(0)'/></a>";
echo "<a href='garments/pic12.jpg' rel='lightbox'><img src='garments/pic12.jpg' border='1;' width='50' height='50' class='left' style='margin-left:-4px' onMouseOver='loadImg(1)'/></a>";
echo "<a href='garments/pic11.jpg' rel='lightbox'><img src='garments/pic11.jpg' border='1;' width='50' height='50' class='left' style='margin-left:-4px' onMouseOver='loadImg(2)'/></a>";
echo "<a href='garments/pic13.jpg' rel='lightbox'><img src='garments/pic13.jpg' border='1;' width='50' height='50' class='left' style='margin-left:-4px' onMouseOver='loadImg(3)'/></a>";
echo "<img src='images/mag.png' alt='' style='padding-top:20px;width:30px;margin-left:15px;'><em><BR>hover to zoom</em>";
echo "</p>";
echo "<p class'right' style='padding-top:20px'><h2 style='margin-top:-15px;'>Product Information</h2>$row[item_description]<BR><BR>";
echo "<span style='font-size:10px;color:#25aae1'>Available Colours: </span>$row[colours]<BR><BR>";
echo "<span style='font-size:20px;'>Price: </span><span style='font-size:20px;color:red'>£$row[item_price]</span><BR><BR>";
echo "<span>View stockists or contact us now to buy.</span>";
echo "</p>";
echo "<div class='clearer'></div>";
}
mysql_close();
As you can see i currently pulling out the images by name, but i want to select from my database table according to its ID, so instead of this line,
echo "<a href='garments/pic2.jpg' rel='lightbox'><img src='garments/pic2.jpg' border='1;' width='50' height='50' class='left' onMouseOver='loadImg(0)'/></a>";
I would want this:-
echo "<a href='$row[image_1]' rel='lightbox'><img src='$row[image_1]'' border='1;' width='50' height='50' class='left' onMouseOver='loadImg(0)'/></a>";
Now i would expect this to work, but i dont know how to change the JS at the top of the page to match my requirements? The JS at the top is also selecting images 2,12,11 and 13, but again i want this to be linking to my table from database..
Can anybody help?
Regards
[edited by: whoisgregg at 12:51 pm (utc) on Aug. 19, 2009]
[edit reason] Whoops, no URLs please. See TOS [webmasterworld.com] :) [/edit]
I don't understand why you are placing the images in place with the javascript when you have the ability to just echo them into the HTML with PHP. Can you please elaborate on your purpose here. Also, if you are looking to do it asychonously then I would suggest using JSON, or XML if you prefer, to grab the data from the database:
$J.getJSON('json_request.php?id=' + id, undefined, function(json) { ... });
Just a suggestion...
