jquery and offsetting content.

[LearningCoder]

Hi,

I have been browsing a load of tutorials and found one which I can understand and which is easy to implement. When I hover over an image, I want it to display a larger image next to it as a sort of 'preview' feature of the image.

I have added some of my own code (the opacity bits) and edited the other jquery to suit my needs. The problem I am having is as well as displaying the corresponding image, I also want it to display a bit of text underneath the image. I am successfully appending the paragraph to the body but when I try to manipulate the Y offset, it doesn't seem to work.

Here is the code:

$(function(){
	var offsetY = 15;
	var offsetX = 15;
	var offsetTextY = 300;
	
	$('#product_holder a img').hover(function(e){
		$(this).stop().animate({'opacity' : 0.5});
		var image = $(this).attr('src');
		
		$('<img id="largeImage" src="' + image + '" alt="image" />')
			.css('top', e.pageY + offsetY)
			.css('left', e.pageX + offsetX)
			.appendTo('body');
			
		$('<p id="product_text">hello, this is information about the product</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)
			.css('left', e.pageX + offsetX)
	});
	
});

I have highlighted the line which doesn't seem to be working. As you can see I have created another variable with a value of 300 (this is the total height I set my 'preview' images to. I have to also accommodate for a bit of padding, but that can be done later). Trouble is when I try to add offsetY to offsetTextY, it doesn't seem to add them correctly. The paragraph offsets to the same area which the image does but the 300 pixels are not being accounted for thus covering the top half of the image. I have tried all kinds of different ways to make sure the the calculation of offsetY and offsetTextY is done first, but it doesn't seem to be working anyway.

Thanks for any help you can give me.

Regards,

LC.

[AndrewGSW]

You probably need to add the text-offset to the mousemove event as indicated here:

	$('#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)
	});

Otherwise, as soon as the mouse moves a little bit it will ignore the text-offset.

BTW This is probably not the best way to do this - dynamically creating the elements. Preferable would be to have the image and paragraph contained within a hidden div, and use events to change the image src, the p-text, and then show (or fade, etc.) the div.

[LearningCoder]

Ah ok, I only hardcoded the paragraph in there just to get it to position where I wanted it. I'm not sure about what I am going to do with regards to creating the individual information.

So for example, if I create just 1 hidden div and set it to display none.

<div id="view"></div>

//css
#view 
{
width: 300px;
height: 450px;
border:1px solid black;
padding: 1%
background: #e6e6e6;
display: none;
}

Then in the jquery do nearly the same (finding the x and y positions) but rather than displaying just an image and text, bring the display to be visible to the page again?

Not sure how to go about writing the content for each image. Any thoughts about that?

Thanks for the advice.

Regards,

LC.

[AndrewGSW]

<div id="view">
<img id="viewimg" src="defaultimage.gif" height="100" width="100">
<p id="imgdesc">dummy text</p>
</div>

Make the div visible initially and use css on all three elements until it looks good. The div should be position: absolute with a z-index so that it sits above other content - I'm assuming this is your requirement?

I think the src is set using css() (I should double-check this ):

$('#viewimg').css('src','someother.gif');
$('#imgdesc').text('What a great image!');
$('#view').css('display','block'); //or fadeIn() etc.

If you will be substituting different images and descriptions then I would store, and retrieve this information from, an array - or probably an object. Something like this:

var imgDetails = { "key1" : ["newimagesrc.gif", "Great description here"],
"key2" : ["newimagesrc.gif", "Great description here"]
//etc..
};

NB I haven't checked any of this - I'm just offering a few pointers/suggestions.

[AndrewGSW]

Just did a quick test, but it is attr() rather than css() to change the image source - Doh!

<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
var imgDetails = { "key1" : ["images/beach1.jpg", "Great description here"],
"key2" : ["images/beach2.jpg", "Another great description here"]
//etc..
};
function swapIt(somei) {
    alert(imgDetails['key' + somei][0]);
    $('#viewimg').attr('src',imgDetails['key' + somei][0]);
    $('#imgdesc').text(imgDetails['key' + somei][1]);
    $('#view').css('display','block'); //or fadeIn() etc.
}

</script>
</head>
<body>
<h1>Image Presentation</h1>
<button onclick="swapIt(1);">Click me</button>
<div id="view">
<img id="viewimg" src="images/defaultimage.jpg" height="240" width="200">
<p id="imgdesc">dummy text</p>
</div>
</body>
</html>

[I should use a more recent jQuery library, but I just grabbed the nearest one to hand ]

Added: Sorry that I didn't adapt your code, and I should use jQuery to add the click (or hover) event.

[LearningCoder]

Hi andrew, thanks for the reply. I examined your code and edited it slightly to make it easier for myself to work with.

Here is the code:

<!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>
   <title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">

#view{display: none;}
</style>

<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
var imgDetails = { "key1" : ["phpwp.php", "php wallpaper"],
"key2" : ["nasawp.jpg", "moon wallpaper"],
"key3" : ["naturewp.jpg", "nature wallpaper"],
"key4" : ["hillswp.jpg", "scottish hills wallpaper"],
"key5" : ["tigerwp.jpg", "tiger wallpaper"],
"key6" : ["citywp.jpg", "city in lights wallpaper"]
//etc..
};
	$(function(){
		var currentIndex = 1;
		$('#swap').click(function(){
			$('#view').slideUp('slow'); //or fadeIn() etc.
			currentIndex++;
			$('#viewimg').attr('src',imgDetails["key"+currentIndex][0]);
			$('#imgdesc').text(imgDetails["key"+currentIndex][1]);
			$('#view').slideDown('slow'); //or fadeIn() etc.
			console.log(currentIndex);
		});
	});

</script>


</head>

<body>

What I am trying to achieve is, when the click function runs, to slide the current image up and then display the next by sliding down at the end of the function as usual. As it starts sliding up, the content changes to the next index of the array and displays the image before it's reached the top, then slides down the very same image and text.

Is there a way I can tell jquery to stop what it's doing until the slideUp function finishes it's job.

I tried putting .stop().slideUp bla bla and it didn't work. I know we can use stop() with animate() but clearly not with the basic css style functions. I also tried moving the iteration around to before the jquery functions(inside the click) and afterwards and no difference.

Kind regards,

LC.

[AndrewGSW]

slideUp, like most jQuery methods, accept a callback to run when the method completes.

$('#view').slideUp('slow', function () {
    // do the next thing(s)..
});

[LearningCoder]

Top man, thanks very much indeed. I noticed a lot of the functions have the callback parameter but never really known what it meant or how to use it.

My images are displayed from a database so when trying to implement something like this in my site, how can I go about filling the array with the images which are retrieved rather than having to hardcode each src attribute?

Edit: think i might have an idea, ill go ahead and attempt to do it. Just need to grab the src of the image which was retrieved the same as I did before and loop the values into an array?

Cheers dude,

Kind regards,

LC.

[AndrewGSW]

At some point you might want to look into pre-loading (caching) the images - if there are a number of them, or they are quite big. Essentially, you create a new-images array and setting there src's loads them in the browsers cache.

var myImgs = ['path/to/img1.jpg', 'path/to/img2.gif'];

function preload(imgs) {
    var img;
    for (var i = 0, len = imgs.length; i < len; ++i) {
        img = new Image();
        img.src = imgs[i];
    }
}

preload(myImgs);

The array is then generally ignored/discarded, as setting the src (as you are doing currently) will retrieve the images from the cache.

You could probably combine this with constructing the imgDetails object, so that imgDetails is built at the same time as the images are cached.

[LearningCoder]

Would this be done completely separate from the jQuery and does it need to be done before any of the jQuery is run?

Sorry I've never even looked at caching. Heard a lot but never read into it. :s

Regards,

LC.

[AndrewGSW]

Originally Posted by LearningCoder

Would this be done completely separate from the jQuery and does it need to be done before any of the jQuery is run?

Sorry I've never even looked at caching. Heard a lot but never read into it. :s

Regards,

LC.

The pre-loading can be done as the page is constructed, or afterwards in $(document).ready(). I'm guessing it would be sensible to do it in document.ready, so that it doesn't interfere with the initial construction of the page(?) - assuming the user is not likely to start hovering while the page is still loading.

Perhaps you could ignore the pre-loading aspect until everything else is working.

[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):

image1 = new Image(480, 320);

I like this

[LearningCoder]

Yea I will definitely keep this all in mind, thanks for the tips. I am going to get the functionality working between being able to select the correct image and text when I hover over that certain image. I will go back and read up on caching though once I've got this sorted.

I forgot how much I like jQuery!

Was a long night and found myself debugging other peoples code so I didn't work much on the jquery from around 10pm last night. Going to do my bits and get back on it today. Will update the thread later on with any issues which arise (let me assure you there will be!)

Regards Andrew,

LC.

[LearningCoder]

How can I get all the product images src attributes and store them into an array?

I tried this:

var imgDetails = new Array();

$(function(){
	imgDetails = $('.prod img').attr('src');
});
console.log(imgDetails);

and this:

$(function(){
	for(var i=0;i<40;i++){
		imgDetails[i] = $('.prod img').attr('src');
		alert(imgDetails);
	}
});
console.log(imgDetails);

I think I need a loop but I'm not sure how to get the length of how many images they are. I know the length but didn't want to hardcode it incase I add more. I am trying to target all the images which comes from my database. (when they are retrieved, I give them a class of 'pos') I thought doing this I could target them with jquery using the class I'm just not sure on the functions of jquery and how to retrieve all the images. Using the second code everytime I click the alert box off, it pops up with another but displays this:

core/product_files/bench1.jpg,core/product_files/bench1.jpg,core/product_files/bench1.jpg,core/product_files/bench1.jpg,core/product_files/bench1.jpg

i know to use the .attr('src') to get the value but how do I initially get the images and loop the src into the array?

Can I give them any naming convention as a way to target them for example:

<img name="0" />
<img name="1" />
<img name="2" />
<img name="3" />
<img name="nth" />

Then when I use the loop I can also grab that value and use the i variable to iterate through them?
Any hints you can give me?

EDIT: Awesome, just looked at the each() function on the jquery api and it's alerting me the src values.

Regards,

LC.

[LearningCoder]

Ok, I've wrote the code now to do exactly what I want:

$(function(){
	var index = 0;
	
	$('.prod img').each(function(index) {
		imgDetails[index] = $(this).attr('src');
		alert(index+" "+imgDetails[index]);
		index++;
	});
});

This stores the src values into the array.

I'm thinking now to make it multi-dimensional and add the corresponding text to each of the indexes.

What is the best way to go about doing this?

Should I be doing it at the same time as I put the src's into the array?

Regards,

LC.