Vantage and an image gallery
Posted by markhwebster on February 6th, 2018 • 0 Comments
I studied Sunday so I could play hooky with Christine on Monday at Vantage. Chris was super strong and led Sinsemilla 10c and George and Martha cleanly. I was very rusty after 6 weeks of not climbing. I can’t afford the climbing gym so my arms have become weak. As I said after lowering down from hanging on Pony Keg: “That was not the climber who came back from Joshua Tree on January 2!”
Chris: “I know, I wanted to meet that guy.”
Me: “He is gone, and I wonder if he ever really existed. Perhaps that was just a fairytale from some bizarre alternate universe.”
Such is my life as a 64 year old rock climber. It’s a sport for young people. Trying to do it at my advanced age of decrepitude requires a lot more work than it does for young people. I do the work, and happily, but it requires climbing every weekend, or 5 days straight, whichever comes first.
So now I’m back to my JavaScript studies at this super cool free website:
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery
I’ve been using Evernote to take notes of the stuff I’m learning. But Evernote doesn’t have syntax highlighting. It’s going to clog up this blog with a bunch of code…but I suspect this blog never gets read by anyone but me anyway. Probably I screwed up the search engine functionality or something. Not that I care enough to sort it out. I have bigger priorities, like learning high end JavaScript.
So here is my latest “homework”. I built a barebones image gallery switcher. It’s too boring to show the working example in an iframe. But this is the code that makes it work, which is the fun part for me. On my main website, I use a awesome image gallery function called Photoswipe. You can see it here.
Whoever built that had the job that I want.
Meanwhile, back on the farm, this is the code for the one I built in my lesson. They gave me the images, html and JavaScript. But they only gave me clues as to how to write the script. I’m fairly happy I figured it all out. Baby steps…
Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Image gallery example</h1>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar">
</div>
<script src="main.js"></script>
</body>
</html>
And here is the script that I wrote:
// the big images in the gallery
var displayedImage = document.querySelector('.displayed-img');
//the div that contains the dynamically generated thumbs
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
//a dumb transparent overlay
var overlay = document.querySelector('.overlay');
/* Looping through images in the image folder*/
var allImages = ['pic1', 'pic2', 'pic3', 'pic4', 'pic5'];
for(let i = 0; i < allImages.length; i++){
//makes a virtual <img > tag
var newImage = document.createElement('img');
//changes to <img src="images/pic1.jpg">
newImage.setAttribute('src', 'images/' + allImages[i] + '.jpg');
/* below line changes vritual image class to
<img src="images/pic1.jpg" class="pic1">
Have to add 1 to i because in first loop i = 0, but the first
item in the array, which I'm trying to access, is pic1 */
newImage.classList.add('pic' + (i+1));
//adds the new <img ...> to dom at bottom inside of div.thumbBar
thumbBar.appendChild(newImage);
/*thumbClass = pic1. Now that I have image on the displayedImage
I need to grab it's class so I can talk to it*/
var thumbClass = newImage.getAttribute('class');
// finds the new <img ...> based on the class added in the loop
var thumbReady = document.querySelector('.' + thumbClass);
//makes the new <img ...> be clickable and fires showBig
thumbReady.addEventListener('click', showBig);
function showBig(){
//changes big image to match thumbnail clicked
//changes path of big image to images/pic1.jpg
displayedImage.setAttribute('src', 'images/' + allImages[i] + '.jpg');
}
}//end for loop
/* Wiring up the Darken/Lighten button, not important*/
btn.addEventListener('click', darkLight);
function darkLight(){
if(btn.getAttribute('class') === 'dark'){
btn.setAttribute('class','light');
btn.textContent = 'Lighten';
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
} else {
btn.setAttribute('class','dark');
btn.textContent = 'Darken';
overlay.style.backgroundColor = 'rgba(0,0,0,0)';
}
}