Streamline image gallery data input

pratto · 01-01-2013, 01:46 PM

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.

can anyone give me a few thoughts or pointers ?

xelawho · 01-01-2013, 02:01 PM

it sounds to me like you need to set your data into objects (which is kind of js's version of a table). You can then access the object's properties using dot or square bracket notation.

If you are cycling through your images (like in a slideshow) it may be worth putting your objects into an array to make it easier to refer to them numerically.

Here's the basic setup, anyway:

Code:

<script>
var dog={title:"Fido", 
		filename:"Fido.jpg", 
		item:"3706", 
		caption: "woof!", 
		avail: "available"
		}
alert(dog.filename);
alert(dog["item"]);		
 </script>

xelawho · 01-01-2013, 02:18 PM

although if you are changing the image onclick, you may end up with an object of objects, and you can use the name of the sub-object to retrieve the data:

Code:

<script>
var fotos={
		dog:{title:"Fido", 
		filename:"Fido.jpg", 
		item:"3706", 
		caption: "woof!", 
		avail: "available"
		},
		cat:{title:"Whiskas", 
		filename:"Whiskas.jpg", 
		item:"9384", 
		caption: "meow!", 
		avail: "sold out"
		}
	}	
var pic1="dog";
var pic2="cat"		
alert(fotos[pic1].filename);
alert(fotos[pic2].caption);			
 </script>

That's the basics (or the easiest-to-maintain that I can see) - the finer points depend on how your page is set up and what you want to do

pratto · 01-01-2013, 03:32 PM

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 ?

pratto · 01-01-2013, 03:55 PM

i think i am getting it figured out. if i get stumped i may ask for help again.

xelawho · 01-01-2013, 03:56 PM

you shouldn't be shy about object - javascript is full of them, and once you get the hang of them they make it very easy to access information, provided you structure them right.

From the sounds of it, you're trying to do something like the following:

Code:

<!doctype html>
<html lang="en">
<head>
<style>
.thumb{
width:100px;
height:100px;
cursor:pointer;
}
#main{
width:200px;
height:200px;
display:none;
}
</style>	
	</head>
<body>
<script>
var fotos={
		dog:{title:"Fido", 
		filename:"http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg", 
		item:"3706", 
		caption: "woof!", 
		avail: "available"
		},
		cat:{title:"Whiskas", 
		filename:"http://www.sobi.org/photos/Cat/Mottle/OciCatB_004s.jpg", 
		item:"9384", 
		caption: "meow!", 
		avail: "sold out"
		}
	}	
	
function changePic(thepic){
document.getElementById("main").style.display="block";
document.getElementById("main").src=fotos[thepic].filename;
document.getElementById("tit").innerHTML=fotos[thepic].title;
document.getElementById("it").innerHTML=fotos[thepic].item;
document.getElementById("capt").innerHTML=fotos[thepic].caption;
document.getElementById("av").innerHTML=fotos[thepic].avail;
}	
		
 </script>
 <img class="thumb" src="http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg" onclick="changePic(this.id)" id="dog"/>
  <img class="thumb" src="http://www.sobi.org/photos/Cat/Mottle/OciCatB_004s.jpg" onclick="changePic(this.id)" id="cat"/>
  <img id="main"/>
  <div id="tit"></div>
  <div id="it"></div>
  <div id="capt"></div>
  <div id="av"></div>
</body>
</html>

pratto · 01-01-2013, 04:41 PM

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:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery WorkBook 2</title>

<style>
button:hover {border:2px solid blue;}
button:focus {border:2px solid salmon;}

div.large{width:480px;height:480px;position:absolute; top:300px;left:600px;}

</style>

</head>
<body>

<script src="jquery.js"></script>

<button type="button" id="C-small" onclick="()" style="position:absolute;top:50px;left:50px;width:125px;height:125px; background-image:url('C.jpg'); display:block;"></button>

<div id="C-large" class="large" style="background-image:url('C.jpg');display:none;"></div>

<button type="button" id="H-small" onclick="()" style="position:absolute;top:50px;left:200px;width:125px;height:125px; background-image:url('hotdog.jpg'); display:block;"></button>

<div id="H-large" class="large" style="background-image:url('hotdog.jpg');display:none;"></div>

<button type="button" id="D-small" onclick="()" style="position:absolute;top:50px;left:350px;width:125px;height:125px; background-image:url('dog-1.jpg'); display:block;"></button>

<div id="D-large" class="large" style="background-image:url('dog-1.jpg');display:none;"></div>

<button type="button" id="V-small" onclick="()" style="position:absolute;top:200px;left:50px;width:125px;height:125px; background-image:url('vil-20.jpg'); display:block;"></button>

<div id="V-large" class="large" style="background-image:url('vil-20.jpg');display:none;"></div>

<script>
$(document).ready(function() {
$("#C-large").show("fast");
});

</script>

<script>
$(function() {
$("#C-small").click(function() {
if ( $('#C-large').is(':hidden')){
$(".large").hide("slow");
$("#C-large").show("slow");}
});
});
</script>

<script>
$(function() {
$("#H-small").click(function() {
if ( $('#H-large').is(':hidden')){
$(".large").hide("slow");
$("#H-large").show("slow");}
});
});
</script>

<script>
$(function() {
$("#D-small").click(function() {
if ( $('#D-large').is(':hidden')){
$(".large").hide("slow");
$("#D-large").show("slow");}
});
});
</script>

<script>
$(function() {
$("#V-small").click(function() {
if ( $('#V-large').is(':hidden')){
$(".large").hide("slow");
$("#V-large").show("slow");}
});
});
</script>

</body>

</html>

please don't waste your time with it. it works, but it is clunky.

again thanks, and i will study yours and get back with you.

pratto · 01-01-2013, 05:27 PM

somehow my reply didn't get posted. i'll try again.

that is slick. very slick. i was able to easily add a new thumb and data and it still worked (usually my modifications break things).

i take it that within the variable foto, you made objects (dog group & cat group). each object contained within {}, and separated by a comma.

the other thing that i've never understood is "this". in your onClick functions:
onclick="changePic(this.id)" id="cat", does the "this.id" mean to use the id of the clicked element ?

it seems that you are saying to execute the function changePic, and go to the object in foto with the id "cat", and somehow "thepic" sorts it out. is "thepic" a parameter ?

i need to study it some more. but it is slick.

xelawho · 01-01-2013, 06:30 PM

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.

Taking the jQuery code you posted as a base...

Code:

<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style>
button:hover {border:2px solid blue;}
button:focus {border:2px solid salmon;}

.thumb{
width:125px;
height:125px;
background-size:cover;
}
#main{
width:480px;
height:480px;
display:none;
background-size:cover;
}

</style>	
</head>
<body>
<div id="btns"></div>  
  <div id="tit"></div>
  <div id="it"></div>
  <div id="capt"></div>
  <div id="av"></div>
  <div id="main"></div>
<script>
$(document).ready(function() {

var fotos={
		dog:{title:"Fido", 
		filename:"http://3.bp.blogspot.com/-rN0cMMTn_Mw/ToQ6VTghSOI/AAAAAAAAAfs/xl1XMFyn7Jo/s640/18_5_orig.jpg", 
		item:"3706", 
		caption: "woof!", 
		avail: "available"
		},
		cat:{title:"Whiskas", 
		filename:"http://www.sobi.org/photos/Cat/Mottle/OciCatB_004s.jpg", 
		item:"9384", 
		caption: "meow!", 
		avail: "sold out"
		}
	}	
	
$.each(fotos, function(index, value) { 
$("#btns").append("<button type='button' id='"+index+"' class='thumb'></button>");
$("#"+index).css('background-image', 'url("'+value.filename+'")');
});

$(".thumb").click(function() {
var el=$(this);
var thepic=el.attr("id");
$('#main').hide('slow', function() {
$("#main").css('background-image',el.css('background-image')).show("slow");
$("#tit").text(fotos[thepic].title);
$("#it").text(fotos[thepic].item);
$("#capt").text(fotos[thepic].caption);
$("#av").text(fotos[thepic].avail);
		});
	});
});
</script>
</body>
</html>

pratto · 01-01-2013, 07:26 PM

just as you said, it made it simpler. i believe that i will be busy for about a week trying to actually understand what you did. but it is the kind of thing i like to do.

and once i understand it, boy is my website going to get simpler. in one days chat with you my HTML coding got about 50% smaller.

muchas gracias senor, your guidance is much appreciated.

pratto · 01-01-2013, 07:34 PM

how do i note that the problem has been solved ?

pratto · 01-03-2013, 12:32 PM

i have done some reading about objects. but each time i think i am making a little progress, i look at your first coding example and say, but that is not what XEL did. and i remain stumped.

if i could ask a few fundamental questions re: your first code.

1- down in: onclick="changePic(this.id)" id="cat" on clicking, is the id referenced, or an object ?

2- up in: function changePic(thepic){ does "thepic" mean 'the referenced object' ?

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 ?

xelawho · 01-03-2013, 06:02 PM

ha, ha. No wonder you are getting stumped. Your questions don't have much to do with objects.

In this code:

Code:

onclick="changePic(this.id)" id="cat"

you are passing the string "cat" to the changePic function

Quote:

in: function changePic(thepic){ does "thepic" mean 'the referenced object' ?

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")

once we get to this bit:

Code:

fotos[thepic].title;

you are saying: find the fotos object, and inside that, whatever object corresponds to the "thepic" variable (so, cat), and inside that, whatever property corresponds to 'title'

question 3: you are correct in your assumptions.

hope that helps!

pratto · 01-03-2013, 06:29 PM

it does, it does. very much so.

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.

xelawho · 01-03-2013, 06:45 PM

Everything is an object. The window is an object, arrays are objects, functions are objects. And yet javascript is not, by most counts, an object-oriented language. Go figure.

You can use new if you have a constructor function. I find them clumsy, but they have their uses, especially if you are making lots of objects.

If you are looking for reading material this is a very comprehensive source:
https://developer.mozilla.org/en-US/...g_with_Objects