CODEWITHSUNDEEP
javascripthtmlcss
saliem antoun
saliem antoun

Reputation: 51

save choice after reloading page

I have a simple tab gallary from w3school. You see some images, and when the user click on an image, this image got shownunder. I make an image as a default shown image. I want to make that when the user change the image (click on another image) and reload the page or close the browser. then open the site again without loosing the choosen image. Example: User choose image number 3, then closes the browser or reload the page, then when the user open the page again, the choosen image will be image number 3(not the default one).

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}


document.getElementById("defaultimage").click();
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
<div style="text-align:center">
  <h2>Tabbed Image Gallery</h2>
  <p>Click on the images below:</p>
</div>

<!-- The four columns -->
<div class="row">
  <div class="column">
    <img src="https://picsum.photos/209" alt="Nature" style="width:100%" onclick="myFunction(this);" id="defaultimage">
  </div>
  <div class="column">
    <img src="https://picsum.photos/2092" alt="Snow" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/2021" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div class="column">
    <img src="https://picsum.photos/2097" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>

<div class="container">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

Upvotes: 0

Views: 97

Answers (1)

Axazexz player
Axazexz player

Reputation: 60

Yes this is possible you will want to store the image src in local storage which saves even if the browser closes. Local storage is similar to cookies but be warned user can delete localstorage from developer tools in any browser.

         var expandImg = document.getElementById("expandedImg");
 var imgText = document.getElementById("imgtext");
 // variables have to be global so they can be accessed anywhere not just inside the function
 if (localStorage.getItem("image_src") != null && localStorage.getItem("image_alt") != null) {
   //image set
   myFunction(localStorage.getItem("image_src"), localStorage.getItem("image_alt"));
 } else {
   // image is not set
 }

 function myFunction(src, alt) {
   expandImg.src = src;
   imgText.innerHTML = alt;
   expandImg.parentElement.style.display = "block";
 }

 function setImage(src, alt) {
   localStorage.setItem("image_src", src);
   localStorage.setItem("image_alt", alt);
 }

https://www.w3schools.com/html/html5_webstorage.asp This w3schools page states that local storage saves after browser is closed

This jsfiddle works but you cannot get the last saved image since the src always links to a random everytime but this is what I could come up with https://jsfiddle.net/0rvs6d53/14/

Upvotes: 1

Related Questions