Answer to Question #158271 in HTML/JavaScript Web Application for RajaShekhar

Question

Answer to Question #158271 in HTML/JavaScript Web Application for RajaShekhar

Question #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>

<head>

<title>Invitation Page</title>

//added preload for the js file preload function

preload('images/firefighter.jpg', 'images/work.jpg', 'images/silhouette.jpg', 'images/event.jpg');

</script>

</head>

<body>

<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>

</div>

<nav>

</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>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</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

}

};

Expert's answer

<!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

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #158271 in HTML/JavaScript Web Application for RajaShekhar

Comments

Leave a comment

Related Questions