Select sections from JSON via HTML5 attributes and iterate

Select sections from JSON via HTML5 attributes and iterate

by Andrew Pougher

HTML

<h2></h2><a href="#" data-jsonproperty="fashion">Fashion</a>

<a href="#" data-jsonproperty="beauty">Beauty</a>

<a href="#" data-jsonproperty="wedding">Wedding</a>

<div id="albumPhotosList"></div>

<div id="fullalbum"></div>

CSS

#albumPhotosList{border-top:3px solid #ddd}
#albumPhotosList img { display:inline-block; float:left;margin:4px;clear:all}
#albumPhotosList  span{position:absolute;margin-left:-10%;color:white;}

JavaScript

var pics = [ // json wrap namer
 //
 {
   "fashion":[
      {
         "alt":"Album1",
          "width" : "150", "src":"http://images3.wookmark.com/266762_tumblr_mnu25rktj61ro1zebo1_500.jpg",
         "class":"albumItem",
         "id":"FashionAlbum1",
         "album":[
            {
               "alt":"albumImg1",
               "src":"http://thumbpress.com/wp-content/uploads/2011/11/this-is-how-we-do-it.gif",
               "id":"FashionSubFolder1Img1"
            },
            {
               "alt":"albumImg2",
               "src":"http://images3.wookmark.com/266762_tumblr_mnu25rktj61ro1zebo1_500.jpg",
               "id":"FashionSubFolder1Img2"
            }
         ]
      }
   ],
   "beauty":[
      {
         "alt":"Album1",
          "width" : "150", "src":"http://images2.wookmark.com/267766_tumblr_mocaf2myso1r46py4o1_1280.jpg",
         "class":"albumItem",
         "id":"BeautyAlbum1",
         "album":[
            {
               "alt":"albumImg1",
               "src":"http://images2.wookmark.com/267766_tumblr_mocaf2myso1r46py4o1_1280.jpg",
               "id":"BeautySubFolder1Img1"
            },
            {
               "alt":"albumImg2",
               "src":"http://images3.wookmark.com/266762_tumblr_mnu25rktj61ro1zebo1_500.jpg",
               "id":"BeautySubFolder1Img2"
            }
         ]
      }
   ],
   "wedding":[
      {
         "alt":"Album1",
          "width" : "150", "src":"http://31.media.tumblr.com/49be49b5e637e2e726811df7b7aa4bca/tumblr_mu6ui51FL71ra8thso1_400.gif",
         "class":"albumItem",
         "id":"WeddingAlbum1",
         "album":[
            {
               "alt":"albumImg1",
               "src":"http://thumbpress.com/wp-content/uploads/2011/11/chewbacca-wink.gif",
               "id":"WeddingSubFolder1Img1"
            },
            {
               "alt":"albumImg2",
               "src":"http://images2.wookmark.com/266821_tumblr_mn3a90g2pu1rbaqo5o1_500.jpg",
              ...