Widget:PhotoTabs

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

<img id="pic" align="middle"> <style>

button {
      background-color: #b36e14;
      border: 1px solid #64320d;
      outline: none;
      cursor: pointer;
      padding: 7px 16px;
      transition: 0.3s;
      display: inline;
      color: white;
      height: 31px;
  }
   .button {
       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 series = [];

   var obj = {};
   obj["name"] = "";
   obj["source"] = "";
   obj["width"] = "";
   obj["height"] = "";
   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='" + series[i].width + "' height='" + series[i].height + "'>");
   }
   $(".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>