jquery and offsetting content. - Page 3

LearningCoder · 12-02-2012, 08:31 PM

Awesome so they can be used in all browsers but I need to use getAttribute to retrieve the info?

Site looks very useful, that's one for the bookmarks!

Kind regards,

Lc.

AndrewGSW · 12-02-2012, 11:43 PM

Quote:

but I need to use getAttribute to retrieve the info?

You are using jQuery so just .data(..).

LearningCoder · 12-03-2012, 01:29 AM

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:

Code:

$(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.

AndrewGSW · 12-03-2012, 06:30 PM

@LC Not a problem. Good luck.

LearningCoder · 12-11-2012, 03:26 PM

Quote:

Originally Posted by AndrewGSW

People seem to pre-cache images by running a script in the head tag - that is, as the page is constructed - so that they are available as soon as the page is loaded.

I notice that we can also specify the size of the image(s):

Code:

image1 = new Image(480, 320);

I like this

Hi andrew, I have completed the products page and was wondering if you could help me with caching the images to help the loading of the page. My live version pretty much crashes my browser because of the amount/size of the images on my products page. I am going to send all my images through a site I found which optimizes the image file (I want them as small in size as possible) but I want to further help the loading by caching the files so the users have a better experience.

I myself got quite annoyed when the browser has 3 second delays even for scrolling down the page. I don't think many users would stay on the site or even bother looking at my products if this is happening to them.

Are there any good tutorials out there which can guide me through?

Kind regards,

LC.

AndrewGSW · 12-11-2012, 05:36 PM

I might consider pre-loading just a few images at the beginning (script in the head tag) and, after the page has loaded, continue loading/caching the remaining images.

Code:

var myImgs = ['path/to/img1.jpg', 'path/to/img2.gif'];
var x = 0, y = 5;
function preload(imgs, x, y) {
    var img;
    for (var i = x; i < y; ++i) {
        img = new Image(); // if you know the size of the images (and they are the same) use Image(200, 300);
        img.src = imgs[i];
    }
}
preload(myImgs, x, y);
window.onload = function () {
    // or just put this code before the closing body tag
    preload(myImgs, y+1, myImgs.length);
}

In terms of a tutorial, I would just be Googling for one, but perhaps someone else has a recommendation.

AndrewGSW · 12-11-2012, 06:00 PM

.. and, not forgetting the best advice, don't put so many images on one page

. If I hit such a page and my computer starts struggling, I hit the magic Back button.

LearningCoder · 12-11-2012, 07:15 PM

Thank you for the code, unfortunately I couldn't get it to work at first so slightly modified it to simplify it for me. I have kept the preload function though.

So is this the preloading complete?

Here is my code:

Code:

function images(){
	setInterval("change_image()",5000);
}

function preload(imgs, x, y) {
    var img;
    for (var i = x; i < y; ++i) {
        img = new Image(); // if you know the size of the images (and they are the same) use Image(200, 300);
        img.src = imgs[i];
		console.log(imgs[i]);
		console.log(img);
    }
}

function change_image(){
	var index = Math.floor((Math.random() * array_length));//generates a random number between 0-length of array
	var image = "<img src='"+image_names[index]+"' alt='"+image_names[index]+"' title='"+image_names[index]+"' id='random_image' />";

	document.getElementById("image_div").innerHTML = image;
	document.getElementById("text").innerHTML = product_text;
}

var image_names = new Array("core/product_files/bench1.jpg","core/product_files/bench2.jpg","core/product_files/bench3.jpg","core/product_files/bench4.jpg","core/product_files/bench5.jpg",
					"core/product_files/binstore1.jpg","core/product_files/binstore2.jpg","core/product_files/binstore3.jpg","core/product_files/binstore4.jpg","core/product_files/binstore5.jpg",
					"core/product_files/birdhouse1.jpg","core/product_files/birdhouse2.jpg","core/product_files/birdhouse3.jpg","core/product_files/birdhouse4.jpg","core/product_files/birdhouse5.jpg",
					"core/product_files/gate1.jpg","core/product_files/gate2.jpg","core/product_files/gate3.jpg","core/product_files/gate4.jpg","core/product_files/gate5.jpg",
					"core/product_files/pethousing1.jpg","core/product_files/pethousing2.jpg","core/product_files/pethousing3.jpg","core/product_files/pethousing4.jpg","core/product_files/pethousing5.jpg",
					"core/product_files/planter1.jpg","core/product_files/planter2.jpg","core/product_files/planter3.jpg","core/product_files/planter4.jpg","core/product_files/planter5.jpg",
					"core/product_files/shed1.jpg","core/product_files/shed2.jpg","core/product_files/shed3.jpg","core/product_files/shed4.jpg","core/product_files/shed5.jpg",
					"core/product_files/table1.jpg","core/product_files/table2.jpg","core/product_files/table3.jpg","core/product_files/table4.jpg","core/product_files/table5.jpg");
				
var product_text = "<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature"
	product_text += "from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked"
	product_text += "up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage</p>";
				
var array_length = image_names.length;//get the length of the array
var x = 0; 
var y = array_length;
					
preload(image_names, x, y);					


window.onload = images();

I have 2 console.logs() in the preload() function this is the output:

Code:

core/product_files/bench1.jpg

main.js (line 10)
<img src="core/product_files/bench1.jpg">
main.js (line 11)

core/product_files/bench2.jpg

main.js (line 10)
<img src="core/product_files/bench2.jpg">
main.js (line 11)

core/product_files/bench3.jpg

main.js (line 10)
<img src="core/product_files/bench3.jpg">
main.js (line 11)

core/product_files/bench4.jpg

main.js (line 10)
<img src="core/product_files/bench4.jpg">
main.js (line 11)

core/product_files/bench5.jpg

main.js (line 10)
<img src="core/product_files/bench5.jpg">
main.js (line 11)

core/product_files/binstore1.jpg

main.js (line 10)
<img src="core/product_files/binstore1.jpg">
main.js (line 11)

core/product_files/binstore2.jpg

main.js (line 10)
<img src="core/product_files/binstore2.jpg">
main.js (line 11)

core/product_files/binstore3.jpg

main.js (line 10)
<img src="core/product_files/binstore3.jpg">
main.js (line 11)

core/product_files/binstore4.jpg

main.js (line 10)
<img src="core/product_files/binstore4.jpg">
main.js (line 11)

core/product_files/binstore5.jpg

main.js (line 10)
<img src="core/product_files/binstore5.jpg">
main.js (line 11)

core/product_files/birdhouse1.jpg

main.js (line 10)
<img src="core/product_files/birdhouse1.jpg">
main.js (line 11)

core/product_files/birdhouse2.jpg

main.js (line 10)
<img src="core/product_files/birdhouse2.jpg">
main.js (line 11)

core/product_files/birdhouse3.jpg

main.js (line 10)
<img src="core/product_files/birdhouse3.jpg">
main.js (line 11)

core/product_files/birdhouse4.jpg

main.js (line 10)
<img src="core/product_files/birdhouse4.jpg">
main.js (line 11)

core/product_files/birdhouse5.jpg

main.js (line 10)
<img src="core/product_files/birdhouse5.jpg">
main.js (line 11)

core/product_files/gate1.jpg

main.js (line 10)
<img src="core/product_files/gate1.jpg">
main.js (line 11)

core/product_files/gate2.jpg

main.js (line 10)
<img src="core/product_files/gate2.jpg">
main.js (line 11)

core/product_files/gate3.jpg

main.js (line 10)
<img src="core/product_files/gate3.jpg">
main.js (line 11)

core/product_files/gate4.jpg

main.js (line 10)
<img src="core/product_files/gate4.jpg">
main.js (line 11)

core/product_files/gate5.jpg

main.js (line 10)
<img src="core/product_files/gate5.jpg">
main.js (line 11)

core/product_files/pethousing1.jpg

main.js (line 10)
<img src="core/product_files/pethousing1.jpg">
main.js (line 11)

core/product_files/pethousing2.jpg

main.js (line 10)
<img src="core/product_files/pethousing2.jpg">
main.js (line 11)

core/product_files/pethousing3.jpg

main.js (line 10)
<img src="core/product_files/pethousing3.jpg">
main.js (line 11)

core/product_files/pethousing4.jpg

main.js (line 10)
<img src="core/product_files/pethousing4.jpg">
main.js (line 11)

core/product_files/pethousing5.jpg

main.js (line 10)
<img src="core/product_files/pethousing5.jpg">
main.js (line 11)

core/product_files/planter1.jpg

main.js (line 10)
<img src="core/product_files/planter1.jpg">
main.js (line 11)

core/product_files/planter2.jpg

main.js (line 10)
<img src="core/product_files/planter2.jpg">
main.js (line 11)

core/product_files/planter3.jpg

main.js (line 10)
<img src="core/product_files/planter3.jpg">
main.js (line 11)

core/product_files/planter4.jpg

main.js (line 10)
<img src="core/product_files/planter4.jpg">
main.js (line 11)

core/product_files/planter5.jpg

main.js (line 10)
<img src="core/product_files/planter5.jpg">
main.js (line 11)

core/product_files/shed1.jpg

main.js (line 10)
<img src="core/product_files/shed1.jpg">
main.js (line 11)

core/product_files/shed2.jpg

main.js (line 10)
<img src="core/product_files/shed2.jpg">
main.js (line 11)

core/product_files/shed3.jpg

main.js (line 10)
<img src="core/product_files/shed3.jpg">
main.js (line 11)

core/product_files/shed4.jpg

main.js (line 10)
<img src="core/product_files/shed4.jpg">
main.js (line 11)

core/product_files/shed5.jpg

main.js (line 10)
<img src="core/product_files/shed5.jpg">
main.js (line 11)

core/product_files/table1.jpg

main.js (line 10)
<img src="core/product_files/table1.jpg">
main.js (line 11)

core/product_files/table2.jpg

main.js (line 10)
<img src="core/product_files/table2.jpg">
main.js (line 11)

core/product_files/table3.jpg

main.js (line 10)
<img src="core/product_files/table3.jpg">
main.js (line 11)

core/product_files/table4.jpg

main.js (line 10)
<img src="core/product_files/table4.jpg">
main.js (line 11)

core/product_files/table5.jpg

main.js (line 10)
<img src="core/product_files/table5.jpg">
main.js (line 11)

5

main.js (line 22)

I remembered I created an array already but it was within a template html file, so I've moved it to an external file and added it to my index.php file.

Works a charm, I just don't know very much about caching so was wondering if this is complete now?

Kind regards,

LC.

AndrewGSW · 12-11-2012, 07:36 PM

Code:

var image_names = new Array("core/product_files/bench1.jpg","core/product_files/bench2.jpg","core/product_files/bench3.jpg","core/product_files/bench4.jpg","core/product_files/bench5.jpg",
					"core/product_files/binstore1.jpg","core/product_files/binstore2.jpg","core/product_files/binstore3.jpg","core/product_files/binstore4.jpg","core/product_files/binstore5.jpg",
					"core/product_files/birdhouse1.jpg","core/product_files/birdhouse2.jpg","core/product_files/birdhouse3.jpg","core/product_files/birdhouse4.jpg","core/product_files/birdhouse5.jpg",
					"core/product_files/gate1.jpg","core/product_files/gate2.jpg","core/product_files/gate3.jpg","core/product_files/gate4.jpg","core/product_files/gate5.jpg",
					"core/product_files/pethousing1.jpg","core/product_files/pethousing2.jpg","core/product_files/pethousing3.jpg","core/product_files/pethousing4.jpg","core/product_files/pethousing5.jpg",
					"core/product_files/planter1.jpg","core/product_files/planter2.jpg","core/product_files/planter3.jpg","core/product_files/planter4.jpg","core/product_files/planter5.jpg",
					"core/product_files/shed1.jpg","core/product_files/shed2.jpg","core/product_files/shed3.jpg","core/product_files/shed4.jpg","core/product_files/shed5.jpg",
					"core/product_files/table1.jpg","core/product_files/table2.jpg","core/product_files/table3.jpg","core/product_files/table4.jpg","core/product_files/table5.jpg");

I wouldn't have included the same directory in these repeatedly, could have fed it to the preload function as an additional argument and concatenated it to the image names:

Code:

function preload(imgs, imgDir, x, y) {
    img.src = imgDir + '/' + imgs[i];

This would make it easier to change later if you move the images to a different folder

. But never mind.

Quote:

Works a charm, I just don't know very much about caching so was wondering if this is complete now?

If it works a charm then what else is there to know..? But I don't believe there is much more to this topic (apart from some server-side nonsense/trickery to persuade IE to use the cached image-store). Google is your pal if you want to study more.

I suggested loading some images at the beginning and the rest after the page has loaded. I suppose an optimal solution could be to load images at various stages during page-load, but I wouldn't worry about this.

Also.. some clever sites start loading some images that will be required on the next page, so that the transition between pages is smoother. But again, I wouldn't worry..

AndrewGSW · 12-11-2012, 07:42 PM

Code:

var image = "<img src='"+image_names[index]+"' alt='"+image_names[index]+"' title='"+image_names[index]+"' id='random_image' />";

It is preferable and more efficient to just change the src, title and id of an existing element, rather than repeatedly replacing it with a new element.

LearningCoder · 12-11-2012, 08:20 PM

When I said it works a charm I meant I was getting the values I wanted from doing the console.log() but I just didn't know if the process was complete or not. I will change the directory part.

Thanks for the help.

Regards,

LC.