Widget:CampaignCards: Difference between revisions
imported>Pillowkeeper No edit summary |
imported>Pillowkeeper No edit summary |
||
| Line 91: | Line 91: | ||
</div> | </div> | ||
<div class="campaign-holder"></div> | |||
<script> | <script> | ||
var series1 = []; | |||
<!--{foreach from=$character key=key item=data}--> | |||
var obj = {}; | |||
obj["name"] = "<!--{$data.name|escape:'javascript'}-->"; | |||
obj["image"] = "<!--{$data.image}-->"; | |||
obj["season"] = "<!--{$data.season|escape:'javascript'}-->"; | |||
obj["content"] = <!--{$data.content}-->; | |||
obj["key"] = key; | |||
series1.push(obj); | |||
<!--{/foreach}--> | |||
for(var i = 0; i < series1.length; i++){ | |||
$("div.campaign-holder").append('<div onClick="openCard(this)" 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 openCard(card){ | function openCard(card){ | ||
var id = card.id | var id = card.id | ||
| Line 142: | Line 159: | ||
color:white; | color:white; | ||
} | } | ||
</style> | </style> | ||
Revision as of 21:05, 29 August 2017
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
Season 1
Band of Thieves
Band of Thieves
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
Season 1
Band of Thieves
Band of Thieves
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
Season 1
Band of Thieves
Band of Thieves
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
Season 1
Band of Thieves
Band of Thieves
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
Season 1
Band of Thieves
Band of Thieves
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" >
Season 1
Band of Thieves
Band of Thieves
<script> var series1 = [];
var obj = {};
obj["name"] = ""; obj["image"] = ""; obj["season"] = ""; obj["content"] = ; obj["key"] = key; series1.push(obj);
for(var i = 0; i < series1.length; i++){
$("div.campaign-holder").append('
'+ series1[i].season +'
' + series1[i].name + '
');
}
function openCard(card){ var id = card.id
$("div#" + id + " div:not('.campaignbox-content')").fadeToggle('slow'); if(!$("div#" + id).hasClass("opened")){ $(".campaignbox:not('div#" + id + "')").hide(); $("div#" + id).animate({width: '100%', height:'300px'}, function(){ $(".campaignbox:not('div#" + id + "')").fadeOut(); }); $("div#" + id + " div:not('.campaignbox-content')").hide('slow'); $("div#" + id + " .campaignbox-content").show('slow'); } else { $("div#" + id).animate({width: '200px', height: '184px'}, function(){ $(".campaignbox:not('div#" + id + "')").show(); $(".campaignbox:not('div#" + id + "')").fadeIn(); }); $("div#" + id + " div:not('.campaignbox-content')").show('slow'); $("div#" + id + " .campaignbox-content").hide('slow'); } $("div#" + id).toggleClass("opened"); } </script>
<style> .campaignbox {
width: 200px; height: 184px; border: 3px solid white; border-radius: 10px; overflow: hidden; display: inline-block; background: rgb(33, 33, 33);
} .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; }
</style>
