Slide show application with effects and animations for a travel agency (max. 100

ID: 3727956 • Letter: S

Question

Slide show application with effects and animations for a travel agency (max. 100%) Sunshine Beach travel agency needs to make their website more attractive and interactive by implementing some effects and animations. The requirements are: Using the images provided by the agency create a slide show. The slide show should show the slides by fading In and hide by fading out. At the same time, the caption of the slide should appear with animation of the font size, left property and opacity. Study the HTML (index.html) and CSS (in styles folder). Notice that in HTML the slides are in img elements and their captions are in their title attributes. Follow these steps to implement the slide show: 1) Create a jQuery ready event handler in the empty vacations-in-pictures.js file which is in the scripts folder; 2) In that ready event handler, get the first image (within div with id "slides") with jQuery and show it using jQuery fading in effect within 1 second. 3) At the same time, get the title of the first slide, set the text of h2 element with id "caption" to this title and show this h2 element by animating those properties within 1 second: Font size: 100% Left: 0 Opacity: completely opaque (visible) 4) Create a function expression which, when called, hides the current caption (h2 element) and current slide, gets next slide and caption, and shows next caption and next slide. Current caption is hidden by animating the following properties within 0.5 seconds: Font size: 50% Left: -300 Opacity: completely transparent (invisible) Within the function expression the current image is hidden with fade out effect within 0.5 seconds. As soon as the current image is hidden, you need to get next slide in the list of slides and fade in within 1 second (you should check if you are at the last slide already, and if not, get next slide, otherwise get first slide because you need to restart the slide show from first slide when you are at the last slide) At the same time of showing next slide, get next image’s title, set the text of h2 element to this title and show it by animating the same properties as in step 3. 5) Create an interval timer that calls the function expression that you created in step 4 every 4 seconds

Explanation / Answer

I have created a jquery function for fadin and fadeout of the images that given inside the div for the image slide show.

The codes are explained below

In the script file vacations-in-pictures.js i have added ready function so that the code inside to this function will trigger immediately the page get loaded

$(document).ready(function(){ });

Inside this ready function i have made all the images to hide so that we can create a function to display one image at a time

$('#slides').find("img").hide();

After to this the below function is called, please read the inline comment given inside the code. which is a toggle method to hide and show the image like a slider. The comment is in bold text

function showImages(firstImg)

{

//get the current visible image

var $imgVisible = $('#slides img:visible');

//get the title of last image in the div

var lastTitle = $("#slides img:last").attr("title");

//If either parameter is true

//The current visible image's title matches with last image title

//then show the first image so that it keep on looping the slides

if(firstImg == true || lastTitle == $imgVisible.attr("title"))

{

$('#slides img:first').fadeIn();

var title = $("#slides img:first").attr("title");

$("#caption").html(title);

animateHeader();

}

//hide the current visible image and show the next image immediate to it

else

{

$imgVisible.fadeOut();

$imgVisible.next().fadeIn(function(){

var title = $(this).attr("title");

$("#caption").html(title);

animateHeader();

});

}

Now the full code of the vacations-in-pictures.js is gievn below

***************JQuery Code****************

$(document).ready(function(){

//Hide all the images at the beginning

$('#slides').find("img").hide();

//Show only the first image

//We sending the parameter as true ehich means to shwo only first image

showImages(true);

//Keep repeat the function for the

//interval of 3 seconds

setInterval(function(){debugger;

showImages(false);

}, 3000);

});

function showImages(firstImg)

{

//get the current visible image

var $imgVisible = $('#slides img:visible');

//get the title of last image in the div

var lastTitle = $("#slides img:last").attr("title");

//If either parameter is true

//The current visible image's title matches with last image title

//then show the first image so that it keep on looping the slides

if(firstImg == true || lastTitle == $imgVisible.attr("title"))

{

$('#slides img:first').fadeIn();

var title = $("#slides img:first").attr("title");

$("#caption").html(title);

animateHeader();

}

//hide the current visible image and show the next image immediate to it

else

{

$imgVisible.fadeOut();

$imgVisible.next().fadeIn(function(){

var title = $(this).attr("title");

$("#caption").html(title);

animateHeader();

});

}

//Animate the header h2

//since the interval is too small so the animation is hard to notice

function animateHeader() {

var $elem = $('#caption');

$('#caption').css({"font-size": "40px;"});

$elem.animate({

fontSize: "100%",

left:0,

opacity:1

}, 1000);

}

************************END**********************

And the HTML Code

********************HTML********************

<!DOCTYPE html>

<html>

<head>

<title>Sunshine Beach Vacations in Pictures</title>

</script>
<script src="scripts/vacations-in-pictures.js"></script>

</head>

<body>

<h1 class="animated zoomInLeft">Sunshine Beach Vacations in Pictures</h1>

</div>

</main>

</body>

</html>

**************END*************************

Navigate

Slide appropriate reactants into the boxes to conduct the following synthetic tr

Slide show as sequence: Create a new document, l5p2.html by copying the code fro

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Slide show application with effects and animations for a travel agency (max. 100

Question

Explanation / Answer

Related Questions

Navigate