jdo jdo - 6 months ago 10
HTML Question

JSON Create a unique link

Sorry for the wrong use of tags, this is my first post here so I'm not used to how it's working.
I'll try to be more specific:

I have a couple of objects like this:

var products = [
{
"id": 1,
"name": "Chair",
"thumbnail": "img/products/1.jpg"
},

{
"id": 2,
"name": "Car",
"thumbnail": "img/products/2.jpg"
}


And then I write them to a div named "objects":

document.getElementById("objects").innerHTML =

'<div class="item">' +
'<a id="fade" href="#">' + '<img src=' + products[0].thumbnail + ' /></a>' +
"<br>" + products[0].name + '</a>' + '</div>' +

'<div class="item">' +
'<a id="fade_2" href="#">' + '<img src=' + products[1].thumbnail + ' /></a>' +
"<br>" + products[1].name + '</a>' + '</div>' ;


What I want is when I click on an image, the images disappear and another div is visible instead like this:

$("#fade").click(function(){
$("#content").fadeOut(400);
$("#obj_1").fadeIn(400); });


I hope I've been more detailed of what I'm trying to achieve.

Answer

from what i understood I think you mean something like this?

http://jsfiddle.net/w7sL4b6y/

I made it using lists because I fail to see the practicality of loading them in arrays unless you want to load them asynchronously, which I also don't see why you would. So let me know if this is what you are looking for.

So the unordered lists are for the galleries (Also set the the image sizes in css)

  <ul id="gallery">
     <li><a><img></a></li> // One image entry
  </ul>

And they will appear in the spectacle div when selected

 <div id="spectacle"></div>

(This is as per my jsfiddle)

Comments