Professional Documents
Culture Documents
http://discoveroutpost.com
Designer: ToyFight Ltd. http://toyfight.is
Development technologies jQuery, GSAP, CSS
14____________________________________________________________________ lightbox
LightBox
Outpost
#A99CB0
#545E6E
#373F64
#1F1D27
Above
Above
lightbox ____________________________________________________________________ 15
LightBox
Outpost
Create eye-catching
mousewheel zooming images
Create image components that can be dynamically resized using the users mousewheel interactions.
1. Page document
Start the project with the standard HTML document
template. The body section is used to store the visible
content elements, while the head section is used to store
the descriptive and additional page resources. In this
case, the head section is used to contain a set of
JavaScript code that controls the zoom effect.
<!DOCTYPE html>
<html>
<head>
<title>Mouse Zoom</title>
<script>
*** STEP 3
</script>
</head>
<body>
*** STEP 2
</body>
</html>
3. Zoom function
With the HTML now in place, the next step is to start the
definition of the JavaScript. The first part of this code
defines the functionality to perform the element
zooming. This has event detection for the mousewheel
delta value, which is used to apply a calculated width to
the images style attribute. Additionally, speed and
minWidth variables are set for you to change the speed
and minimum width of the resizing.
Usability feature
16____________________________________________________________________ lightbox
this.style.width = Math.max(minWidth,
Math.min(this.maxWidth, this.width +
(speed * delta))) + px;
}
*** STEP 4
window.addEventListener(load,function(){
*** STEP 5
});
nodes[i].maxWidth = nodes[i].width;
nodes[i].addEventListener(mousewheel,zo
om);
nodes[i].addEventListener(DOMMouseScroll
, zoom);