Widget:CampaignCards: Difference between revisions
imported>Pillowkeeper No edit summary |
imported>Pillowkeeper No edit summary |
||
| Line 21: | Line 21: | ||
console.log(series1[0].image); | console.log(series1[0].image); | ||
$(".campaign-holder").append('<div onClick="openCard(this)" data-height="' + series1[i].height + '" style="text-align:initial;" class="campaignbox" id="' + series1[i].key + '"><div class="campaignbox-card"><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">' + series1[i].content + '</div></div>'); | $(".campaign-holder").append('<div onClick="openCard(this)" data-height="' + series1[i].height + '" style="text-align:initial;" class="campaignbox" id="' + series1[i].key + '"><div class="campaignbox-card"><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">' + series1[i].content + '</div></div>'); | ||
} | |||
function closeCard(card){ | |||
console.log(card); | |||
} | } | ||
function openCard(card){ | function openCard(card){ | ||
var id = card.id | var id = card.id | ||
var height = $(card).attr("data-height"); | var height = $(card).attr("data-height"); | ||
Revision as of 12:04, 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["content"] = ; obj["key"] = ""; obj["height"] = "";
series1.push(obj);
for(var i = 0; i < series1.length; i++){ console.log(series1[0].image);
$(".campaign-holder").append('
'+ series1[i].season +'
' + series1[i].name + '
');
}
function closeCard(card){ console.log(card); }
function openCard(card){
var id = card.id
var height = $(card).attr("data-height");
if(!$("div#" + id).hasClass("opened")){
$("div#" + id + " div:not('.campaignbox-content')").fadeToggle('slow');
$(".campaignbox:not('div#" + id + "')").hide();
$("div#" + id).animate({width:'650px', height: height}, function(){
$(".campaignbox:not('div#" + id + "')").fadeOut();
});
$("div#" + id + " div:not('.campaignbox-content')").hide('slow');
$("div#" + id + " .campaignbox-content").show('slow');
$("div#" + id).toggleClass("opened");
}
}
</script>
<style> .character-portrait {
object-fit: cover; width: 60px; height: 125px; margin: 3px;
} .campaignbox.opened {
width: 650px; height: 184px; border: 3px solid white; border-radius: 10px; overflow: hidden; display: inline-block; background: rgb(33, 33, 33); margin: 8px;
} .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-card {
cursor: pointer;
} .campaignbox-image {
width: 100%; opacity:0.85; margin-bottom: -5px;
} .campaignbox-text {
padding: 0.01em 5px; color: white; text-align: center;
} .campaignbox-content {
display: none; color:white; padding: 16px; }
</style>
