You can see it here<\/a>.<\/p>\nWhoever built that had the job that I want.<\/p>\n
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…<\/p>\n
Here is the html:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <meta charset=\"utf-8\">\r\n\r\n <title>Image gallery<\/title>\r\n\r\n <link rel=\"stylesheet\" href=\"style.css\">\r\n \r\n <\/head>\r\n\r\n <body>\r\n <h1>Image gallery example<\/h1>\r\n\r\n <div class=\"full-img\">\r\n <img class=\"displayed-img\" src=\"images\/pic1.jpg\">\r\n <div class=\"overlay\"><\/div>\r\n <button class=\"dark\">Darken<\/button>\r\n <\/div>\r\n\r\n <div class=\"thumb-bar\">\r\n\r\n\r\n <\/div>\r\n <script src=\"main.js\"><\/script>\r\n <\/body>\r\n<\/html><\/pre>\nAnd here is the script that I wrote:<\/p>\n
\/\/ the big images in the gallery\r\nvar displayedImage = document.querySelector('.displayed-img');\r\n\r\n\/\/the div that contains the dynamically generated thumbs\r\nvar thumbBar = document.querySelector('.thumb-bar');\r\n\r\nbtn = document.querySelector('button');\r\n\r\n\/\/a dumb transparent overlay\r\nvar overlay = document.querySelector('.overlay');\r\n\r\n\/* Looping through images in the image folder*\/\r\nvar allImages = ['pic1', 'pic2', 'pic3', 'pic4', 'pic5'];\r\n\r\nfor(let i = 0; i < allImages.length; i++){\r\n\r\n \/\/makes a virtual <img > tag\r\n var newImage = document.createElement('img');\r\n\r\n \/\/changes to <img src=\"images\/pic1.jpg\">\r\n newImage.setAttribute('src', 'images\/' + allImages[i] + '.jpg');\r\n\r\n \/* below line changes vritual image class to\r\n <img src=\"images\/pic1.jpg\" class=\"pic1\">\r\n Have to add 1 to i because in first loop i = 0, but the first\r\n item in the array, which I'm trying to access, is pic1 *\/\r\n newImage.classList.add('pic' + (i+1));\r\n\r\n \/\/adds the new <img ...> to dom at bottom inside of div.thumbBar\r\n thumbBar.appendChild(newImage);\r\n\r\n \/*thumbClass = pic1. Now that I have image on the displayedImage\r\n I need to grab it's class so I can talk to it*\/\r\n var thumbClass = newImage.getAttribute('class');\r\n\r\n \/\/ finds the new <img ...> based on the class added in the loop\r\n var thumbReady = document.querySelector('.' + thumbClass);\r\n\r\n \/\/makes the new <img ...> be clickable and fires showBig\r\n thumbReady.addEventListener('click', showBig);\r\n\r\n\r\n function showBig(){\r\n \/\/changes big image to match thumbnail clicked\r\n \/\/changes path of big image to images\/pic1.jpg\r\n displayedImage.setAttribute('src', 'images\/' + allImages[i] + '.jpg');\r\n }\r\n}\/\/end for loop\r\n\/* Wiring up the Darken\/Lighten button, not important*\/\r\nbtn.addEventListener('click', darkLight);\r\nfunction darkLight(){\r\n if(btn.getAttribute('class') === 'dark'){\r\n btn.setAttribute('class','light');\r\n btn.textContent = 'Lighten';\r\n overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';\r\n } else {\r\n btn.setAttribute('class','dark');\r\n btn.textContent = 'Darken';\r\n overlay.style.backgroundColor = 'rgba(0,0,0,0)';\r\n }\r\n}\r\n<\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
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. \u00a0I 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,179,3],"tags":[],"class_list":["post-1838","post","type-post","status-publish","format-standard","hentry","category-blog","category-programming","category-rock_climbing"],"_links":{"self":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/comments?post=1838"}],"version-history":[{"count":3,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1838\/revisions"}],"predecessor-version":[{"id":1841,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/posts\/1838\/revisions\/1841"}],"wp:attachment":[{"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/media?parent=1838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/categories?post=1838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websterart.com\/wordpress\/wp-json\/wp\/v2\/tags?post=1838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}