jshaver/portfolio
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add some javascript to make images work better

Browse source
This commit is contained in:
John Shaver 2022-07-16 23:46:23 -07:00
parent ff3beac8ff
commit 9cce6dbf0a
3 changed files with 47 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
deploy-list.txt
View file

@ -1,3 +1,4 @@
css/ css/
images/ images/
js/
index.html index.html

32
index.html
View file

@ -53,10 +53,10 @@
<h3><a href="https://www.economicmodeling.com/skillabi/">Skillabi</a></h3> <h3><a href="https://www.economicmodeling.com/skillabi/">Skillabi</a></h3>
<div class="project"> <div class="project">
<div class="project-image"> <div class="project-image">
<img class="main-image" src="images/skillabi-1-login.png"/> <img class="main-image" src="images/thumbnails/th_skillabi-1-login.png"/>
<img class="main-image" src="images/skillabi-2.gif"/> <img class="main-image" src="images/thumbnails/th_skillabi-2.gif"/>
<img class="main-image" src="images/skillabi-3.webp"/> <img class="main-image" src="images/thumbnails/th_skillabi-3.webp"/>
<img class="main-image" src="images/curricular-skills-api.png"/> <img class="main-image" src="images/thumbnails/th_curricular-skills-api.png"/>
</div> </div>
<div class="project-info"> <div class="project-info">
<h4>Project Goals</h4> <h4>Project Goals</h4>
@ -100,9 +100,9 @@
<h3>Skillsmatch</h3> <h3>Skillsmatch</h3>
<div class="project"> <div class="project">
<div class="project-image"> <div class="project-image">
<img class="main-image" src="images/dashdrop-1.png"/> <img class="main-image" src="images/thumbnails/th_dashdrop-1.png"/>
<img class="main-image" src="images/dashdrop-2.png"/> <img class="main-image" src="images/thumbnails/th_dashdrop-2.png"/>
<img class="main-image" src="images/dashdrop-3.png"/> <img class="main-image" src="images/thumbnails/th_dashdrop-3.png"/>
</div> </div>
<div class="project-info"> <div class="project-info">
<h4>Project Goals</h4> <h4>Project Goals</h4>
@ -129,9 +129,9 @@
<h3>Dash Drop</h3> <h3>Dash Drop</h3>
<div class="project"> <div class="project">
<div class="project-image"> <div class="project-image">
<img class="main-image" src="images/dashdrop-1.png"/> <img class="main-image" src="images/thumbnails/th_dashdrop-1.png"/>
<img class="main-image" src="images/dashdrop-2.png"/> <img class="main-image" src="images/thumbnails/th_dashdrop-2.png"/>
<img class="main-image" src="images/dashdrop-3.png"/> <img class="main-image" src="images/thumbnails/th_dashdrop-3.png"/>
</div> </div>
<div class="project-info"> <div class="project-info">
<h4>Project Goals</h4> <h4>Project Goals</h4>
@ -153,7 +153,7 @@
<h3>NewVistas Website Platform</h3> <h3>NewVistas Website Platform</h3>
<div class="project"> <div class="project">
<div class="project-image"> <div class="project-image">
<img class="main-image" src="images/newvistas.jpg"/> <img class="main-image" src="images/thumbnails/th_newvistas.jpg"/>
</div> </div>
<div class="project-info"> <div class="project-info">
<h4>Project Goals</h4> <h4>Project Goals</h4>
@ -206,8 +206,8 @@
<h3>Payzoom Econosystem Platform</h3> <h3>Payzoom Econosystem Platform</h3>
<div class="project"> <div class="project">
<div class="project-image"> <div class="project-image">
<img alt="The Payzoom Logo" src="images/PayZoom_logo.png"/> <img alt="The Payzoom Logo" src="images/thumbnails/th_PayZoom_logo.png"/>
<img class="main-image" alt="Payzoom Software Demo" src="images/payzoom.png"/> <img class="main-image" alt="Payzoom Software Demo" src="images/thumbnails/th_payzoom.png"/>
</div> </div>
<div class="project-info"> <div class="project-info">
<h4>Project Goal</h4> <h4>Project Goal</h4>
@ -248,8 +248,8 @@
<h3>Novatek Native Wrapper App</h3> <h3>Novatek Native Wrapper App</h3>
<div class="project"> <div class="project">
<div class="project-image"> <div class="project-image">
<img class="main-image" alt="Workaids App Icon" src="images/icon_work_aids.png" /> <img class="main-image" alt="Workaids App Icon" src="images/thumbnails/th_icon_work_aids.png" />
<img alt="Workaids Login Screen" src="images/workaids_login2.png" /> <img alt="Workaids Login Screen" src="images/thumbnails/th_workaids_login2.png" />
</div> </div>
<div class="project-info"> <div class="project-info">
<h4>Project Goals</h4> <h4>Project Goals</h4>
@ -285,4 +285,6 @@
</section> </section>
</article> </article>
</div> </div>
<div id="image-modal" hidden><div class="close-x" aria-label="click to close modal">&#xd7;</div><div id="image-modal-contents"/></div>
<script src="./js/image-thumbnails.js"></script>
</body> </body>

29
js/image-thumbnails.js Normal file
View file

@ -0,0 +1,29 @@
'use srict';
(function() {
const imageModal = document.querySelector('#image-modal');
const imageModalContents = document.querySelector('#image-modal-contents');
imageModal.querySelector('.close-x').addEventListener('click', function(e) {
e.stopPropagation();
e.preventDefault();
imageModal.hidden = true;
});
const images = document.querySelectorAll('img');
images.forEach(function(img) {
const name = img.src.split('/').pop();
if(name.match(/^th_/)) {
img.addEventListener('click', function(e) {
e.stopPropagation();
e.preventDefault();
imageModal.hidden = undefined;
const fullImage = document.createElement('img');
fullImage.src = `./images/${name.replace(/^th_/, '')}`;
imageModalContents.replaceChildren(fullImage);
});
}
});
})();