jquery and offsetting content.

[AndrewGSW]

Where are the image src and descriptions coming from? If you are using a server-side script to retrieve these details from a database, file or folder, then constructing and populating a multi-dimensional array within a loop is the way to go.

If the details are fixed then you would just hard-code the array:

var imgDetails = [];
imgDetails[0] = [ "path/image1.gif", "Some great description."];
imgDetails[1] = [ "path/image2.gif", "Some other great description."];
// etc.

// details are retrieved as:
imgDetails[0][0];    // the first image path
imgDetails[0][1];    // the first description

// the number of images can just be set in stone, or read using length:
var imgLength = 10;    // or
var imgLength = imgDetails.length;

[AndrewGSW]

var imgDetails = [];

$(function(){
	var index = 0;
	
	$('.prod img').each(function(index) {
                imgDetails[index] = [];
		imgDetails[index][0] = $(this).attr('src');
		imgDetails[index][1] = "Where to retrieve this description..?";
                // it could be the title, or a data-* attribute..?
                // imgDetails[index][1] = $(this).attr('title');
		index++;
	});
});

Added: You don't need var index = 0 or index++ because index is already available - see the parameter to the each() method. Just delete these two lines.

[DanInMa]

$(function(){
	var imgSrcArray=[];
        var imgTxtArray=[]; 	
	$('.prod img').each(function(index) {
		imgSrcArray.push($(this).attr('src'));
                imgTxtArray.push($(this).text());
                 alert(imgSrcArray[index]+imgTxtArray[index]);

	});
});

something like this?

[AndrewGSW]

@DanInMa Images don't have text().

[DanInMa]

Originally Posted by AndrewGSW

@DanInMa Images don't have text().

woops! thanks bud hahaha!

[AndrewGSW]

woops! thanks bud hahaha!

No worries . Could use title though:

imgTxtArray.push($(this).attr('title'));

I would prefer not to use two separate arrays but I suppose this comes down to personal preference . Andy.

[AndrewGSW]

Follows a dull (useful?) discussion - I have too much time on my hands today .

//Multi-dimensional arrays or array of objects?

var imgDetails = []; // an array 
imgDetails[0] = ["image1.gif", "Some description 1."];
// each element is also an array 
imgDetails[1] =["image2.gif", "Some description 2."];
// etc. this creates a multi-dimensional array, of length..
var imgLength = imgDetails.length;
var secondDescription = imgDetails[1][1];

// Alternatively, we can create an "associative array":
var imgAssoc = []; // an array 
imgAssoc['img1'] = ["image1.gif", "Some description 1."];
imgAssoc['img2'] = ["image2.gif", "Some description 2."];

//var imgLengthAssoc = imgAssoc.length;
// ..doesn't work: assoc. arrays don't have a length property!
var secDescription = imgAssoc['img2'][1];
console.log(secDescription);
// Element ids are natural candidates to use as (associative) keys. However, if 
// the ids are row1, row2, etc., or image0, image1, etc., then there is little 
// to be gained by using an associative (rather than indexed-) array, and indexed 
// versions are easier to navigate (they have a length).
var imgs = [];
imgs['image0'] = ["something", 0];
// associative arrays are objects, so we should be doing this instead:
// imgs['image0'] = {"first_attr": "something", "second_attr": 0};
imgs['image1'] = ["else", 1];
imgs['image2'] = ["here", 2];
alert(imgs.length); // 0 => associative arrays are objects and don't have 
// an in-built length property.
for (var key in imgs) {
    console.log(imgs[key][0]);
    // or, preferably, imgs[key].someAttribute
}

// We can create a multi-dimensional array if all elements are of 
// the same type and have a similar purpose:
var arrConsistent = [];
arrConsistent[0] = [ 12, 24, 36 ];  // they are all numbers (multi-D array)
console.log(arrConsistent[0][2]); // 36
// We can then loop through every element more easily:
for (i=0; i < arrConsistent.length; i++) {
    for (var j=0; j < 3; j++) {
        arrConsistent[i][j] = arrConsistent[i][j] + 10;
    }
}

var arrInconsistent = [];
// creating an array of objects
arrInconsistent[0] = { "src": "images/some1.gif", "desc": "Great 1" };
arrInconsistent[1] = { "src": "images/some2.gif", "desc": "Great 2" };
// Although both elements are strings they have distinct purposes and meaning.

arrInconsistent[0].desc = "Changed description";
// This object (attribute) notation makes code easier to read (rather than 
// arrInconsistent[0][1]).
for (i=0; i < arrInconsistent.length; i++) {
    arrInconsistent[i].src = "deleted.gif";
    arrInconsistent[i].desc = "No more";
    console.log(arrInconsistent[i].desc);
}

[LearningCoder]

Thanks for the code. The problem I see with using the 'title' is when they are retrieved from the database, I use the name of the product, let's say 'tables' and put that into the title.

As you can guess, all my benches images have 'bench' as the title, all my table images have 'tables' as the title.

Here is the code I used:

var imgDetails = new Array();

$(function(){
	var imgSrcArray=[];
    var imgTxtArray=[]; 	
	
	$('.prod img').each(function(index) {
		imgSrcArray.push($(this).attr('src'));
        imgTxtArray.push($(this).attr('title'));
        alert(imgSrcArray[index]+imgTxtArray[index]);
		console.log(imgSrcArray[index]+imgTxtArray[index]);
	});
});

And here is what console.log() is returning to me.

core/product_files/bench1.jpgbenches

?page=products (line 21)

core/product_files/bench2.jpgbenches

?page=products (line 21)

core/product_files/bench3.jpgbenches

?page=products (line 21)

core/product_files/bench4.jpgbenches

?page=products (line 21)

core/product_files/bench5.jpgbenches

?page=products (line 21)

core/product_files/binstore1.jpgbin_stores

?page=products (line 21)

core/product_files/binstore2.jpgbin_stores

?page=products (line 21)

core/product_files/binstore3.jpgbin_stores

?page=products (line 21)

core/product_files/binstore4.jpgbin_stores

?page=products (line 21)

core/product_files/binstore5.jpgbin_stores

?page=products (line 21)

core/product_files/birdhouse1.jpgbird_housing

?page=products (line 21)

core/product_files/birdhouse2.jpgbird_housing

?page=products (line 21)

core/product_files/birdhouse3.jpgbird_housing

?page=products (line 21)

core/product_files/birdhouse4.jpgbird_housing

?page=products (line 21)

core/product_files/birdhouse5.jpgbird_housing

?page=products (line 21)

core/product_files/gate1.jpggates

The only other way I see how to do this, without hardcoding the text array is to store the title information into a field in the database and when retrieved, apply it to the corresponding image then I have some sort of values to work with in the attr('title') jquery code.

I don't want to edit my database just for a jquery effect as my prepared statements and other bits will have to be edited.

Is the only other alternative to hardcoding the textarray?

Regards,

LC.

[AndrewGSW]

Still not sure where the descriptions are coming from?? Are they stored in, and retrieved from, a database?

Anyway, although I mentioned title, I would generally prefer not to use it. You can use 'data-*' HTML5 attributes which are supported by the jQuery data() method.

<img id="thisone" src="whatever.gif" data-desc="Here be a description." height="100" width="100">

alert($('#thisone').data('desc'));

If you are using JS to create data-* attributes (after the page has loaded) then you need to use setAttribute(), or attr() in jQuery.

FWIW If you are running JS/jQuery code after the page has loaded you can just invent your own properties and attach them to DOM elements:

var myImage = document.getElementById("thisone");
// jQuery: var myImage = $('#thisone');
myImage.anyPropertyIFancy = "Ta Da!";

These properties can then be read directly by your code, but this is probably not relevant to your current code.

[LearningCoder]

Originally Posted by AndrewGSW

Still not sure where the descriptions are coming from?? Are they stored in, and retrieved from, a database?

No they haven't been written yet. I'm unsure about the approach. I'm reluctant to edit the database setup just to implement some jquery because I already have my prepared statements set up and it would mean editing a few files.

Although, I think it would make it a lot easier if I did do this, because when they are read out from the database, I can just target that field and apply it to the title.

Something like this:

PHP Code:

echo "<img title='{$row['description']}' />" 


Then that would give me access to the title value of each image...

Hmmm decisions decisions...

Regards,

LC.

[AndrewGSW]

You could store the descriptions in a simple JSON file:

PHP Code:

$file_desc = file_get_contents("somefolder/desc.json");
$json_desc =json_decode($file_desc, true); 


..but if you do this you might as well (perhaps..) store the image src's in this same file/object. This is not that different from hard-coding the information in the page, but does allow you to modify it separately. Anyway, just a consideration.

If the image descriptions are generally relevant to the images and, therefore, might be useful on other occasions (in other pages) then you could store them in the database. Anyway, I'm sure you are considering this already

I would still consider looking to data-desc rather than title, as you might decide to use the title at a later date:

PHP Code:

echo "<img data-desc='{$row['description']}'>"; 


[LearningCoder]

It's a relatively simple site. In total there are 6 pages (just html template files) which are loaded in with PHP.

Having said that, at the moment when they hover over the image on the products page, I want it to obviously show the jquery effect. But when they click it, it just opens the image into a new window to show the larger version, as you would expect.

Would be quite good if when they actually clicked it, I open the link to a template file showing the descriptions and all information to do with that individual product. Kinda like when you go on Argos or something, you click a product and it goes into a new page loading in just the content to do with that product.

Oh god this is getting deep.

At this moment in time, I'm very much considering to edit the database and retrieve it into the data-desc attribute.

Can't seem to find much documentation on data-desc....

Is it a new HTML 5 attribute?

Edit: Yep going to go with adding an extra column in my table. Just gone through and I've only got to modify the query and slightly modify the script which retrieves/displays the products info to compensate for the data-desc. May as well go for it, should prove a good challenge!

Regards,

LC.

[AndrewGSW]

You can read about data-* in the jQuery docs for data() or here.

[LearningCoder]

Just reading through the second link there....will I need to change my doctype to the html5 one?

Also, while i'm posting, is data- supported by ALL major browsers; ie,ff,chrome,opera and safari? I'll carry on reading, might give me some info on the site about it.

Edit: hmm just got to the bottom and read that data- is supported in all major browsers except IE. Darned IE, there's always one!

Might have to be the title attribute, it can always be updated to a data- attribute once it has become a standard.

Anyone know how far away it is from actually being implemented as a standard???

Regards,

LC.

[AndrewGSW]

There's a support table here. I believe the most useful aspects would also work even in older browsers.

PS That's a very useful site