Eskild

Inneholder expand-image.js og noen endringer i main.css

scripts/expand-image.js

-//Henter inn elementer
+//Henter inn bileelementene
 var images = document.querySelectorAll("img")
 var bodyEl = document.querySelector("body")
+//Går gjennom bildene og gir dem lyttere som aktiverer makeBig()
+for(i=0; i<images.length; i++){
+  images[i].addEventListener("click", makeBig)
+}
+
 var newImage = document.createElement("img")//Lager bildelement, så vi slipper å ha mange tomme elementer på siden
 var darkDiv = document.createElement("div")//Div for å gjøre bakgrunnen mørk når vi forstørrer bildet
 //Legger til lyttere på våre tomme elementer
 darkDiv.addEventListener("click", makeSmall)
 newImage.addEventListener("click", makeSmall)
 //Gir en klasse til det tomme bildet vårt
-newImage.className="sizeImageBig"
-//Legger til nye tomme elementer til nettsiden
+newImage.className="sizeImageBig"//Denne classen gjør bildet stort, og sentrert, men ikke synlig siden det mangler kilde
+//Legger til de tomme elementene til nettsiden
 bodyEl.appendChild(darkDiv)
 bodyEl.appendChild(newImage)
-//Sjekk for om vi allerede har ett stort bilde
-var bigCheck = false
-//Går gjennom bildene og gir dem lyttere som aktiverer makeBig
-for(i=0; i<images.length; i++){
-  images[i].addEventListener("click", makeBig)
-}
-//makeBig gjør bildene større, kanskje heller gi klasse?
+//makeBig er funksjonen som gjør bildene større
 function makeBig(e) {
-  if (bigCheck==false){//Sjekker om vi allerede har ett stort bilde
+  if(window.innerWidth > 768){//Sjekker om skjermen er bred nok, endrer seg når medlemmene har 1 per rad vs 3 per rad
     newImage.src = e.target.src//Gir klonen kildeattribut lik bildet som ble trykket på
-
-    bigCheck = true//Sier ifra om at det nå er ett stort bilde
-
-    darkDiv.addEventListener("click", makeSmall)//Legger til lytter for å gjøre bildet lite igjen
-
-    darkDiv.className = "nowDark"//GJør bakgrunnen mørkere()?)
+    darkDiv.className = "nowDark"//Gjør diven til en stor mørkegrå, halvgjennomsiktig bakgrunn
   }
 }
 //Funksjon for å gjøre bildet lite igjen
-function makeSmall() {//Hva om å trykke på body for å gjøre mindre? Vanskeligere å progge, men mer brukervennlig?
-  newImage.src=""//Fjerner kilden til det store bildet for å fjerne det
-  bigCheck = false//Sier ifra om ate det store slemme bildet er borte
-  darkDiv.className = ""//Gjør bakgrunnen lys igjen(?)
+function makeSmall() {
+  newImage.src=""//Fjerner det store bildet ved å fjerne kilden
+  darkDiv.className = ""//Gjør bakgrunnen lys igjen
 }