JSフォトギャラリー。大きな画像を表示してサムネイルをクリックできるようにする

私は助けが必要で、新しい目が私の問題を突き止めることができることを願っています。私は写真ギャラリーを持っており、サムネイルがクリックされたときにサムネイルの大きな画像を表示したい。サムネイル画像は下部に表示されますが、クリックできず、メイン（または大きな画像）は表示されません。外部の.jsファイルを使用しています。私もHTMLをアップロードします。そして、正しい方向に私を指摘し、私が見落としているものを理解するのを助けるかもしれない人もいます。JSフォトギャラリー。大きな画像を表示してサムネイルをクリックできるようにする

<!doctype html> 

<html> 


<head> 
    <title>Photo Gallery Final Project</title> 
    <meta charset = "UTF-8"> 
    <link rel = "stylesheet" href = "gallery.css"> 


</head> 

<body> 

    <div class = "main"> 

     <div class = "wrapper"> 

      <div id = "largeImage"> 

     <img src = "images/machine_1_big.jpg" alt = "machining image" width = "920" height = "400" id = "myImage" class = "border"/> 

      </div> 

      <div class = "thumbnail"> 

       <img src="machine_1.jpg" alt = "machining lathe" id="machine_1"/> 
       <img src="machine_2.jpg" alt = "machining lathe" id="machine_2"/> 
       <img src="machine_3.jpg" alt = "machining lathe" id="machine_3"/> 
       <img src="machine_4.jpg" alt = "machining lathe" id="machine_4"/> 
       <img src="machine_5.jpg" alt = "machining lathe" id="machine_5"/> 
       <img src="machine_6.jpg" alt = "machining lathe" id="machine_6"/> 

      </div> 
     </div> 
    </div> 

    <script src = "gallery.js"></script> 


</body> 




</html> 

//this will load the gallery in the browser and enable the gallery function 
//window.onload = gallery; 
//gallery funtion declared 
function gallery(){ 
    //variable allGalleryImages created. This is where all the images will be held 
    var allGalleryImages = document.images; 
    //for loop declared for the image array 
    for(var i = 0; i < allGalleryImages.length; i++){ 
      if(allGalleryImages[i].id.indexOf("small") > -1){ 
       //this will add a listener to the thumb images 
       allGalleryImages[i].onclick = imgChanger; 

      } 
    } 
} 
//this is the image changer function 
function imgChanger(){ 
    //this will change the src attribute value of the large image. 
    //document.getElementById('myImage').src ="images/"+this.id+"_big.jpg"; 
     document.getElementById('myImage').src = " " + this.id +"_big.jpg"; 

}

出典

2016-04-26 Murk

JQueryで大丈夫ですか？ – theblindprophet

先に進んで撃つ。 – Murk

私はJQueryを使用しました。 HTMLを変更する必要はありませんでした。すべてのサムネイルを作成して並べる理由はありません。

$(document).ready(function() { 
    $(".thumbnail img").on("click", function() { 
     imgChanger($(this).attr("src")); 
    }) 


    //this is the image changer function 
    function imgChanger(theSRC) { 
     //this will change the src attribute value of the large image. 
     //document.getElementById('myImage').src ="images/"+this.id+"_big.jpg"; 
     var beforeJPG = theSRC; 
     console.log(beforeJPG); 
     beforeJPG = beforeJPG.substring(0, beforeJPG.length-4); 
     console.log(beforeJPG + "_big.jpg"); 
     $("myImage").attr("src", beforeJPG + "_big.jpg"); 
    } 
})

フィドル：https://jsfiddle.net/6v8arhp2/

が
は "_big.jpg" を追加し、フロントに "/画像を" 追加 "の.jpg" src
のsrcを変更する#myImage

**もちろん、あなたのイメージはJSFiddle内にないので、動作しているとは見えませんが、コンソールログには変換が表示されます。

出典

2016-04-26 20:18:12 theblindprophet

JSフォトギャラリー。大きな画像を表示してサムネイルをクリックできるようにする

答えて

関連する問題