Widget:CampaignCards

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>

<script> $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">');

var series1 = [];

var obj = {};

 obj["name"] = "";
 obj["image"] = "";
 obj["season"] = "";
 obj["color"] = "";
 obj["description"] = ;
 obj["key"] = "";
 obj["date"] = "";
 obj["height"] = "";
 obj["characters"] = "";
 obj["playlist"] = "";

 series1.push(obj);

for(var i = 0; i < series1.length; i++){

$(".campaign-holder").append('

<img class="campaignbox-image" src="' + series1[i].image + '">

' + series1[i].season + '

' + series1[i].name + '

' + series1[i].name + '

' + series1[i].date + '

' + series1[i].description + '

'+ series1[i].characters +'

<a href="http://youtube.com/' + series1[i].playlist + '"> Playlist</a>

');

}

$(".campaignbox-content-characters a").each(function() { var title = $(this).attr("title"); $(this).removeAttr("title");

$(this).wrap("

");

$(this).after("" + title + ""); });

$(".campaignbox-text a").each(function() { var text = $(this).text(); $(this).after("" + text + ""); $(this).remove(); });

$(".campaignbox-content-topbar-name a").each(function() { $(this).removeAttr("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) {

var id = $(card).parent().attr("id"); var ht = $(card).attr("data-height"); $(".campaignbox:not('div#" + id + "')").hide();

   $("div#" + id + " .campaignbox-card").fadeOut("slow");
    $("div#" + id + ".campaignbox").animate({width:"662px", height: ht}, function() {
   $("div#" + id + " .campaignbox-content").show(400);
   });

 }

 function closeCard(card) {

var id = $(card).closest(".campaignbox").attr("id"); $(".campaignbox:not('div#" + id + "')").fadeIn();

   $("div#" + id + " .campaignbox-content").hide();
     $("div#" + id + ".campaignbox").animate({width:"185px", height:"200px"}, function() {
   $("div#" + id + " .campaignbox-card").fadeIn("slow");
   });
 }

</script>

<style> .darkCrystal {

   font-family: darkCrystal;
   -webkit-text-stroke: 1px #f5f5f5;
   font-size: 40px;
   letter-spacing: 3px;
   line-height: 40px;

} .campaignbox-text {

   padding:10px;

} .campaignbox-card {

   cursor: pointer;

} .campaignbox-content-topbar-back:hover {

   cursor: pointer;
   color: #9c6011;

}

.campaignbox-content-topbar {

 width: 100%;

}

.campaignbox-content-topbar-name a {

 color: inherit;
 text-decoration: none;

} .campaignbox {

 width: 185px;
 height: 200px;
 border: 2px solid #F9E4CA;
 border-radius: 10px;
 overflow: hidden;
 display: inline-block;
 background: rgb(33, 33, 33);
 margin: 8px;
 vertical-align: top;

}

.campaignbox-image {

 width: 100%;
 opacity:0.85;
 margin-bottom: -5px;

} .campaignbox-content {

 padding: 10px;
 text-align: initial;
 display:none;

} .campaignbox-content-characters-characterbox-portrait {

 object-fit: cover;
 width: 60px;
 height: 125px;
 margin-bottom: 2px;

}

.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 #F9E4CA;
   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;

}

.campaignbox-content-topbar-date {

 text-align: right;
 width: 130px;

} </style>