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("

div>
<img id='pic' align='middle'>");

var series = []; console.log(widgetid);

   var obj = {};
   obj["name"] = "";
   obj["source"] = "";
   series.push(obj);

   for (i = 0; i < series.length; i++) {
       var name = series[i].name.replace(/ /g, "_");
       $('#tabs').append('<button class="button" onclick="change(id)" id="' + name + '" ">' + series[i].name + '</button>');
   }

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

");

   function change(id) {
       for (i = 0; i < series.length; i++) {
           document.getElementById(series[i].name.replace(/ /g, "_")).style.backgroundColor = "#b36e14"; //saddle

       }
       document.getElementById(id).style.backgroundColor = "#89540F"; //darker

       $(".pics").hide();
       $("#" + id.replace(/ /g, "_") + "-pic").show();

   }

</script>