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++) { 

var name = series[i].name.replace(/ /g,"_");

    $('#tabs').append('<a class="button" onclick="change(id)" id="' + name + '" ">' + series[i].name + '</a>');
 }

 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).style.backgroundColor = "#b36e14"; //saddle

 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
   

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

 }

</script>