Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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.

    can anyone give me a few thoughts or pointers ?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>
    Last edited by xelawho; 01-01-2013 at 02:04 PM. Reason: because I cannot spell

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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

  • #4
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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 ?

  • #5
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i think i am getting it figured out. if i get stumped i may ask for help again.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>

  • #7
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #8
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>

  • Users who have thanked xelawho for this post:

    pratto (01-01-2013)

  • #10
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.
    Last edited by pratto; 01-01-2013 at 07:31 PM.

  • #11
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    how do i note that the problem has been solved ?

  • #12
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts

    trying to understand the 10:56 a.m. code

    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 ?

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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
    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!

  • #14
    New Coder
    Join Date
    Jan 2013
    Location
    Florida
    Posts
    75
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #15
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •