Widget:PhotoTabs

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

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

 .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++) {
   
  
    $('#tabs').append('<a class="button" onclick="change(id)" id="' + series[i].name + '" ">' + series[i].name + '</a>');

$("#tabs .button:last").after("<img align='center' id='" + series[i].name + "' src='" + series[i].source + "' width='" + series[i].width + "' height='" + series[i].height + "'>");

 }

 for (i = 0; i < series.length; i++) {
   

$("#tabs .button:last").after("<img align='center' id='" + series[i].name + "' src='" + series[i].source + "' width='" + series[i].width + "' height='" + series[i].height + "'>");

 }

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

   }
   document.getElementById(id).style.backgroundColor = "#89540F"; //darker
   for (i = 0; i < series.length; i++) {
     if (series[i].name == id) {
       document.getElementById("pic").src = series[i].source;
       document.getElementById("pic").width = series[i].width;
       document.getElementById("pic").height = series[i].height;

     };
   }

 }

</script>