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.

Streamline image gallery data input

in my little homemade picture gallery i find it difficult to accurately put the information about each picture into the correct place in the HTML doc.
each image is contained within a div, and i have dozens of them. each picture has data associated with it (title, finename, item #, caption, availability and cost), and each item has to go in the right place in the div. and i go bug-eyed trying to keep track of where i am while scrolling around.

it would be nice if i could set up a table or an array in my HTML doc itself, and just plop in the new info on a new row, and have a JavaScript or jQ routine grab the pieces of info and set them up in a new div.

after listening to crockford talk about security, i think i want to stay away from databases, and just stick to JS or jQ. but i don't know how to approach this problem.

i have a rough understanding of some javascript, and a beginners of jQ. and i like both of them. i guess in the back of my mind i was thinking along the lines of scripts that would grab a piece of data (from an array or table) and using something like innerHTML. paste it in the div.

i have been learning about arrays since i read your excellent suggestions.
i am usually wrong when i make a guess, but i think an array will work for me best (it seems the simplest data input format, and data retrieval also).

i have started working it into my HTML doc. but before i get too far along, i will need to explore how to insert this tabulated data into a div, that is, in the correct places in the div.

my webpage is pretty simple. i have 3 columns and 5 rows of thumbnails on the left side of the page, each one is a button with an image (thumb) on it. when a thumb is clicked, a function displays a larger version of the thumb in a div on the right side of the page. no links. but i have to have as many div's for the big pictures as for the buttons. maybe that isn't the best way.

in writing this i realize that i have always been apprehensive about creating "objects", and maybe your first suggestion is even better. i like the text being next to the, field i guess. this is long winded so i will end it. any thoughts on placing object fields into div fields ?

first off, that was very kind of you. and i have begun to study it. i can immediately see it is better than mine. just so you don't think i have written in asking for you to do my coding for me, here is mine:

Oh, it gets slicker than that. You're right in picking up on "this" - pretty much any time you have lots of functions doing basically the same thing you know that it can be all collapsed into one using the this keyword.

And what you can also do is iterate over your object and make the buttons dynamically, so that you never have to worry about your javascript and your html lining up. Just add another object to your "table" and the js does the rest.

3- regarding the getElementById : document.getElementById("tit").innerHTML=fotos[thepic].title;
am i right in that the first part document.getElementById("tit") means get the element with the id "tit" ?

and that the second part .innerHTML=fotos[thepic].title; means do this with it ?

not yet. All it's saying is that this function will accept one parameter, like a variable, hereby known as "thepic" which takes the value of whatever was passed to it (in your example, the string "cat")

when you say "you are saying: find the fotos object, and inside that, whatever object corresponds" then i take it to mean that i don't have to use new before fotos to make it an object. and that the things in the curly braces separated by commas are objects too. everything is an object.