[LearningCoder]

I went ahead and done the jquery and also managed to do my idea of displaying the individual product on a template page. I'm buzzin right now.

I didn't use the data- attribute. I stuck with title. You're information won't go forgotten though. I added the extra field to my database. When retrieving the products on the products page, I fill the 'title' attribute of the image with that data. The jquery seems to work even without the array you guys created me. I put that code in there and suddenly realized I had done it without it.

Managed to get the text to align to the bottom of the image during the hover effect.

Here's the code:

PHP Code:

title='{$row['product_desc']}' 


jquery:

$(function(){
	var offsetY = 15;
	var offsetX = 15;
	var offsetTextY = 320;
	
	$('#product_holder a img').hover(function(e){
		$(this).stop().animate({'opacity' : 0.5});
		var image = $(this).attr('src');
		var text = $(this).attr('title');
		
		$('<img id="largeImage" src="' + image + '" alt="image" />')
			.css('top', e.pageY + offsetY)
			.css('left', e.pageX + offsetX)
			.appendTo('body');
			
		$('<p id="product_text">' + text + '</p>')
			
			.css('top', (e.pageY + offsetY)+offsetTextY)
			.css('left', e.pageX + offsetX)
			.appendTo('body');
	
	}, function(){
		$(this).stop().animate({'opacity' : 1});
		$('#largeImage').remove();
		$('#product_text').remove();
	});
	
	$('#product_holder a img').mousemove(function(e){
		$('#largeImage')
			.css('top', e.pageY + offsetY)
			.css('left', e.pageX + offsetX)
		$('#product_text')
			.css('top', (e.pageY + offsetY)+offsetTextY)
			.css('left', e.pageX + offsetX)
	});
	
});

Then the individual product display:

PHP Code:

$conn = new mysqli("localhost","root","","gardenable") or die("Error: ".mysqli_error());

$stmt = $conn->prepare("SELECT imgName, product_price, product_dims, product_ref, product_desc FROM product_images WHERE imgID=?") or die("Error:".mysqli_error());
$stmt->bind_param("s",$_GET['id']);
$stmt->execute();
$stmt->bind_result($img, $price, $dims, $ref, $desc);
$stmt->store_result();
$row = $stmt->num_rows;

if($row >= 1){

    while ($stmt->fetch()){
        
        $output = "<div id='product_ref_div'>";
        $output .= "<p class='dejavu'>Product ID: <span class='white bold'>{$ref}</span></p>";
        $output .= "</div>";
        
        $output .= "<img src='core/product_files/{$img}' title='{$desc}' alt='{$img}' id='display_img' />";
        
        $output .= "<div id='display_details_div'>";
        $output .= "<h2 class='dejavu white'>Product Details</h2>";
        
        $output .= "<h3 class='dejavu white'>Product Description</h3>";
        $output .= "<p class='dejavu'>{$desc}</p>";
        
        $output .= "<h3 class='dejavu white'>Product Dimensions</h3>";
        $output .= "<p class='dejavu'>{$dims}</p>";
        
        $output .= "<h3 class='dejavu white'>Product Price</h3>";
        $output .= "<p class='dejavu'>&pound;{$price}</p>";
        
        $output .= "</div>";
    }
    
}
else{

    echo "selected no records.";
    
} 


Just need to fill out all the description rows in the database.

I only looked at jquery again the other day and realized how much I liked it a year or so ago. Will definitely make more time for it.

Thanks vm for all the help and guidance.

Kind regards,

LC.