ダイナミックにインポートされたイメージを使用したブートストラップモードのカードフリップ

Question

私はある種のカードゲームを作っています。私は自分のフレームワークとしてブートストラップ3を使用しています。それぞれのカードは、自分の列にあるカードのグリッドにあるデッキを持っています。

カードをクリックすると、カードの裏面がオーバーレイとして表示されます（Bootstrapsモーダルまたは同等のもの）。しかし、カードがクリック（またはタッチ）されると、それはフリップして、モーダルをトリガするためにクリックされた画像と同じ前面を表示する必要があります。それは、無限の回数だけ前後に反転することができるはずです。モーダルの外側または閉じるボタンをクリックすると、モーダルが閉じてデッキに戻ります。

画像にカードをかけることができます。そして、私は動的なコンテンツでモーダルを引き起こすことができます。しかし、私が理解できないことは、これを一緒に行う方法です。それで、カードごとに別々のモーダルを作成する必要はありません。

私はこの問題について数日前から私の髪を引っ張ってきました。そして、私は本当にこれをどうやって作るのかについて頭を落とすことはできません。私のjavascriptのスキルは非常に限られており、私はこれ（私は多くのオプションを試してみました）で私を助けるためのプラグインやコードの例を見つけることができません。

スニペットにグリッドが表示されます。データターゲット、モジュール、またはJavaScriptは含まれていませんが、まだ動作するものは見つかりませんでした。

アイデア？

main { 
 
    .container-fluid; 
 
    .text-center; 
 
    background: none; 
 
    header { 
 
    .container-fluid; 
 
    .text-center; 
 
    padding: 50px; 
 
    h1 { 
 
     font-weight: @font-weight-heading; 
 
    } 
 
    } 
 
    .cardColumns { 
 
    .make-row(); 
 
    .cCard { 
 
     .make-xs-column(4); 
 
     .make-sm-column(3); 
 
     .make-md-column(2); 
 
     padding: 10px; 
 
     img { 
 
     width: 100%; 
 
     height: auto; 
 
     .img-rounded; 
 
     modal-body-shadow: 0 4px 8px 0 #000; 
 
     transition: 0.3s; 
 
     } 
 
     img:hover { 
 
     modal-body-shadow: 0 8px 16px 0 #000; 
 
     } 
 
    } 
 
    } 
 
}

<main> 
 
    <div class="cardColumns"> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    <div class="cCard"> 
 
     <a href="#"> 
 
     <img src="img/card.jpg" alt="Perspiciatis"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</main>

Answer 1

これは、基本的にはちょうど半ばスピンで背景画像を変更します。

$(document).ready(function() { 
 
    initListeners(); 
 
}); 
 

 
function initListeners() { 
 
    $(".container").off(); 
 
    $(".container").on("click",function() { 
 
    $(".container").removeClass("toggle") 
 
    $(this).addClass("toggle"); 
 
    }); 
 
} 
 

 
/*var Cards; 
 
setTimeout(function() { 
 
    Cards = document.querySelectorAll(".container"); 
 
    for (let i = 0; i < (e = Cards.length); i++) 
 
    Cards[i].addEventListener("click", function(elem) { 
 
     for (let i = 0; i < (e = Cards.length); i++) 
 
     Cards[i].classList.remove('toggle'); 
 
     elem.target.parentElement.classList.add('toggle'); 
 
    }); 
 
}, 1);*/

.container { 
 
    perspective: 1000px; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.card { 
 
    margin: 5px; 
 
    width: 105px; 
 
    height: 150px; 
 
    background: #000; 
 
    transition: transform .35s linear; 
 
    transform: rotateX(180deg); 
 
    transform-style: preserve-3d; 
 
} 
 

 
.card::after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url(https://i.stack.imgur.com/gcRWf.png) center center; 
 
    background-size: cover!important; 
 
    transition: background 0.01s linear; 
 
    transition-delay: 0.175s; 
 
} 
 

 
.container.toggle .card { 
 
    transform: rotateX(0deg); 
 
} 
 

 
.container.toggle .card::after { 
 
    background: url(https://s-media-cache-ak0.pinimg.com/736x/f4/e3/97/f4e397ef5e0a4cd7cdbf30e65aa149c0.jpg) center center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="card"></div> 
 
</div> 
 
<div class="container"> 
 
    <div class="card"></div> 
 
</div> 
 
<div class="container"> 
 
    <div class="card"></div> 
 
</div> 
 
<div class="container"> 
 
    <div class="card"></div> 
 
</div> 
 
<div class="container"> 
 
    <div class="card"></div> 
 
</div>

個々のファイルに

Answer 2

コピー害虫コードと、それを実行する、ローカルで確認してください。完璧。以下に示すのは現代的なやり方です。モーダルを動的に作成する方法の詳細については、this linkを参照してください。

これもまた、私は外部のjsを使用して画像の参照をフリップさせて、hereを取得します。

$('.flip-card').flip(); 
 

 

 
function openModal(front_image, back_image) { 
 
    var message = $('#modal_1'); 
 
    BootstrapDialog.show({ 
 
    message: $('#modal_1'), 
 
    onshown: function() { 
 
     $('.front img').attr('src', front_image); 
 
     $('.back img').attr('src', back_image); 
 
    }, 
 
    onhide: function(dialogRef) { 
 
     $('#hidden-div').append(message); 
 
    }, 
 
    }); 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> 
 

 
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> 
 

 
<button type="button" class="btn btn-primary" onclick="openModal('http://fillmurray.com/200/200','http://fillmurray.com/600/600')">Open modal</button> 
 

 

 
<div id="hidden-div" style="display: none"> 
 
    <div class="container-fluid" id="modal_1"> 
 
    <div class="row"> 
 
     <div class="col-sm-3 col-xs-6"> 
 
     <div class="flip-card" ontouchstart="this.classList.toggle('hover');" style="height : 300px;"> 
 
      <div class="front front-side" style=""> 
 
      <img src="" alt="" style="width : 100%; height: 100%"> 
 
      </div> 
 
      <div class="back back-side" style="background-color : blue"> 
 
      <img src="" alt="" style="width : 100%; height: 100%"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>