pineapple cartoon

JavaScript & JQuery Tutorial

Hello There!

This tutorial will showcase three step-by-step easy and effective jQuery effects to add to your webpage.

Excited to learn? Scroll down to get started!

What is JavaScript?

JavaScript is the language for programming webpages. It is a powerful scripting language that allows us to make webpages more dynamic and interactive.

Javascript complements the strucutral layer of HTML and style pages of CSS.

What is JQuery?

JQuery is a JavaScript library that is lightweight and has the model, "write less, do more".

In simplier terms, the purpose of jQuery is to make it easier to implement JavaScript in a webpage.

What's next?

Once you get the hang of JavaScript & jQuery, you'll be able to add interactive and animated elements to a webpage!

For example, you can animate text, create a image slider or create a sticky navigaton bar that sits at the top of the browser window. It's all fun stuff!

Tutorial #1: Image Slider

In this tutorial, we will use the Fotorama jQuery plugin to create a simple and stunning image slider for your webpage! Bonus: This plugin also works great with mobile devices too!

Demo

pineapple img pineapple img pineapple img pineapple img pineapple img

Download

Download the Fotorama.zip file and extract the following documents: fotorama.css, fotorama.js and fotorama.png. Place the documents in their corresponding folders for your webpage. The zip file can be downloaded HERE.

Note: Place fotorama.png in the same folder as fotorama.css.

JS

Place the following jQuery CDN below in your HTML document before the closing </body> tag. Without this CDN, jQuery will not work.

Next, link the script file fotorama.js after the jQuery CDN.

							
								<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
								<script src="scripts/fotorama.js"></script>
							
						

HTML

Create a div class called "fotorama" and place all images in the div to be showcased in the image slider. The HTML markup should look similar to the code below.

Note: The photos used in the demo have been resized with photoshop to 900px x 500px.

							
								<div class="fotorama">
								<img src="images/pineapple-01.jpg" 	alt="pineapple img">
								<img src="images/pineapple-02.jpg" 	alt="pineapple img">
								<img src="images/pineapple-03.jpg" 	alt="pineapple img">
								<img src="images/pineapple-04.jpg" 	alt="pineapple img">
								<img src="images/pineapple-05.jpg" 	alt="pineapple img">
								</div> 
							
						

CSS

Link the stylesheet fotorama.css in the <head> of the HTML doc.

							
								<link rel="stylesheet" type="text/css" href="styles/fotorama.css">
							
						

Style the div class fotorama to the size of your images.

							
								.fotorama{
								width:900px;
								height:500px;
							}
						
					

Tutorial #2: Image Zoom

In the second tutorial, we will use the Elevate Zoom jQuery plugin to create a basic zoom effect when you mouseover an image. This tutorial is perfect to implement on your next webpage! Try it out below!

Demo

food image

Download

Download the Elevatezoom-master.zip file and extract the document: jquery.elevateZoom-3.0.8.min.js (this is the most lightweight one available). Place the .js file in the corresponding folder for your webpage. The zip files can be downloaded HERE.

On the Elevate Zoom webpage, you can also view the other plugin examples within the same .js document. Other examples include: Tints, Gallery Lightbox, Lens Zoom etc.

JS

Link the script file jquery.elevateZoom-3.0.8.min.js after the jQuery CDN but before the closing </body> tag. Second, include the following script code directly after the Elevate Zoom script. This will initialize the plugin.

						
							<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
							<script src="scripts/jquery.elevateZoom-3.0.8.min.js"></script>
							<script>
							$('#zoom_01').elevateZoom();
							</script>
						
					

HTML

Simply code an <img> tag (or many) and include the id of "zoom_01". The HTML markup should look similar to the code below.

Note #1: The photos used in the demo have been resized with photoshop to 400px x 267px (small photo) and 1280px x 853px (large photo). You must have two photo sizes for the basic zoom function to work.

Note #2: There is a div class around the <img> tag for styling purposes.

Note #3: Place the large image in "data-zoom-image" and the small image in "src".

						
							<div class="demo">
							<img id="zoom_01" src="images/food-02.jpg" data-zoom-image="images/food-01.jpg"/>
							</div>
						
					

CSS

Style the id "zoom_01" to your preference.

						
							#zoom_01{
							margin: 0 auto 10px;
							display:block;
						}
					
				

Tutorial #3: Image Slider Cross Fade

In the last tutorial, we will learn how to write a script that creates an image slider with the cross fade effect. Check out the demo below and see how the images rotate!

Demo

flower img flower img flower img flower img flower img flower img

HTML

Create a div class with your preferred naming convention then place images in the div for the slider. The HTML markup should look similar to the code below.

Note: All images in the demo are resized with photoshop to 900px x 500px.

					
						<div class="slider-cross-fade">
						<img src="images/flower-01.jpg" alt="flower img">
						<img src="images/flower-02.jpg" alt="flower img">
						<img src="images/flower-03.jpg" alt="flower img">
						<img src="images/flower-04.jpg" alt="flower img">
						<img src="images/flower-05.jpg" alt="flower img">
						<img src="images/flower-06.jpg" alt="flower img">
						</div> 
					
				

CSS

Style the div class as per your preference. Make sure to set the div class to a position of "relative" and include the height and width of the images.

Next, style the div class images to position of "absolute" with top:0 and left:0. This should place your images on top of each other for the slider to work.

					
						.slider-cross-fade{
						margin-left: auto;
						margin-right: auto;
						margin-bottom: 20px;
						position: relative;
						width: 900px;
						height: 500px;
					}

					.slider-cross-fade img{
					position: absolute;
					top: 0;
					left: 0;
				}
			
		

JS

Create a script file for the jQuery you are about to write and link it to your html document. Place the script file anywhere below the jQuery CDN but before the closing </body> tag .

			
				<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
				<script src="scripts/scripts.js"></script>
			
		

Here comes the fun part, now it's time to write the script for the image slider! Take a look at the script below for reference. Make sure to set a variable for your slider images and indicate the time for your images to rotate! You will need to write a function to rotate the images one by one.

			
				var sliderImages = $('.slider-cross-fade img');
				var numberOfImages = sliderImages.length;

				sliderImages.hide();

				rotatePics(1);

				function rotatePics(currentPhoto){
				
				currentPhoto = currentPhoto % numberOfImages;
				
				sliderImages.eq(currentPhoto)
				.fadeOut(function(){

				sliderImages.each(function(i){
				
				$(this).css(
				'z-index', ( ((numberOfImages - i ) + currentPhoto) % numberOfImages) );			
			});
			
			$(this).siblings().show();

			setTimeout(function(){
			rotatePics(++currentPhoto);
		}, 1000); // indicate the time for the images to rotate
		
	});// end fade out function	
};

And Voila!

You did it! Hope you enjoyed the three tutorials showcased here today!