Modify a carousel to display an enlarged image using animation In this exercise,
ID: 3762358 • Letter: M
Question
Modify a carousel to display an enlarged image using animation
In this exercise, you’ll modify a carousel application so that when an image in the carousel is clicked, an enlarged image is displayed using animation.
1. Open the HTML and JavaScript files in this folder: exercises_extrach08carousel Then, run the application and notice that an enlarged image of the first book in the carousel is displayed.
2. Review the HTML for the application, and notice that it contains an img element with an id of “image” following the heading. Also notice that the href attributes of the <a> elements in the carousel are set to the URL of the enlarged image to be displayed when the associated carousel image is clicked.
3. Code an event handler for the click event of the <a> elements in the list. This event handler should start by getting the URL for the image to be displayed. Then, it should assign this URL to the enlarged image.
4. Add animation to the click event handler so the opacity of the current image is set to 0 and 205 is subtracted from the left margin of the image over a period of 1 second. Use a callback function to reverse this animation. This function should also contain the statement that sets the URL for the enlarged image. The effect will be for the current image to fade out as it slides to the left, and then for the new image to fade in as it slides to the right.
HTML: index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel Animation</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="carousel.js"></script>
</head>
<body>
<section>
<h1>View our Books</h1>
<img id="image" src="images/book1.jpg" alt="SQL Server 2008 for Developers">
<div id="carousel">
<div id="left_button" class="button_panel"><img src="images/left.jpg" alt=""></div>
<div id="display_panel">
<ul id="image_list">
<li><a href="images/book1.jpg"><img src="images/book1.jpg" alt="SQL Server 2008 for Developers"></a></li>
<li><a href="images/book2.jpg"><img src="images/book2.jpg" alt="PHP and MySQL"></a></li>
<li><a href="images/book3.jpg"><img src="images/book3.jpg" alt="Visual Basic 2010"></a></li>
<li><a href="images/book4.jpg"><img src="images/book4.jpg" alt="ADO.NET 4 database programming with VB 2010"></a></li>
<li><a href="images/book5.jpg"><img src="images/book5.jpg" alt="ASP.NET 4 web programming with VB 2010"></a></li>
<li><a href="images/book6.jpg"><img src="images/book6.jpg" alt="Oracle SQL and PL/SQL"></a></li>
<li><a href="images/book7.jpg"><img src="images/book7.jpg" alt="Java Servlets and JSP"></a></li>
<li><a href="images/book8.jpg"><img src="images/book8.jpg" alt="C# 2010"></a></li>
<li><a href="images/book9.jpg"><img src="images/book9.jpg" alt="ASP.NET 4 web programming with C# 2010"></a></li>
</ul>
</div>
<div id="right_button" class="button_panel"><img src="images/right.jpg" alt=""></div>
</div>
</section>
</body>
</html>
CSS: main.css
article, aside, figure, footer, header, nav, section {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
margin: 0 auto;
width: 410px;
height: 480px;
border: 2px solid blue;
}
section {
padding: 20px 0;
}
h1 {
font-size: 140%;
text-align: center;
margin-bottom: .5em;
}
#image {
height: 250px;
margin-bottom: 1em;
margin-left: 105px;
}
/* the styles for the carousel */
.button_panel {
height: 125px;
padding: 50px 15px;
float: left;
}
.button_panel img {
width: 25px;
height: 25px;
}
#display_panel {
height: 125px;
width: 300px;
overflow: hidden;
float: left;
}
#image_list {
left: 0px;
position: relative;
width: 900px;
list-style: none;
}
#image_list li {
float: left;
width: 100px;
}
#image_list li img {
width: 95px;
}
JAVASCRIPT: carousel.js
$(document).ready(function() {
var slider = $("#image_list"); // slider = ul element
var leftProperty, newleftProperty;
// the click event handler for the right button
$("#right_button").click(function() {
// get value of current left property
leftProperty = parseInt(slider.css("left"));
// determine new value of left property
if (leftProperty - 300 <= -900) {
newLeftProperty = 0; }
else {
newLeftProperty = leftProperty - 300; }
// use the animate function to change the left property
slider.animate( {left: newLeftProperty}, 1000);
}); // end click
// the click event handler for the left button
$("#left_button").click(function() {
// get value of current right property
leftProperty = parseInt(slider.css("left"));
// determine new value of left property
if (leftProperty < 0) {
newLeftProperty = leftProperty + 300;
}
else {
newLeftProperty = 0;
}
// use the animate function to change the left property
slider.animate( {left: newLeftProperty}, 1000);
}); // end click
}); // end ready
Explanation / Answer
Here is the modified working code, You just need to add up the image URL's
(Featured booknames/covers) which is required and you are good to go with it.The code for the image carousel looks like this.
$(document). ready(function() {
image carouselcodevar spacing = 140;
function createControl(src) {
return $('<img/>')
.attr('src', src)
.addClass('control')
.css('opacity', 0.6)
.css('display', 'none');
}
var $leftRollover = createControl('images/left.gif');
var $rightRollover = createControl('images/right.gif');
var $enlargeRollover = createControl('images/enlarge.gif');
var $enlargedCover = $('<img/>')
.addClass('enlarged')
.hide()
.appendTo('body');
var $closeButton = createControl('images/close.gif')
.addClass('enlarged-control')
.appendTo('body');
var $priceBadge = $('<div/>')
.addClass('enlarged-price')
.css('opacity', 0.6)
.css('display', 'none')
.appendTo('body');
var $waitThrobber = $('<img/>')
.attr('src', 'images/wait.gif')
.addClass('control')
.css('z-index', 4)
.hide();
$('#featured-books').css({
'width': spacing * 3,
'height': '166px',
'overflow': 'hidden'
}).find('.covers a').css({
'float': 'none',
'position': 'absolute',
'left': 1000
});
var setUpCovers = function() {
var $covers = $('#featured-books .covers a');
$covers.unbind('click mouseenter mouseleave');
// Left image; scroll right (to view images on left).
$covers.eq(0)
.css('left', 0)
.click(function(event) {
$covers.eq(0).animate({'left': spacing}, 'fast');
$covers.eq(1).animate({'left': spacing * 2}, 'fast');
$covers.eq(2).animate({'left': spacing * 3}, 'fast');
$covers.eq($covers.length - 1)
.css('left', -spacing)
.animate({'left': 0}, 'fast', function() {
$(this).prependTo('#featured-books .covers');
setUpCovers();
});
event.preventDefault();
}).hover(function() {
$leftRollover.appendTo(this).show();
}, function() {
$leftRollover.hide();
});
// Right image; scroll left (to view images on right).
image carouselcode$covers.eq(2)
.css('left', spacing * 2)
.click(function(event) {
$covers.eq(0)
.animate({'left': -spacing}, 'fast', function() {
$(this).appendTo('#featured-books .covers');
setUpCovers();
});
$covers.eq(1).animate({'left': 0}, 'fast');
$covers.eq(2).animate({'left': spacing}, 'fast');
$covers.eq(3)
.css('left', spacing * 3)
.animate({'left': spacing * 2}, 'fast');
event.preventDefault();
}).hover(function() {
$rightRollover.appendTo(this).show();
}, function() {
$rightRollover.hide();
});
// Center image; enlarge cover.
$covers.eq(1)
.css('left', spacing)
.click(function(event) {
$waitThrobber.appendTo(this).show();
var price = $(this).find('.price').text();
var startPos = $(this).offset();
startPos.width = $(this).width();
startPos.height = $(this).height();
var endPos = {};
endPos.width = startPos.width * 3;
endPos.height = startPos.height * 3;
endPos.top = 100;
endPos.left = ($('body').width() - endPos.width) / 2;
$enlargedCover.attr('src', $(this).attr('href'))
.css(startPos)
.show();
var performAnimation = function() {
$waitThrobber.hide();
$enlargedCover.animate(endPos, 'normal',
function() {
$enlargedCover.one('click', function() {
$closeButton.unbind('click').hide();
$priceBadge.hide();
$enlargedCover.fadeOut();
});
$closeButton
.css({
'left': endPos.left,
'top' : endPos.top
image carouselcode})
.show()
.click(function() {
$enlargedCover.click();
});
$priceBadge
.css({
'right': endPos.left,
'top' : endPos.top
})
.text(price)
.show();
});
};
if ($enlargedCover[0].complete) {
performAnimation();
}
else {
$enlargedCover.bind('load', performAnimation);
}
event.preventDefault();
})
.hover(function() {
$enlargeRollover.appendTo(this).show();
}, function() {
$enlargeRollover.hide();
});
};
setUpCovers();
image carouselcode});
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.