Widget:CampaignCards: Difference between revisions
imported>Pillowkeeper No edit summary |
imported>Pillowkeeper No edit summary |
||
| Line 60: | Line 60: | ||
</div> | </div> | ||
</div> | </div> | ||
<div onClick="openCard(this)" class="campaignbox" id="test4"> | |||
<div class="campaignbox-card"> | |||
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" > | |||
<div class="campaignbox-text"> | |||
<h4 style="margin:7px"> | |||
<b>Season 1</b></h4> | |||
<p style="margin-top:4px">Band of Thieves</p> | |||
</div> | |||
</div> | |||
<div class="campaignbox-content"> | |||
<h1 class="darkCrystal"> | |||
Band of Thieves | |||
</h1> | |||
</div> | |||
</div> | |||
<div onClick="openCard(this)" class="campaignbox" id="test5"> | |||
<div class="campaignbox-card"> | |||
<img class="campaignbox-image" src="https://stream.urealms.com/img/watch/s1c1.jpg" > | |||
<div class="campaignbox-text"> | |||
<h4 style="margin:7px"> | |||
<b>Season 1</b></h4> | |||
<p style="margin-top:4px">Band of Thieves</p> | |||
</div> | |||
</div> | |||
<div class="campaignbox-content"> | |||
<h1 class="darkCrystal"> | |||
Band of Thieves | |||
</h1> | |||
</div> | |||
</div> | |||
<script> | <script> | ||
Revision as of 20:49, 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> 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>


