Dynamic Json jquery multi-level image gallery

Question

I'm building the site with multi-level image gallery. I use json to store the data: it looks like this:

{
   "fashion":[
      {
         "alt":"Album1",
         "src":"img/gsp_sait-03_02.png",
         "class":"albumItem",
         "id":"FashionAlbum1",
         "album":[
            {
               "alt":"albumImg1",
               "src":"img/gsp_sait-03_02.png",
               "id":"FashionSubFolder1Img1"
            },
            {
               "alt":"albumImg2",
               "src":"img/gsp_sait-03_03.png",
               "id":"FashionSubFolder1Img2"
            }
         ]
      }
   ],
   "beauty":[
      {
         "alt":"Album1",
         "src":"img/gsp_sait-03_02.png",
         "class":"albumItem",
         "id":"BeautyAlbum1",
         "album":[
            {
               "alt":"albumImg1",
               "src":"img/gsp_sait-03_02.png",
               "id":"BeautySubFolder1Img1"
            },
            {
               "alt":"albumImg2",
               "src":"img/gsp_sait-03_03.png",
               "id":"BeautySubFolder1Img2"
            }
         ]
      }
   ],
   "wedding":[
      {
         "alt":"Album1",
         "src":"img/gsp_sait-03_02.png",
         "class":"albumItem",
         "id":"WeddingAlbum1",
         "album":[
            {
               "alt":"albumImg1",
               "src":"img/gsp_sait-03_02.png",
               "id":"WeddingSubFolder1Img1"
            },
            {
               "alt":"albumImg2",
               "src":"img/gsp_sait-03_03.png",
               "id":"WeddingSubFolder1Img2"
            }
         ]
      }
   ]
}

I can't find the way how to choose the right category. Let's say user clicks on the beauty, so I need to choose "beauty" section, I use this function :

$.getJSON("data/data.json", function(data) {
    $.each(data.beauty, function(i, data) {
        var img = "<li><img class='" + data.class + "' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /></li>";
        $(".albumsList").append(img);
    });
});

I need to make it dynamic. I tried to insert a variable that holds the category, instead of "beauty" in line:

 $.each(data.beauty, function (i, data)

But it doesn't work, or I did it in the wrong way. Is there any way how I can make it dynamic,maybe my json file is not correct for such needs?

And the second thing, when the user chooses the album,("beauty" section) I want to show all pictures that inside this album.

$.getJSON("data/data.json", function(data) {
    $.each(data.beauty[0].album, function(i, data) {
        var img = "<li><img ' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /></li>";
        $(".albumPhotosList").append(img).hide().fadeIn(500);
    });
});

But the problem is the same, I need it to be dynamic.

I would very appreciate your help.I got really stacked. Thank you vary much!

does your js console reports any error on the first snippet you tried? — Fabrizio Calderan
– Fabrizio Calderan, Commented Oct 18, 2012 at 12:12
Just googled and try using following stackoverflow.com/questions/5189387/… — Jaswinder Singh Narula
– Jaswinder Singh Narula, Commented Oct 18, 2012 at 12:16

Sang Suantak · Accepted Answer · 2012-10-18 12:36:46Z

For the first problem, when the user clicks the link you can pass the link text (or through custom attribute) the json property to look for. E.g., let's say your links look like this:

<a href="#" data-jsonproperty="fashion">Fashion</a>
<a href="#" data-jsonproperty="beauty">Beauty</a>
<a href="#" data-jsonproperty="wedding">Wedding</a>

For the first problem, you could write your script like this:

$(".link").click(function() {
    var jsonProperty = $(this).data("jsonproperty");
    $.getJSON("data/data.json", function(data) {
        $.each(data[jsonProperty], function(i, data) {
            var img = "<li><img class='" + data.class + "' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /></li>";
            $(".albumsList").append(img);
        });
    });
});

You can solve the second problem similarly:

$.getJSON("data/data.json", function(data) {
    $.each(data[jsonProperty][0].album, function(i, data) {
        var img = "<li><img ' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /></li>";
        $(".albumPhotosList").append(img).hide().fadeIn(500);
    });
});

Collectives™ on Stack Overflow

Dynamic Json jquery multi-level image gallery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related