Widget:PhotoTabs: Difference between revisions

From Unforgotten Realms Wiki
Jump to navigationJump to search
imported>Pillowkeeper
No edit summary
imported>Pillowkeeper
No edit summary
Line 57: Line 57:
     }
     }
     $("#tabs" + widgetid +" .pics").hide();
     $("#tabs" + widgetid +" .pics").hide();
     $("#" + series[0].name.replace(/ /g, "_") + "-pic").show();
     $("#" + series[0].name.replace(/ /g, "_") + widgetid + "-pic").show();
     document.getElementById(series[0].name.replace(/ /g, "_") + widgetid).style.backgroundColor = "#89540F";
     document.getElementById(series[0].name.replace(/ /g, "_") + widgetid).style.backgroundColor = "#89540F";
     $("#tabs" + widgetid +" .button:last").after("<br><br>");
     $("#tabs" + widgetid +" .button:last").after("<br><br>");
Line 66: Line 66:


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


         $("#tabs" + widgetid +" .pics").hide();
         $("#tabs" + widgetid +" .pics").hide();

Revision as of 02:17, 29 May 2017

<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 =

$('script').last().parent().append("


");

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


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

");
   function change(id) {
       for (i = 0; i < series.length; i++) {
           document.getElementById(series[i].name.replace(/ /g, "_") + widgetid).style.backgroundColor = "#b36e14"; //saddle
       }
       document.getElementById(id + widgetid).style.backgroundColor = "#89540F"; //darker
       $("#tabs" + widgetid +" .pics").hide();
       $("#" + id.replace(/ /g, "_") + widgetid + "-pic").show();
   }

</script>