If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

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:

Code:

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;

"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS

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.

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.

..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']}'>";

"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
Validate your HTML and CSS

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!