title: Dynamic Json jquery multi-level image gallery
body: <p>I'm building the site with multi-level image gallery.
  I use json to store the data: it looks like this:</p>
  
  <pre><code>{
     "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"
              }
           ]
        }
     ]
  }
  </code></pre>
  
  <p>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 :</p>
  
  <pre><code>$.getJSON("data/data.json", function(data) {
      $.each(data.beauty, function(i, data) {
          var img = "&lt;li&gt;&lt;img class='" + data.class + "' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /&gt;&lt;/li&gt;";
          $(".albumsList").append(img);
      });
  });​
  </code></pre>
  
  <p>I need to make it dynamic.
  I tried to insert a variable that holds the category, instead of "beauty" in line: </p>
  
  <pre><code> $.each(data.beauty, function (i, data)
  </code></pre>
  
  <p>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?</p>
  
  <p>And the second thing, when the user chooses the album,("beauty" section) I want to show all pictures that inside this album. </p>
  
  <pre><code>$.getJSON("data/data.json", function(data) {
      $.each(data.beauty[0].album, function(i, data) {
          var img = "&lt;li&gt;&lt;img ' id='" + data.id + "' src='" + data.src + "' alt='" + data.alt + "' /&gt;&lt;/li&gt;";
          $(".albumPhotosList").append(img).hide().fadeIn(500);
      });
  });​
  </code></pre>
  
  <p>But the problem is the same, I need it to be dynamic.</p>
  
  <p>I would very appreciate your help.I got really stacked.
  Thank you vary much!</p>