Answer in Web Application for RajaShekhar #158271
I need some help creating a modularized JavaScript roll-over function for gallery images that functions correctly and permits additions of images without the need to hard-code the values. I believe the preload is working as it should, but I haven’t quite connected all of the dots for the rollover as described below.
Hint: Preloading your images will only work on a hosting server and not your local drive as there’s no load time for your images locally. Once you have preloaded those images, you may want to clear your cache to test your loading of the images again.
Tip: In a smaller JavaScript program such as this one, each function is created for a specific purpose. However, in more complex sites, it is better to build functions that we can apply to multiple situations. For example, rather than specifying an element name or id, we can use a variable that is passed into the function.
Directions
Use the gallery.html and index.html files that you downloaded in the Zip file in Assessment 1. Create functionality using JavaScript on the following pages:
index.html
Preload the gallery images.
Create rollover functionality for each of the thumbnails in your image gallery. Use appropriate images found in the images folder.
Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery.
Make sure to do the following:
Create an onpageload function to preload all of your images.
Create a modularized rollover function for gallery images.
Here is the HTML code I have so far:
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>Invitation Page</title>
<link rel=”stylesheet” type=”text/css” href=”css/main.css” />
<script src=”js/galleryImages.js”>
//added preload for the js file preload function
preload(‘images/firefighter.jpg’, ‘images/work.jpg’, ‘images/silhouette.jpg’, ‘images/event.jpg’);
</script>
</head>
<body>
<header>
<div class=”top”>
<a class=”logo” href=”index.html”>CapellaVolunteers<span class=”dotcom”>.org</span></a>
</div>
<nav>
<ul class=”topnav”>
<li><a href=”index.html”>Home</a>
</li>
<li><a href=”invitation.html”>Invitation</a>
</li>
<li><a href=”gallery.html” class=”active”>Gallery</a>
</li>
<li><a href=”registration.html”>Registration</a>
</li>
</ul>
</nav>
</header>
<section id=”gallery”>
<div class=”gallery”>
<a target=”_blank” href=”images/firefighter.jpg”>
<img class=”image” src=”images/firefighter.jpg” alt=”firefighter” width=”300″ height=”200″> <!– added new class image to identify the roll over event with url of the selected image –>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>
<div class=”gallery”>
<a target=”_blank” href=”images/work.jpg”>
<img class=”image” src=”images/work.jpg” alt=”work” width=”300″ height=”200″> <!– added new class image to identify the roll over event with url of the selected image –>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>
<div class=”gallery”>
<a target=”_blank” href=”images/silhouette.jpg”>
<img class=”image” src=”images/silhouette.jpg” alt=”silhouette” width=”300″ height=”200″> <!– added new class image to identify the roll over event with url of the selected image –>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>
<div class=”gallery”>
<a target=”_blank” href=”images/event.jpg”>
<img class=”image” src=”images/event.jpg” alt=”event” width=”300″ height=”200″> <!– added new class image to identify the roll over event with url of the selected image –>
</a>
<div class=”desc”>Add a description of the image here</div>
</div>
<div id=”fullImage”></div> <!– added new DIV to display full image dynamically from JS–>
</section>
<footer>This events site is for IT-FP3215 tasks.
</footer>
</body>
</html>
Here is the JS I have:
//Preload function has to be included
var images = [];
//function to preload banner images
function preloadBannerImages() {
// get the src of all banner images in document and then preload them
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.src = images[i].src;
}
console.log(‘Preloading completed!’);
}
/*Example of code from professor for this functionality
function setupRollover(‘img1’) {
theImage.outImage = new Image();
theImage.outImage.src = theImage.src;
theImage.oumouseout = function () {
this.src = this.outImage.src;
};
}*/
//Rollover functionality using modularized code
var imageGallery = function () {
var sliderInd = 0; //defining global index to count slide images.
},
addListeners = function () {
var items = document.getElementsByClassName(“image”); //getting img elements by CSS class name to register event
for (let index = 0; index < items.length; index++) {
const element = items[index];
element.addEventListener(“mouseover”, this.loadFullImage, false);
}
},
loadFullImage = function (event) // mouse over event handler function to load full image
{
console.log(event.target.src);
document.getElementById(“fullImage”).innerHTML = ‘<img src=”‘ + event.target.src + ‘”/>’; //adding full image to DIV
},
retObject = {
//public function in return object will be exposed to other members.
init: function () {
addListeners(); // calling method to register mouse over events
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 20px;
padding: 0;
background: #333333;
}
.container {
max-width: 400px;
margin: auto;
border: #fff solid 3px;
background: #fff;
}
.main-img img, .imgs img {
width: 100%;
}
.imgs {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadeIn 0.5s ease-in 1 forwards;
}
</style>
</head>
<body>
<div class="container">
<div class="main-img">
<img src="images/image1.jpg" alt="picture" id="current">
</div>
<div class="imgs">
<img src="images/image1.jpg" alt="picture">
<img src="images/image2.jpg" alt="picture">
<img src="images/image3.jpg" alt="picture">
<img src="images/image4.jpg" alt="picture">
<img src="images/image5.jpg" alt="picture">
<img src="images/image6.jpg" alt="picture">
<img src="images/image7.jpg" alt="picture">
<img src="images/image1.jpg" alt="picture">
</div>
</div>
<script>
const current = document.querySelector('#current');
const imgs = document.querySelectorAll('.imgs img')
const opacity = 0.4;
imgs[0].style.opacity = opacity;
imgs.forEach(img => img.addEventListener('click', imgClick));
function imgClick(e) {
imgs.forEach(img => {img.style.opacity = 1});
current.src = e.target.src;
current.classList.add('fade-in');
setTimeout(() => current.classList.remove('fade-in'), 500);
e.target.style.opacity = opacity;
}
</script>
</body>
</html>// the pictures must be in the images folder named in the code
