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); | ||
$('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>


