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>


