Widget:CampaignCards: Difference between revisions
imported>Pillowkeeper No edit summary |
imported>Pillowkeeper No edit summary |
||
| Line 11: | Line 11: | ||
obj["image"] = "<!--{$data.image|unescape:'entity'}-->"; | obj["image"] = "<!--{$data.image|unescape:'entity'}-->"; | ||
obj["season"] = "<!--{$data.season|escape:'javascript'}-->"; | obj["season"] = "<!--{$data.season|escape:'javascript'}-->"; | ||
obj["color"] = "<!--{$data.color|escape:'javascript'}-->"; | |||
obj["description"] = '<!--{$data.description|unescape:'html'}-->'; | obj["description"] = '<!--{$data.description|unescape:'html'}-->'; | ||
obj["key"] = "<!--{$data.key|escape:'javascript'}-->"; | obj["key"] = "<!--{$data.key|escape:'javascript'}-->"; | ||
| Line 21: | Line 22: | ||
for(var i = 0; i < series1.length; i++){ | for(var i = 0; i < series1.length; i++){ | ||
$(".campaign-holder").append('<div id="' + series1[i].key + '" class="campaignbox"> <div class="campaignbox-card" onClick="openCard(this)"> <img class="campaignbox-image" src="' + series1[i].image + '"> <div class="campaignbox-text"> <h4 style="margin:7px"> <b>' + series1[i].season + '</b></h4> <p style="margin-top:4px">' + series1[i].name + '</p> </div> </div> <div class="campaignbox-content"> <table class="campaignbox-content-topbar"> <tr> <td> <span class="campaignbox-content-topbar-back" onClick="closeCard(this)"><i style="float:left;" class="fa fa-arrow-left fa-2x"></i> </span> </td> <td> <span class="campaignbox-content-topbar-name" style="color: | $(".campaign-holder").append('<div id="' + series1[i].key + '" class="campaignbox"> <div class="campaignbox-card" onClick="openCard(this)"> <img class="campaignbox-image" src="' + series1[i].image + '"> <div class="campaignbox-text"> <h4 style="margin:7px"> <b>' + series1[i].season + '</b></h4> <p style="margin-top:4px">' + series1[i].name + '</p> </div> </div> <div class="campaignbox-content"> <table class="campaignbox-content-topbar"> <tr> <td> <span class="campaignbox-content-topbar-back" onClick="closeCard(this)"><i style="float:left;" class="fa fa-arrow-left fa-2x"></i> </span> </td> <td> <span class="campaignbox-content-topbar-name darkCrystal" style="color:' + series1[i].color + '">' + series1[i].name + '</span> </td> <td> <span class="campaignbox-content-topbar-date">' + series1[i].date + '</span> </td> </tr> </table> <p class="campaignbox-content-description">' + series1[i].description + '</p> <p class="campaignbox-content-characters">'+ series1[i].characters +'</p> <table class="campaignbox-content-bottombar"> <tr> <td> <a href="' + series1[i].playlist + '"> <span class="campaignbox-content-bottombar-play"><i class="fa fa-youtube-play" aria-hidden="true"></i> Playlist</span></a> </td> </tr> </table> </div> </div>'); | ||
} | } | ||
Revision as of 20:48, 30 August 2017
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script> var series1 = [];
var obj = {};
obj["name"] = ""; obj["image"] = ""; obj["season"] = ""; obj["color"] = ""; obj["description"] = ; obj["key"] = ""; obj["date"] = ""; obj["characters"] = ""; obj["playlist"] = "";
series1.push(obj);
for(var i = 0; i < series1.length; i++){
$(".campaign-holder").append('
' + series1[i].season + '
' + series1[i].name + '
' + series1[i].description + '
'+ series1[i].characters +'
| <a href="' + series1[i].playlist + '"> </a> |
');
}
$(".campaignbox-content-characters a").each(function() { var title = $(this).attr("title"); console.log(title) $(this).removeAttr("title");
$(this).wrap("
$(this).after("" + title + ""); });
function reset(e) { $(e.currentTarget).find("span.campaignbox-content-characters-characterbox-tooltip").hide(); }
function move(e) { $(e.currentTarget).find("span.campaignbox-content-characters-characterbox-tooltip").css("top", e.clientY + 10); $(e.currentTarget).find("span.campaignbox-content-characters-characterbox-tooltip").css("left", e.clientX + 10); $(e.currentTarget).find("span.campaignbox-content-characters-characterbox-tooltip").show(); }
function openCard(card) {
$("div.campaignbox").animate({width:"500px"}, function() {
$("div.campaignbox-card").fadeOut("slow");
$("div.campaignbox-content").show();
})
}
function closeCard(card) {
$("div.campaignbox").animate({width:"200px"}, function() {
$("div.campaignbox-card").fadeIn("slow");
$("div.campaignbox-content").hide();
});
}
</script>
<style> .campaignbox-content-topbar-back:hover {
cursor: pointer; color: saddlebrown;
}
.campaignbox-content-topbar {
width: 100%;
}
.campaignbox-content-topbar-name a {
color: inherit;
} .campaignbox {
width: 200px; height: 184px; border: 3px solid white; border-radius: 10px; overflow: hidden; display: inline-block; background: rgb(33, 33, 33); margin: 8px;
}
.campaignbox-image {
width: 100%; opacity:0.85; margin-bottom: -5px;
}
.campaignbox-content-characters-characterbox-portrait {
object-fit: cover; width: 60px; height: 125px; margin: 3px;
}
.campaignbox-content-characters-characterbox {
display:inline-block;
}
.campaignbox-content-characters-characterbox-tooltip {
overflow:auto; background: rgba(33,33,33,1); border-radius:5px; border: 2px solid #8b4513; padding: 5px 8px; color: white; font-family: sans-serif; font-size: 14px; max-width: 400px; max-height: 400px; white-space:pre-line; z-index: 200; position: fixed; display: none;
} </style>
