Welcome

Here you will find a few tutorials using jQuery and starring gnomes. If you get lost, the mushrooms are here to help. They are jumping up and down in anticipation. Enjoy!

Tutorial 1

Gnome Hat Gnome Mouth Gnome Moustache Gnome Face Gnome Body

Customise the gnome.

Hat

Moustache

Mouth

Body

Explanation

The gnome is composed of absolutely positioned overlapping png files with transparent backgrounds. Each component such as hat, moustache, mouth and body is its own slider. The jQuery script creates an array of the options for each component, and the next and previous buttons cycles through them when clicked.

HTML

    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <div class="slider_gnome">
    <img id="hat" src="img/gnome/hat1.png" width="480" height="640" alt="Gnome Hat">
    <img id="mouth" src="img/gnome/mouth1.png" width="480" height="640" alt="Gnome Mouth">
    <img id="moustache" src="img/gnome/moustache1.png" width="480" height="640" alt="Gnome Moustache">
    <img id="face" src="img/gnome/face.png" width="480" height="640" alt="Gnome Face">
    <img id="body" src="img/gnome/body1.png" width="480" height="640" alt="Gnome Body">
  </div><!-- end gnome -->
    <div class="controls">
<p>Customise the gnome.</p>
<h3>Hat</h3>
<button id="btn_01"><< Prev</button>
<button id="btn_02">Next >></button>
<h3>Moustache</h3>
<button id="btn_03"><< Prev</button>
<button id="btn_04">Next >></button>
<h3>Mouth</h3>
<button id="btn_05"><< Prev</button>
<button id="btn_06">Next >></button>
<h3>Body</h3>
<button id="btn_07"><< Prev</button>
<button id="btn_08">Next >></button>
</div><!-- end controls -->
    
  

CSS

    
.slider_gnome {
	float: left;
	position: relative;
	width: 480px;
	height: 640px;
	}

.slider_gnome img {
	position: absolute;
	top: 0;
	left: 0;
	}

#hat {
	z-index: 500;
	}

#mouth {
	z-index: 400;
	}

#moustache {
	z-index: 300;
	}

#face {
	z-index: 200;
	}
    
  

jQuery

    
// Store the element with an id of "hat" in the variable "hatDisplay" 
var hatDisplay = $('#hat');
var mouthDisplay = $('#mouth');
var moustacheDisplay = $('#moustache');
var bodyDisplay = $('#body');

// store the the button elements 
var btn01 = $('#btn_01'); // hat
var btn02 = $('#btn_02');
var btn03 = $('#btn_03'); // moustache
var btn04 = $('#btn_04');
var btn05 = $('#btn_05'); // mouth
var btn06 = $('#btn_06');
var btn07 = $('#btn_07'); // body
var btn08 = $('#btn_08');

//////////////////////////////////////////////////////////
// Generate Arrays for the Gnome Graphics

// create a new array called hatImages
var hatImages = [];
arrayCreator(hatImages, 'img/gnome/hat');
// get length of hatImages array 
var hatImagesLength = (hatImages.length);

// create a new array called moustacheImages
var moustacheImages = [];
arrayCreator(moustacheImages, 'img/gnome/moustache');
// get length of hatImages array 
var moustacheImagesLength = (moustacheImages.length);

// create a new array called mouthImages
var mouthImages = [];
arrayCreator(mouthImages, 'img/gnome/mouth');
// get length of hatImages array 
var mouthImagesLength = (mouthImages.length);

// create a new array called bodyImages
var bodyImages = [];
arrayCreator(bodyImages, 'img/gnome/body');
// get length of hatImages array 
var bodyImagesLength = (bodyImages.length);

// Array Generator function
function arrayCreator(theArray, imgPath){
	
	// dynamically create array values for the hatImages array
	for(var i = 1; i <= 3; i++){

		theArray.push(imgPath + i + '.png' );		
	}
	
};

///////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////
// Click Event Handlers

// hat click handlers
btn01.click(function(){
	prev(hatDisplay, hatImages, hatImagesLength);	
});

btn02.click(function(){
	next(hatDisplay, hatImages, hatImagesLength);	
});

// moustache click handlers
btn03.click(function(){
	prev(moustacheDisplay, moustacheImages, moustacheImagesLength);	
});

btn04.click(function(){
	next(moustacheDisplay, moustacheImages, moustacheImagesLength);	
});

// mouth click handlers
btn05.click(function(){
	prev(mouthDisplay, mouthImages, mouthImagesLength);	
});

btn06.click(function(){
	next(mouthDisplay, mouthImages, mouthImagesLength);	
});

// mouth click handlers
btn07.click(function(){
	prev(bodyDisplay, bodyImages, bodyImagesLength);	
});

btn08.click(function(){
	next(bodyDisplay, bodyImages, bodyImagesLength);	
});
//////////////////////////////////////////////////////////



// Create the prev function
function prev(theItem, theArray, theArrayLength){
	
	// Get the current image's "src" attribute value and store it in the
	// variable "currentImage
	var currentImage = theItem.attr('src');
	
	// create the imageNumber variable
	var imageNumber;
	
	// loop through the hatImages array		
	for( var i = 0; i < theArrayLength; i++){
		
		// test to see if hatImages array item value matches
		// the current image's "src" attribute value
		if(theArray[i] == currentImage){
			
			// if hatImages[i] is equal to the current image
			// then set imageNumber to the current value of "i"
			imageNumber = i;
				
		};
			
	};
	
	// test to make sure the rotate clockwise button
	// does not create an image number that is above
	// the highest array item
	// If the imageNumber is at the top then set the
	// image number to zero
	if( imageNumber == ( theArrayLength - 1 ) ){
		imageNumber = 0;	
	}else{
		// add one to the current image
		imageNumber++;	
	};
	
	// set the current images src value to the next image
	//hatDisplay.setAttribute('src', hatImages[imageNumber]);
	theItem.attr('src' , theArray[imageNumber]);
	
};

// create the next function

function next(theItem, theArray, theArrayLength){
	
	// Get the current image's "src" attribute value and store it in the
	// variable "currentImage"	
	var currentImage = theItem.attr('src');
	
	// create the imageNumber variable
	var imageNumber;
	
	for( var i = 0; i < theArrayLength; i++){
		
		// test to see if hatImages array item value matches
		// the current image's "src" attribute value
		if(theArray[i] == currentImage){
			
			// if hatImages[i] is equal to the current image
			// then set imageNumber to the current value of "i"
			imageNumber = i;			
			
		};
			
	};
	
	// test to make sure the rotate counter clockwise button
	// does not create an image number that is lower than
	// zero
	// If the imageNumber is at zero then set the
	// image number to the last photo in the array
	if( imageNumber == 0 ){
		imageNumber = ( theArrayLength - 1 );	
	}else{
		// subtract one from the current image
		imageNumber--;	
	};
	
	// set the current images src value to the previous image
	//hatDisplay.setAttribute('src', hatImages[imageNumber]);
	theItem.attr('src', theArray[imageNumber])
		
};
    
  

Back to top
Back to top

Tutorial 2

Change colors.

Hat

Shirt

Belt

Explanation

The gnome is an svg and the components that change color are assigned ids in the svg markup. For the colorpicker I am using a jQuery plug-in called Spectrum. The Spectrum script and css are called in the html markup. To initialize the script, there are a few lines of jQuery to add which specify which ids the color picker modifies when a new color is selected. The initial color to display is also set.

HTML

    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <link href="styles/spectrum.css" rel="stylesheet" type="text/css">
    <script src="scripts/spectrum.js"></script>
    <div class="svg_gnome">
	<svg version="1.1" id="Gnome" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="480px" height="640px" viewBox="0 0 480 640" enable-background="new 0 0 480 640" xml:space="preserve">
<g id="Body">
	<path id="Shirt" fill="#064880" d="M380.26,484.778c-4.197-12.972-21.557-35.41-38.172-42.153
		c-2.748,5.272-5.721,10.417-8.953,15.357c-20.068,30.673-94.009,53.702-94.009,53.702s-75.385-24.161-95.46-55.954
		c-2.425-3.841-4.702-7.793-6.842-11.827c-17.096,5.869-35.468,29.359-39.806,42.763c-6.356,19.642-11.606,51.353-5.526,62.11
		c2.909,5.147,16.453,9.459,27.509,9.94v66.076c0,0,52.986,15.08,119.272,15.08c66.283,0,120.728-15.08,120.728-15.08v-67.998
		c10.917-0.633,23.93-4.867,26.78-9.904C391.866,536.137,386.613,504.413,380.26,484.778z"/>
	<path id="LeftHand" fill="#ECC19C" d="M124.33,558.622c-8.604,0.786-20.803-1.745-27.83-5.589
		c1.384,15.509,18.563,33.82,34.718,30.72c13.368-2.565,19.799-20.63,19.954-33.313C144.504,554.407,132.716,557.856,124.33,558.622
		z"/>
	<path id="RightHand" fill="#ECC19C" d="M352.949,556.736c-8.392-0.765-20.181-4.217-26.849-8.183
		c0.16,12.689,6.583,30.745,19.954,33.315c16.162,3.105,33.34-15.226,34.723-30.725
		C373.754,554.989,361.561,557.521,352.949,556.736z"/>
	<g>
		<path id="Belt" fill="#1B1464" d="M326.668,555H150.864c-0.897,7.618-3.776,16.158-8.749,22h194.824
			C331.312,571.655,327.931,562.997,326.668,555z"/>
		<path fill="#B3B3B3" d="M219,548v37h44v-37H219z M253,576h-26v-20h26V576z"/>
	</g>
</g>
<g id="Head">
	<path id="Beard" fill="#F2F2F2" d="M289.884,320.318c-9.901-9.54-28.875-15.997-50.67-15.997c-21.774,0-40.734,6.445-50.642,15.972
		c-47.133,1.814-71.465,6.022-83.247,9.012c3.14,30.773,12.217,85.055,38.34,126.426c20.076,31.793,95.46,55.954,95.46,55.954
		s73.941-23.029,94.009-53.702c27.316-41.754,36.646-97.666,39.817-128.951C360.318,326.078,335.513,322.09,289.884,320.318z"/>
	<path id="Face" fill="#ECC19C" d="M289.884,320.318c-9.901-9.54-28.875-15.997-50.67-15.997
		c-21.774,0-40.734,6.445-50.642,15.972c-33.963,1.308-56.083,3.858-70.205,6.3c8.341,60.914,59.614,107.803,121.633,107.803
		c61.959,0,113.194-46.798,121.609-107.628C347.188,324.289,324.546,321.664,289.884,320.318z"/>
	<g id="Nose">
		<path fill="#DFB28B" d="M297.183,344.852c7.965-15.222-25.951-31.105-57.969-31.105c-32.014,0-65.378,15.607-57.967,31.105
			c10.368,21.679,25.953,29.219,57.967,29.219C271.231,374.07,289.2,360.104,297.183,344.852z"/>
		<path fill="#ECC19C" d="M297.183,335.425c0-17.178-25.951-31.104-57.969-31.104c-32.014,0-57.967,13.926-57.967,31.104
			c0,17.181,25.953,31.105,57.967,31.105C271.231,366.53,297.183,352.605,297.183,335.425z"/>
		<ellipse fill="#F0D0B4" cx="239.214" cy="314.689" rx="19.323" ry="10.368"/>
	</g>
	<path id="Moustache" fill="#F2F2F2" d="M329.865,374.577c-2.632-4.091-0.374,4.661-5.844,7.526
		c-4.722,2.476-11.11,4.758-20.22,2.036c-14.947-4.464-17.025-12.851-33.4-16.87c-13.277-3.259-25.229,3.508-30.52,11.968
		c-5.29-8.46-17.242-15.227-30.52-11.968c-16.375,4.02-18.453,12.406-33.4,16.87c-9.109,2.722-15.498,0.439-20.22-2.036
		c-5.47-2.865-3.212-11.617-5.844-7.526c-1.531,2.382-1.578,9.536,3.676,15.771c6.189,7.347,16.769,19.051,55.788,19.051
		c13.614,0,25.317-5.14,30.52-12.507c5.202,7.367,16.905,12.507,30.52,12.507c39.02,0,49.599-11.704,55.788-19.051
		C331.443,384.113,331.396,376.959,329.865,374.577z"/>
	<path id="Mouth" d="M239.342,410.237c-4.456,0-8.716-0.44-12.646-1.237c1.282,6.53,6.455,11.418,12.646,11.418
		c6.189,0,11.363-4.888,12.645-11.418C248.058,409.797,243.797,410.237,239.342,410.237z"/>
	<path id="Hat" fill="#D43100" d="M239.214,304.321c21.795,0,40.769,6.457,50.67,15.997c76.943,2.988,94.678,12.28,94.678,12.28
		s-40.07-114.18-67.051-154.324c-18.271-27.186,26.979-128.21,26.979-128.21s-129.97,47.144-160.91,79.665
		c-38.115,40.063-88.142,202.869-88.142,202.869s16.186-9.342,93.134-12.305C198.479,310.767,217.44,304.321,239.214,304.321z"/>
</g>
</svg>

  </div><!-- end svg_gnome -->
    
  

CSS

    
  .svg_gnome {
	float: left;
	position: relative;
	width: 480px;
	height: 640px;
	}
   .controls {	
	float: left;
	}
    
  

jQuery

    
$("#colorpicker01").spectrum({
    color: "#D43100",
    change: function(color) {
		$('#Hat').attr('fill', color.toHexString());
    }
});

$("#colorpicker02").spectrum({
    color: "#064880",
    change: function(color) {
		$('#Shirt').attr('fill', color.toHexString());
    }
});

$("#colorpicker03").spectrum({
    color: "#1B1464",
    change: function(color) {
		$('#Belt').attr('fill', color.toHexString());
    }
});
    
  

Back to top
Back to top

Tutorial 3

Gnome

Explanation

The fly in effect is achieved with a jQuery plugin called Superscrollorama. The required scripts are called in the HTML and the script is initialized with a few lines which specify the div id to manipulate.

HTML

    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="fly-it">
  <img src="img/gnome/gnome3.png" width="382" height="509" alt="Gnome">
</div><!-- end gnome -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="scripts/jquery.superscrollorama.js"></script>
    
  

CSS

    
#fly-it {
	margin-left: 159px;
	position: relative;
	}
    
  

JavaScript

    
$(document).ready(function() {
  var controller = $.superscrollorama();
  // individual element tween examples	
  controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}));
});
    
  

Back to top
Back to top

Contact

Please feel free to leave a message for the gnomes.

Back to top
Back to top