Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

The picture displayed in the middle section was originally labeled as caribou2.j

ID: 3825107 • Letter: T

Question

The picture displayed in the middle section was originally labeled as caribou2.jpg from Program 2. The objective for Program 4 is to display a series of images in the middle section - one at a time - thus creating a slide show. A total of 10 pictures are to be displayed individually in this middle section. These pictures are stored in pictures.zip and are named 0.jpg, 1.jpg, …9.jpg.

NOTE: The slide show is implemented as a Fade-Out - opacity of the currently displayed image gradually decreases from 1 to 0 - followed by a Fade-In - opacity of the next image gradually increases from 0 to 1. The actual fade-out to fade-in transition should last for approximately 1 second.

Each picture should be displayed for approximately 3 seconds before the next fade-out to fade-in transition starts

Note: caribou2.jpg has now been renamed to 0.jpg for this program.

The slide show should display these 10 pictures, one at a time, Fade-Out to Fade-In transition, indefinitely. Once the last picture - 9.jpg - is finished displaying for appx 3 seconds, it should fade-out and the first picture - 0.jpg – fades in and is displayed again for appx. 3 seconds. The pictures are rotated one at a time indefinitely. The corresponding captions must also be displayed as the pictures are changed.

The captions to be used are shown below as an array declaration:

var captions = new Array("Caribou Migration", "Caribou Crossing River","Ceremonial Dress","Family's Home ","Scenic View","Family Stove",

                         "Summer Camp","Wolf","Winter Caribou Herd","Spring Caribou");

An example for the first 4 pictures of the slide show are shown below:

6 more pictures should be displayed. Once all 10 pictures are displayed, the first picture - 0.jpg - should be redisplayed.

The suggested dimensions for each image is 357x313

Campgrounds Nunavut Jribal Society Mission Statement The Nunavut Tribal Society is the oldest organization of its kind located in the Northem Manitoba region. Members participate in a variety of festivals and conservation efforts in the sub-arctic regions. We conduct regular meetings open to the the public conceming our conservation of Polar Bears and Caribou. We also offer guided tours daily from May 31 tluu October 31. Contact Us Tour Times Monday 8:00am 1:00pm Address Northpoint Landing Churchill, Manitoba MB712 Contact Us Chief John Carangcon 713-350-3291

Explanation / Answer

<!-- Copy paste the code in a file and save it as index.html -->

<!DOCTYPE>
<html>
<head>
  
<style>
#img-container {
width: "357px";
height: "313px";
}
  
.img-frame {
border: 2px solid black;
opacity: 0;
transition: 500ms ease opacity;
position: absolute;
}
</style>

</head>

<body>
<!-- Container holds all 10 frames -->
<div id="img-container">
<!-- Each img holds a frame -->
<img class="img-frame" width=357 height=313 src="pictures/0.jpg">
<img class="img-frame" width=357 height=313 src="pictures/1.jpg">
<img class="img-frame" width=357 height=313 src="pictures/2.jpg">
<img class="img-frame" width=357 height=313 src="pictures/3.jpg">
<img class="img-frame" width=357 height=313 src="pictures/4.jpg">
<img class="img-frame" width=357 height=313 src="pictures/5.jpg">
<img class="img-frame" width=357 height=313 src="pictures/6.jpg">
<img class="img-frame" width=357 height=313 src="pictures/7.jpg">
<img class="img-frame" width=357 height=313 src="pictures/8.jpg">
<img class="img-frame" width=357 height=313 src="pictures/9.jpg">

</div>


<script>
// initialize a counter
var i = 0;
// imgFrames holds Array of img-frame
var imgFrames = document.getElementsByClassName('img-frame');
//setting currentFrame as 0.jpg
var currentFrame = imgFrames[0];
// setting first image to opacity 1
currentFrame.style.opacity = 1;

function nextImage() {
fadeOut(currentFrame);
// set back counter to 0 after it reaches the last image
if (i >= 10) {
i = 0;
}
currentFrame = imgFrames[i];
i=i+1;
setTimeout(fadeIn(currentFrame),500);
}

// Auxillary methods taking imgFrame Object
function fadeOut(imgFrame) {
imgFrame.style.opacity = 0;
}
function fadeIn(imgFrame) {
imgFrame.style.opacity = 1;
}

// change image after 3 seconds
setInterval(nextImage, 3000);
</script>

</body>

</html>

Hire Me For All Your Tutoring Needs
Integrity-first tutoring: clear explanations, guidance, and feedback.
Drop an Email at
drjack9650@gmail.com
Chat Now And Get Quote