Comment afficher un tableau d'images avec JS et utiliser Lightbox2

Comment afficher toutes les images d'un tableau dans JS et utiliser encore Lightbox2?Comment afficher un tableau d'images avec JS et utiliser Lightbox2

Professeur de mathématiques de 8e gr qui tente de créer un tableau d'images Tic Tac Toe où Lightbox2 permet aux utilisateurs de cliquer pour agrandir les images. Dans le code, vous verrez que je randomiser le tableau pour rendre plus difficile pour mes enfants de tricher. L'objectif est cependant d'obtenir le tableau pour afficher chaque img dans une grille 3x3, mais permettre aux étudiants de cliquer et d'agrandir chaque image avec un modal.

Lightbox2 nécessite la ligne de code suivante:
a href = "images/image-1.jpg" data-lightbox = "image-1" data-title = "Ma légende"> Image # 1/a C'est pourquoi j'ai tous les signes + inefficaces dans le code js document.write.

J'ai cherché la réponse ici où les réponses éditent le DOM ou incrémentent à travers le tableau utilisant .foreach, je n'ai pas encore vu une solution où vous pouvez cliquer pour agrandir l'image dans un modal. Merci et mes élèves vous diront merci! C'est la première fois que je m'engage à introduire l'informatique dans la salle de classe, alors je suis vraiment un noob.

<!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>");

Source

2017-07-12 mister

Quelques choses que vous aurez besoin de faire. D'abord, vous ne pouvez pas simplement ajouter une div en tant que chaîne et l'écrire dans le DOM. jQuery vous permet de faire quelque chose comme ça, mais JS vanilla ne le reconnaîtra pas comme un élément réel. Il y avait aussi quelques parenthèses manquantes là-dedans. J'ai ajouté des commentaires en ligne pour aider à clarifier les choses. Donnez à ce essayer:

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); 
    }); 
}

espoir qui aide à vous orienter dans la bonne direction. Codage heureux!

Source

2017-07-12 16:34:31 RickTakes

Merci, ça a marché comme un champion. Je continue de parcourir vos liens et vos commentaires pour comprendre ce que vous avez fait. Off à Codecademy, merci beaucoup. @RickTakes – mister

Comment afficher un tableau d'images avec JS et utiliser Lightbox2

Répondre

Questions connexes