Lesson 102: Mashup

Estimated Length: 30 min | Difficulty: Intermediate

In this lesson, we will be going over how to do a Photo Mashup using jQuery. A "mashup" is an effect when you click on different parts of an image and they slide to show a different image.

The Mashup we will be doing today includes a "mashup" of celebrity faces. Simply click on the different parts of the face (forehead, eyes, noes, mouth) to slide through the different celebrity facial parts!

forehead
eyes
nose
mouth

Mashup Code

HTML

The HTML for this lesson is simple. All you need is an outside div (we named ours "picbox") to contain each line of code for the 4 different images. We also add a div around each img link and give it an id that relates to which body part it is. (forehead, eyes, nose, mouth) We also add a class to this div and name it "face".

See the code below:

<div class="picbox">

<div id="forehead" class="face"><img src="lib/images/forehead.png" alt="forehead"/> </div>

</div>

<div class="picbox">

<div id="eyes" class="face"><img src="lib/images/eyes.png" alt="eyes" height="51"/> </div>

</div>

<div class="picbox">

<div id="nose" class="face"><img src="lib/images/nose.png" alt="nose" height="33"/> </div>

</div>

<div class="picbox">

<div id="mouth" class="face"><img src="lib/images/mouth.png" alt="mouth" height="88"/> </div>

</div>

CSS

Here is some basic CSS styles that we added. Feel free to adjust them however you wish to better fit your website.

.picbox{width:214px; overflow:hidden; z-index:2}

#forehead{height:77px;}

#eyes{height:51px;}

#nose{height:33px;}

#mouth{height:88px;}

.face{position:relative; top:0px; left:0px; z-index:1;}

jQuery

The jQuery for this lesson may appear very lengthy and complicated, but it really is just a lot of repeating the same if/else statement for each of the face sections. Once you have the first part sorted out, the rest is easy.

<script>

$(document).ready(function(){//document is ready

var headclick = 0, eyeclick = 0, noseclick = 0, mouthclick = 0; //setting variables

$("#forehead").click(function(){//selects id forehead and adds a click function

if(headclick < 9){ //sets an if statement for less than nine clicks

$("#forehead").animate({left:"-=214px"},500); //selects id forehead and adds an animation

headclick+=1;

} //end if statement

else{

$("#forehead").animate({left:"0px"},500);

headclick=0;

} //end else statement

});

$("#eyes").click(function(){//selects id eyes and adds a click function

if(eyeclick < 9){ //sets an if statement for less than nine clicks

$("#eyes").animate({left:"-=214px"},500); //selects id eyes and adds an animation

eyeclick+=1;

} //end if statement

else{

$("#eyes").animate({left:"0px"},500);

eyeclick=0;

} //end else statement

});

$("#nose").click(function(){//selects id nose and adds a click function

if(noseclick < 9){ //sets an if statement for less than nine clicks

$("#nose").animate({left:"-=214px"},500); //selects id nose and adds an animation

noseclick+=1;

} //end if statement

else{

$("#nose").animate({left:"0px"},500);

noseclick=0;

} //end else statement

});

$("#mouth").click(function(){//selects id mouth and adds a click function

if(mouthclick < 9){ //sets an if statement for less than nine clicks

$("#mouth").animate({left:"-=214px"},500); //selects id mouth and adds an animation

mouthclick+=1;

} //end if statement

else{

$("#mouth").animate({left:"0px"},500);

mouthclick=0;

} //end else statement

});

});

</script>

Photoshop: Setting up the Mashup Images

In order for the mashup to work properly, a fair amount of photoshop editing is needed.

1. To start - Open a picture of a celebrity into Photoshop (We used Jack Black) and use the Rulers tool to section out the parts of the face. (forehead, eyes, nose, mouth)

It should look something like this.

mashup sections

2. Now that you have the base sections set up, create new layers and add a new picture of a celebrity to each layer. Try to make it so that their face lines up with the rest of the faces. You can use the opacity tool in the layers module to see if everything is lining up correctly. It does not need to be perfect, just close enough.

layers

It should look something like the image above

3. Now that we have all 10 images placed in and lined up, we are going to use the marquee tool to select the parts of the face

marquee tool

The marquee tool is the small highlighted tool in the Photoshop Toolbar

Use this to drag a selection across a section of the face. Once you have it selected you can copy that section of the image to save into a new file.

The selection should look something like this:

selection

After you have copied it, pase it into a new document that is 10 times the width of the copied selection

Continue copying this selection on each of the images/layers until you have all of the face sections in the new file. Save this file as a .jpg

Here is what it should look like:

eyes

4. Continue this process until you have a long .jpg file for each section of the face. To make it easier, I named each file after what part of the face it was. Ex. forehead.jpg, eyes.jpg, nose.jpg, chin.jpg