Widget:CampaignCards

<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["description"] = ;
 obj["key"] = "";
 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="' + series1[i].playlist + '"> 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) {
   console.log(card);
   $("div.campaignbox-card").hide();
   $("div.campaignbox-content").show();
 }

 function closeCard(card) {
   console.log(card);
   $("div.campaignbox-card").show();
   $("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;

} </style>