Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Card flip #16

Merged
merged 3 commits into from

2 participants

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
12 src/www/css/cardflipper.css
@@ -1,8 +1,8 @@
-#cards {
+.cards {
height: 308px;
}
-#cube {
+.cube {
display: block;
position: relative;
margin: 10px;
@@ -11,7 +11,7 @@
-webkit-perspective: 1000;
}
-#cardFront {
+.cardFront {
position: absolute;
height: 308px;
width: 220px;
@@ -31,7 +31,7 @@
transition: all 1s ease-in-out;
}
-#cardBack {
+.cardBack {
position: absolute;
height: 308px;
width: 220px;
@@ -52,12 +52,12 @@
transition: all 1s ease-in-out;
}
-#cube.rotate #cardFront{
+.cube.rotate .cardFront{
-webkit-transform: rotateY(180deg);
z-index:200;
}
-#cube.rotate #cardBack{
+.cube.rotate .cardBack{
z-index:300;
-webkit-transform: rotateY(0deg);
}
View
21 src/www/index.html
@@ -12,7 +12,8 @@
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-list.css">
<link rel="stylesheet" href="css/style.css">
-
+ <link rel="stylesheet" href="css/cardflipper.css">
+
</head>
<body>
@@ -136,13 +137,17 @@
</ul>
</div>
<div class="span8">
- <div id="logos">
- <a id="cube" href="#">
- <img id="cardFront" src="{{card_image}}" />
- <img id="cardBack" src="{{card_reverse_image}}" />
- </a>
- </div>
- </div>
+ <div class="cards">
+ <div class="cube">
+ <img class="cardFront" src="{{card.card_image}}" />
+ {{#if card.card_reverse_image}}
+ <img class="cardBack" src="{{card.card_reverse_image}}" />
+ {{else}}
+ <img class="cardBack" src="assets/back.jpg" />
+ {{/if}}
+ </div>
+
+ </div>
</div>
</script>
View
23 src/www/js/main.js
@@ -71,16 +71,23 @@ function renderDetailTemplate(template, context){
detail.css("top", 0);
}
);
-
- $('#cube').hover(function(){
- $(this).addClass('rotate');
- },function(){
- $(this).removeClass('rotate');
- });
}
-
+
function renderCardDetail(card){
- renderDetailTemplate("#card-detail-template", {"card": card});
+ $(".cube").unbind('mouseenter mouseleave');
+ function cardPathWin(imgPath){
+ card.card_image = imgPath;
+
+ renderDetailTemplate("#card-detail-template", {"card": card});
+
+ $('.cube').hover(function(){
+ $(this).addClass('rotate');
+ },function(){
+ $(this).removeClass('rotate');
+ });
+ }
+
+ spectralKitten.getCardImagePath(card.card_image,cardPathWin,'');
}
/*series is a single series item*/
Something went wrong with that request. Please try again.