Skip to content

Commit

Permalink
Merge pull request #19 from pierrickmartinet/develop
Browse files Browse the repository at this point in the history 
Fix: Gallerie d'image, rajout de div / Feat: Fonctionnalité de suppre…
  • Loading branch information
@pierrickmartinet
pierrickmartinet authored Mar 31, 2021
2 parents 5c2951a + 08272e1 commit 8d5a815
Show file tree
Hide file tree
Showing 7 changed files with 76 additions and 26 deletions.
46 changes: 29 additions & 17 deletions gallerie.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,27 +53,39 @@ <h1>Gallerie</h1>

<!-- Formulaire d'ajout d'une image -->
<div class="divContainerFormGallery divContainerFormGalleryNone">
<div id="divFormGallery">
<h2 class="form titleFont">Poste ton image !</h2>
<form id="formGallery">
<div class="form">
<input type="text" name="url" id="url" placeholder="Enter the URL">
</div>
<div class="form">
<input type="submit" value="Envoyer">
</div>
</form>
</div>
<div id="divFormGallery">
<h2 class="form titleFont">Poste ton image !</h2>
<form id="formGallery">
<div class="form">
<input type="text" name="url" id="url" placeholder="Enter the URL">
</div>
<div class="form">
<input type="submit" value="Envoyer">
</div>
</form>
</div>
</div>

<!-- Gallerie d'image -->
<div id="imgGallery">
<img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery1.jpg" alt="Image de chuck Norris">
<img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery2.jpg" alt="Image de chuck Norris">
<img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery3.jpg" alt="Image de chuck Norris">
<img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery4.jpg" alt="Image de chuck Norris">
<img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery5.jpg" alt="Image de chuck Norris">
<img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery6.jpg" alt="Image de chuck Norris">
<div class="imgGalleryColumn imgGalleryMosaic">
<img class="imgGallery" src="images/chuckGallery1.jpg" alt="Image de chuck Norris">
</div>
<div class="imgGalleryColumn imgGalleryMosaic">
<img class="imgGallery" src="images/chuckGallery2.jpg" alt="Image de chuck Norris">
</div>
<div class="imgGalleryColumn imgGalleryMosaic">
<img class="imgGallery" src="images/chuckGallery3.jpg" alt="Image de chuck Norris">
</div>
<div class="imgGalleryColumn imgGalleryMosaic">
<img class="imgGallery" src="images/chuckGallery4.jpg" alt="Image de chuck Norris">
</div>
<div class="imgGalleryColumn imgGalleryMosaic">
<img class="imgGallery" src="images/chuckGallery5.jpg" alt="Image de chuck Norris">
</div>
<div class="imgGalleryColumn imgGalleryMosaic">
<img class="imgGallery" src="images/chuckGallery6.jpg" alt="Image de chuck Norris">
</div>
</div>
</main>

Expand Down
Binary file modified images/chuckGallery3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/chuckGallery5.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/chuckGallery6.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/remove.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 25 additions & 9 deletions scriptGallerie.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,7 @@ $(document).ready(function () {

function addImageGallery() {
// La variable imgGallery prend pour valeur un tableau avec les images de la div portant l'id imgGallery
let imgGallery = document.querySelectorAll('#imgGallery img');

let imgGallery = document.querySelectorAll('#imgGallery div');

// Listener sur l'icon Mosaïque au click de la souris (l'évenement se passe lorsque l'utilisateur clique sur l'icon)
iconGalleryMosaic.addEventListener('click', (e) => {
Expand Down Expand Up @@ -104,17 +103,34 @@ $(document).ready(function () {
let addImage = document.getElementById('url').value;

// La variable imgGallery prend pour valeur un tableau avec les images de la div portant l'id imgGallery (pour vérification du format d'affichage)
let testImageGallery = document.querySelectorAll('#imgGallery img');
let testImageGallery = document.querySelectorAll('#imgGallery div');

// Si lors de l'ajout les images déjà présentes ont la classe colonne et mosaic ou juste colonne
if ((testImageGallery[0].classList.value === "imgGalleryColumn imgGalleryMosaic") || (testImageGallery[0].classList.value === "imgGalleryColumn")) {
// Alors rajoute l'image avec le format colonne
$('<img class="imgGalleryColumn" src="' + addImage + '" alt="Image ajouté">').prependTo('#imgGallery');
if ((testImageGallery[0].classList.value === "imgGalleryColumn imgGalleryMosaic") || (testImageGallery[0].classList.value === "remove imgGalleryColumn")|| (testImageGallery[0].classList.value === "imgGalleryColumn")) {
// Alors rajoute une div dans le DOM avec l'image en format (taille) colonne ainsi qu'une croix rouge (img) pour remove
$('<div class="remove imgGalleryColumn"><img class="crossRemove" src="images/remove.svg "alt="croix supprimer"><img class="imgGallery" src="' + addImage + '"alt="Image ajouté"></div>').prependTo('#imgGallery');
} else {
// Sinon rajoute l'image avec le format Mosaïque
$('<img class="imgGalleryMosaic" src="' + addImage + '" alt="Image ajouté">').prependTo('#imgGallery');
// Sinon rajoute une div dans le DOM avec l'image en format (taille) Mosaïque ainsi qu'une croix rouge (img) pour remove
$('<div class="remove imgGalleryMosaic"><img class="crossRemove" src="images/remove.svg "alt="croix supprimer"><img class="imgGallery" src="' + addImage + '" alt="Image ajouté"></div>').prependTo('#imgGallery');
}
addImageGallery();


// Suppression image

let crossRemoveImg = document.querySelector('.crossRemove');

crossRemoveImg.addEventListener('click', (e) => {

e.target.parentElement.remove();

})
}

});






});
21 changes: 21 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,16 +179,24 @@ justify-content: center;

/* Gallery image */


.imgGalleryMosaic{
height: auto;
width: 40%;
margin: 5px;

}

.imgGalleryColumn{
height: auto;
width: 50%;
margin: 5px;

}

.imgGallery{
max-width: 100%;
max-height: 100%;
}


Expand All @@ -198,6 +206,19 @@ justify-content: center;
flex-wrap: wrap;
}

.crossRemove{
width: 5%;
height: auto;
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}

.remove{
position: relative;
}


/* Icon Gallery */

Expand Down

0 comments on commit 8d5a815

Please sign in to comment.