Iterate JSON - array and return matching group images

Iterate JSON - array and return matching group images

by Andrew Pougher

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">
<div id="shows">
  <ul>
    <li class="link">Gallery 1</li>
    <li class="link">Gallery 2</li>
  </ul>
</div>

<div id="items">
  <ul class="list-inline"></ul>
</div>

CSS

.link {
  border: 2px solid #eee;
  padding: 3px;
  width: 90px;
  margin: 3px;
  cursor: pointer
}

li {
  border: 1px solid #eee
}

JavaScript

var lib = {
  "Gallery 1": {
    "slides": ["A", "B", "C", "D"],
    "bgs": ["<img src='http://placehold.it/100/3cdeccc/222222/&test=1' />", "", "<img src='http://placehold.it/100/3cdeccc/222222/&test=2' />", ""]
  },
  "Gallery 2": {
    "slides": ["Slide 1 Text", "Slide 2 Text", "Slide 3 Text"],
    "bgs": ["", "<img src='http://placehold.it/100/3cdeccc/222222/&test=3' />", ""]
  }
};

var items_ul = $('#items ul');

$('#shows li.link').bind('click', function() {
  var galleryname = $(this).text();
  var slides = (lib[galleryname].slides);
  var bgs = (lib[galleryname].bgs);
  items_ul.html('');
  $.each(slides, function(i) {
    var bg = bgs[i];
    items_ul.append('<li>' + this + '</li><li>' + bg + '</li>');
  });
});