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 33: Line 33:


<script>
<script>
var widgetid = <!--{$widgetid}-->
var widgetid = <!--{$widgetid|default:'0'}-->
console.log(widgetid);
console.log(widgetid);
if(widgetid){
 
widgetid = <!--{$widgetid}-->
} else {
widgetid = 0;
}


$('script').last().parent().append("<div id='tabs"+ widgetid +"'></div><br>");
$('script').last().parent().append("<div id='tabs"+ widgetid +"'></div><br>");

Revision as of 02:09, 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 = console.log(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 + '" ">' + 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 + "-pic' src='" + series[i].source + "' width='200'>");
   }
   $("#tabs" + widgetid +" .pics").hide();
   $("#" + series[0].name.replace(/ /g, "_") + "-pic").show();
   document.getElementById(series[0].name.replace(/ /g, "_")).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, "_")).style.backgroundColor = "#b36e14"; //saddle
       }
       document.getElementById(id).style.backgroundColor = "#89540F"; //darker
       $("#tabs" + widgetid +" .pics").hide();
       $("#" + id.replace(/ /g, "_") + "-pic").show();
   }

</script>