フォトギャラリーJavaScriptを使用する

Question

私はhtml cssとjavascriptを使用して簡単なフォトギャラリーを作成しようとしています。私のプロジェクトの最上部には、5つの画像を保持する5つのサムネイルがあります。私のサムネイルの下には元の画像サイズのサイズであるdivがあります。私がしたいのは、サムネイルの下のdivにサムネイルの写真をクリックすると、元のサイズの写真がサムネイルに表示されます。私はプロジェクトの開始を作成しているが、私はそれをどのように終了するのか分からない。これを終わらせるために、私が追加しなければならないコード（CSSとJS）を完成させるために誰かが私を助けてくれたら本当にありがとう。

ありがとうございました。

HTML：

div id="img-thumbnails"> 
    <img src="assets/imgs/img-01.jpg"> 
    <img src="assets/imgs/img-02.jpg"> 
    <img src="assets/imgs/img-03.jpg"> 
    <img src="assets/imgs/img-04.jpg"> 
    <img src="assets/imgs/img-05.jpg"> 
</div> 

<div id="img-original"> 

</div> 

はCSS：以下

#img-thumbnails { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
} 

#img-thumbnails img { 
    width:200px; 
    height:100px; 
    cursor: pointer; 
    margin-left:20px; 
} 

#img-original { 
    height:500px; 
    width:800px; 
    border:10px solid black; 
    margin:30px auto; 
} 

Answer 1

はあなたの問題を解決する方法についてのガイドラインとして、それを使用することができ、実装例です。

リンク先がないため、画像の代わりにdivsを使用します。

var preview = document.getElementById('pretend_view'); 
 
var images = document.getElementById('pretend_images'); 
 
var thumbnails = document.querySelectorAll('#pretend_images > div'); 
 

 
thumbnails.forEach(function(elem){ 
 
\t elem.onclick = onClick.bind(null, elem); 
 
}); 
 

 
function onClick(elem, e){ 
 
\t clearPreview(); 
 
    addToPreview(elem); 
 
} 
 

 
function clearPreview(){ 
 
\t var elem = document.querySelector('.preview'); 
 
    
 
    if(elem){ 
 
    elem.className = elem.className.replace('preview', ''); 
 
    images.appendChild(elem); 
 
    } 
 
} 
 

 
function addToPreview(elem){ 
 
\t elem.className = 'preview'; 
 
    preview.appendChild(elem); 
 
}

#pretend_images > div { 
 
    display: inline-block; 
 
    width:50px; 
 
    height:50px; 
 
    cursor: pointer; 
 
    margin-left:20px; 
 
} 
 

 
#pretend_preview { 
 
    height:200px; 
 
    width:300px; 
 
    border:10px solid black; 
 
    margin:30px auto; 
 
} 
 

 
#a { 
 
    background-color: black; 
 
} 
 

 
#b { 
 
    background-color: blue; 
 
} 
 

 
#c { 
 
    background-color: green; 
 
} 
 

 
#d { 
 
    background-color: pink; 
 
} 
 

 
.preview { 
 
    height:200px; 
 
    width:300px; 
 
}

<div id="pretend_images"> 
 
    <div id="a"></div> 
 
    <div id="b"></div> 
 
    <div id="c"></div> 
 
    <div id="d"></div> 
 
</div> 
 

 
<div id="pretend_view"></div>