JSで画像配列を表示してLightbox2を使用する方法

JSの配列からすべての画像を表示するにはどうすればLightbox2を使用しますか？JSで画像配列を表示してLightbox2を使用する方法

Lightbox2でユーザーが画像をクリックして拡大表示できるTic Tac Toeボードを作成しようとしています。コードでは、私の子供が不正行為をするのをより困難にするために配列をランダム化することがわかります。ただし、各imgを3x3グリッドに表示するように配列を取得することが重要ですが、学生はモーダルで各画像をクリックして拡大することができます。

Lightbox2次のコード行が必要です。>画像＃1/ のhref = "画像/画像-1.JPG" データをライトボックス= "画像1" データタイトル= "マイキャプション"
をこれは、js document.writeコードにすべての非効率的な+記号がある理由です。

回答がDOMを編集するか、.foreachを使用して配列をインクリメントしたところで答えを検索しましたが、まだモーダルで画像をクリックして拡大することができます。ありがとう、私の生徒はありがとうございます！これは教室にコンピュータサイエンスをもたらすための私の最初のベンチャーであり、私は非常に騒ぎです。

<!DOCTYPE html> 
<html> 
<head> 
<title>Tic Tac Toe</title> 
<link href="https://fonts.googleapis.com/css? 
family=Oswald:300,700|Varela+Round" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" href="tictactoestyle.css"> 
<link href="css/lightbox.css" rel="stylesheet"> 
<script type="text/javascript" src="tictactoe.js"></script> 
<script src="js/lightbox-plus-jquery.js"></script> 
</head> 

<body> 
<div class="title"> 
<h1> Tic Tac Toe </h1> 
</div> 

<div id="gameboard"> <!--Container for all nine divs--> 

<script>displayAllImages();</script> 
</div> 
</body> 
</html> 

/*Javascript*/ 

function shuffle(arr) { 
var currentIndex = arr.length, temporaryValue, randomIndex; 

    // While there remain elements to shuffle... 
while (0 !== currentIndex) { 

    // Pick a remaining element... 
    randomIndex = Math.floor(Math.random() * currentIndex); 
    currentIndex -= 1; 

    // And swap it with the current element. 
    temporaryValue = arr[currentIndex]; 
    arr[currentIndex] = arr[randomIndex]; 
    arr[randomIndex] = temporaryValue; 
} 

return arr; 

function displayAllImages() { 
var imgArray = []; 
imgArray[0] = "image1"; 
imgArray[1] = "image2"; 
imgArray[2] = "image3"; 
imgArray[3] = "image4"; 
imgArray[4] = "image5"; 
imgArray[5] = "image6"; 
imgArray[6] = "image7"; 
imgArray[7] = "image8"; 
imgArray[8] = "image9"; 

imgArray = shuffle(imgArray); 

for (i=0;i<imgArray.length;i++) { 
    document.write("<div class='card'><a href='images/" + item + "'.jpg 
data-lightbox='" + item + "'><img src='images/" + item + "m.jpg'></a> 
</div>");

出典

2017-07-12 mister

あなたがする必要があることはいくつかあります。まずdivを文字列として追加してDOMに書き込むことはできません。 jQueryはあなたのようなことをしようとしますが、バニラJSはそれを実際の要素として認識しません。そこには括弧がいくつかありました。私は事を明確にするためにインラインでコメントを追加しました。これを試してみてください：

function shuffle(arr) { 
    var currentIndex = arr.length, temporaryValue, randomIndex; 

     // While there remain elements to shuffle... 
    while (0 !== currentIndex) { 

     // Pick a remaining element... 
     randomIndex = Math.floor(Math.random() * currentIndex); 
     currentIndex -= 1; 

     // And swap it with the current element. 
     temporaryValue = arr[currentIndex]; 
     arr[currentIndex] = arr[randomIndex]; 
     arr[randomIndex] = temporaryValue; 
    } 

    return arr; 
} 


function displayAllImages() { 
    var imgArray = [ 
    "image1", 
    "image2", 
    "image3", 
    "image4", 
    "image5", 
    "image6", 
    "image7", 
    "image8", 
    "image9", 
    ]; 

    //Map over the array to create the DOM elements 
    var domElements = imgArray.map(function(imgName, index) { 
    var cardDiv = document.createElement('div'); 
    var cardLink = document.createElement('a'); 
    var cardImage = document.createElement('img'); 

    //Add the class 
    cardDiv.classList.add('card'); 

    //Add the link to image 
    //Utilize interpolation for the variable 
    //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 
    cardLink.href = `images/${imgName}.jpg`; 

    //Set the data attribute 
    cardLink.dataset.lightbox = imgName; 

    //Set img source 
    cardImage.src = `images/${imgName}.jpg`; 

    //Put it all together 
    cardLink.appendChild(cardImage); 
    cardDiv.appendChild(cardLink); 

    return cardDiv; 

    }); 

    //Now we have an array with the propper DOM elements 
    //Shuffle it 
    var shuffled = shuffle(domElements); 

    //Append the elements to the DOM 
    var body = document.querySelector('body'); 

    shuffled.forEach(function(card, index) { 
    body.appendChild(card); 
    }); 
}

希望の方向に向けるのに役立ちます。ハッピーコーディング！

出典

2017-07-12 16:34:31 RickTakes

これはチャンピオンのように働いていただきありがとうございます。私はまだあなたのリンクとコメントを調べて、あなたが行ったことを理解しています。 Codecademyを離れて、多くのおかげさまです。 @RickTakes – mister

JSで画像配列を表示してLightbox2を使用する方法

答えて

関連する問題