You are on page 1of 3

Outpost

http://discoveroutpost.com
Designer: ToyFight Ltd. http://toyfight.is
Development technologies jQuery, GSAP, CSS

14____________________________________________________________________ lightbox

This business portfolio site


uses scrolling animations and
slider transitions to highlight
project case studies

LightBox
Outpost

#A99CB0

#545E6E

#373F64

#1F1D27

Above

Above

Larsseit, by Type Dynamic, styles the subsequent


paragraph text in Light, Regular and Bold forms

Noe Display, from foundry Schick Toikka, appears in


Medium weight, styling the text for the main headings

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>

2. Zoomable image components


The body section contains the page content, which in
this case is two images. A zoom class is applied to these
images so that JavaScript knows to apply the zooming
functionality to them. This allows you to be selective with
which images have this functionality by applying the
class to just the images you want to have it.

<img src=image.jpg alt=zoom image


class=zoom />
<img src=image.jpg alt=zoom image
class=zoom />

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.

var zoom = function(e){


var speed = 15, minWidth = 50;
var delta = Math.max(-1, Math.min(1, (e.
wheelDelta || -e.detail)));

Usability feature

This feature could be used to incorporate


usability features for people who are visually
impaired as well as for general user experience.

16____________________________________________________________________ lightbox

this.style.width = Math.max(minWidth,
Math.min(this.maxWidth, this.width +
(speed * delta))) + px;
}
*** STEP 4

4. Window load event


The next step of the JavaScript code is to find the image
elements to apply the previously defined zoom function
to. However, these images will load onto the page after
the head sections JavaScript has been executed
because the head section is read first. To get around this,
we put the required code inside an event listener that
waits until the page has completed loading.

window.addEventListener(load,function(){
*** STEP 5
});

5. Find zoomable images


The next step is to find the images that are to have the
zoom functionality. This is achieved by using the
documents querySelectorAll method that allows us to
search the web page for anything that matches a defined
CSS rule. In this case, we will search for images with the

zoom class and store them in the nodes reference. We


then do a loop through the returned nodes array using i
as the index reference.

var nodes = document.


querySelectorAll(img.zoom);
for(var i=0; i<nodes.length; i++){
*** STEP 6
}

6. Apply attribute and listener


The zoom function is activated through the application of
an event listener on the page items found. Firefox uses
the nonstandard DOMMouseScroll, hence the need to
attempt to apply both this and the standard
mousewheel listener for cross browser compatibility.
Both versions call the same zoom function in response to
the mousewheel. A maxWidth attribute is also applied to
each node so that zoom can identify not to resize larger
than the original size.

nodes[i].maxWidth = nodes[i].width;
nodes[i].addEventListener(mousewheel,zo
om);
nodes[i].addEventListener(DOMMouseScroll
, zoom);

You might also like