Widget:PhotoTabs

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>

<style> [id*='tabs'] button {

      background-color: #b36e14;
      border: 1px solid #64320d;
      outline: none;
      cursor: pointer;
      padding: 0px 12px;
      transition: 0.3s;
      display: inline;
      color: white;
      height: 31px;
  }
   .button {
       font-size: 12px;
       color: white;
       border: 1px solid #64320d;
       background-color: #b36e14;
       font-family: "Arial";
       letter-spacing: .5px;
       padding: 5px;
       text-align: center;
       border-top: none;
       display: inline-block;
   }

   .button+.button {
       border-left: none;
   }

</style>

<script> var widgetid = $("#tabs #identifier").length;

$('script').last().parent().append("

");

var series = [];

   var obj = {};
   obj["name"] = "";
   obj["source"] = "";
   series.push(obj);
   for (i = 0; i < series.length; i++) {
       var name = series[i].name.replace(/ /g, "_");
       name = name.replace(/\'/g, "");
       $('#tabs[data-number*="' + widgetid + '"]').append('<button class="button" onclick="change(this)" id="' + name + '" ">' + series[i].name + '</button>');
   }

   for (i = 0; i < series.length; i++) {
       var name = series[i].name.replace(/ /g, "_");
       name = name.replace(/\'/g, "");
       $("#tabs[data-number*='" + widgetid + "']" + " .button:last").after("<img class='pics"+ widgetid + "' align='center' id='" + name + "-pic' src='" + series[i].source + "' width='200'>");
   }
   $("#tabs[data-number*='" + widgetid + "']" + " img").hide();
   $("#tabs[data-number*='" + widgetid + "']" + " img:last").show();

$("#tabs[data-number*='" + widgetid + "']" + " .button:first").css('background-color', '#89540F');

   $("#tabs[data-number*='" + widgetid + "']" + " .button:last").after("

");

   function change(val) {

var num = $(val).parent().attr("data-number");

       $("#tabs[data-number*='" + num + "']" + " .button").css('background-color', '#b36e14');
       $("#tabs[data-number*='" + num + "']" + " #" + val.id).css('background-color', '#89540F'); //darker 

console.log(widgetid);

       $(".pics" + num).hide();
       $("#tabs[data-number*='" + num + "']" + " #" + val.id + "-pic").show();

   }

</script>