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;
 }
 

.button + .button {

border-left: none;

}

 .p {
   margin: 11px;
 }

</style>

<script>

 var series = [];

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

 var count = 0;

 for (i = 0; i < series.length; i++) {
   
   count = count + series[i].name.length;
   if (count > 25) {
     count = 0;

$('#tabs').append('

');

   }

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

   if (i == 0) {
     document.getElementById("pic").src = series[0].source;
     document.getElementById("pic").width = series[0].width;
     document.getElementById("pic").height = series[0].height;
     document.getElementById("pic").classList.add("thumbborder");
     document.getElementById(series[0].name).style.backgroundColor = "#89540F";
   }
 }

 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;
       document.getElementById("pic").classList.add("thumbborder");

     };
   }

 }

</script>