In this post we present a collection of excellent Adobe Illustrator tutorials for beginners and advanced designers.

Have fun and Good Luck!

1. Create a Magic Book Using Adobe Illustrator

In this tutorial will find out how to create a magic book. The first half of this tutorial is dedicated to creating an open book, and in the remaining steps you’ll  learn how to create the background and add the magic effects.

2. Gradient Mesh Flower

In this tutorial you will see how to use Gradient Mesh for creation of this wonderful flower.

3. Create Bloody Halloween Ornament Using Adobe Illustrator

In this 20 steps tutorial you will find out how to create a bloody Halloween ornament yourselves. The ornament is a bit psychedelic however it worth doing it.

4. Realistic Vintage Vector Tutorial

In this tutorial you will discover how to make a great realistic typewriter with the help of Adobe Illustrator, so fasten your seat belts and let’s go.

5. Create Trees in Illustrator

In this tutorial you will see how to create a tree from a photograph. During the steps of this tutorial you will see the following tools in use: the freehand drawing tools, the shape tools and the Layers palette.

6. Create A Semi Realistic Bulb

In this tutorial, you will  see how to create a light bulb illustration. It’s a good tutorial for those struggling with drawing freehand.

7. Create psychedelic Halloween pumpkin face using Adobe Illustrator

During this 20 steps Illustrator tutorial you will create a cool spooky 5-eyed pumpkin.

8. Create a Jelly Fish In Adobe Illustrator

In this tutorial,  you will learn how to create a stylized jellyfish using blends and brushes.

9. Create a Sparkly Female Portrait

This step-by-step tutorial will show you how to create a sparkly female portrait by playing with transparency and overlapping vector shapes.

10. Create a Painterly Landscape With the Blob Brush Tool

In this tutorial you will create a painterly landscape with an intuitive and versatile Blob Brush Tool.

11. Create a Smoking Wooden Pipe

In this tutorial you will find out how to draw a stylish smoking tobacco pipe. You will also see how to create wood texture illustrator effect on the pipe.

12. Tracing a Vector Face From a Reference Photo

In this tutorial you will see the the process of tracing the basic shapes and contours of a photograph, as opposed to using predominately vector lines with strokes. This will result in a desirable, realistic yet stylized image.

13. Create a Lava Island Scenario in Illustrator

This tutorial is inspired by the Tiki and Mario culture. You will see how to draw these Mario characters.

14. Create an Elegant Patterned Vector Owl

In this tutorial you will draw an elegant patterned vector owl.

15. Zombie Illustration

In this step by step tutorial you will create a hand-drawn zombie illustration.

16. Create an awesome vector skate deck

In this Adobe Illustrator tutorial you will create your own vibrant and stunning vector artwork using geometric lines, shapes and a perfect color scheme. The result is an awesome deck design ready for wall hanging, or hooking up with trucks and wheels for a session on the street!

17. How to Illustrate a LeBron James Cartoon Character

This tutorial shows how to create an illustration of a LeBron James.

18. Perfect Vector Portraiture

In this tutorial by Simeon Elson you will see how to create a vector portrait.

19. Rolling Stone Inspired Tongue

In this tutorial you will create a graphic design icon – the bright red Rolling Stones tongue and lips logo.  It’s not a direct copy of the original but an inspired tongue graphic, starting with a quick pencil sketch and finishing with a vector based graphic in Adobe Illustrator.

20. Create an Grisly Zombie Illustration

In this tutorial you will create a zombie illustration with a pen tablet from a photo. Have fun utilizing the Blob Brush and Eraser tool in recreating this tutorial or apply these techniques to other ghoulish illustrations!

21. Create an awesome music Poster

In this tutorial you will draw an awesome music poster.

22. Create Realistic Bubble Effect

In this tutorial we will find out how to create realistic colorful bubbles. This tut covers numerous techniques.

23. Design a Skate deck With a Cool Skull Pattern

In this tutorial you will use Symbol Sprayer tool can for creating awesome pattern graphics and then combine them into an intricate pattern design to customize a skateboard deck.

24. Comic Book Style Graphic Design

In this tutorial you will learn how to create awesome illustrations and turn them into flyers or posters.

25. Stinking style Zombie Flesh Eater

In this tutorial, you will see how to create a cartoon zombie in Adobe Illustrator. Starting by creating a fresh corpse, you will then ‘yuck’ it up using a number of techniques.

26. Design With Flair

In this tutorial you will see how to apply flair technique. You will start from scratch with a basic photo and create a fully realized design.

27. How to Create Transparent Battery icon

In this tutorial,  you will create a detailed battery icon similar to the one used in the iPhone.

28. Making an abstract art Work

This tutorial shows you the principles of using the Live Paint Bucket tool, and what can be achieved with this great innovation in color management, which saves time, and may be used in countless sorts of project from character design to abstract Illustration.

29. Test Your Creativity

In this simple Adobe Illustrator tutorial you will create some sort of abstract mask.

30. Add Motion To Illustration Using lines

In this tutorial by Eric Van Den Boom you will see how to use lines and patterns to add a sense of motion to your illustration or photograph.

31. Create an Awesome Retro Beetle Type

In this tutorial you will create a vector image of an original Volkswagen Beetle using one of Illustrators most-used tools; the Pen Tool, as well as adding some finishing touches using a graphics tablet (an affordable Wacom Bamboo tablet in my case) to give the vector a nice hand-drawn style.

32. Create a Valentines Day Illustration For Your Sweetie

In this tutorial you will discover how to create a cheerful character and lovely, colorful bubbles. Use this knowledge to create a darling Valentine’s Day card for your sweetie.

33. Create a Realistic Candy Bar In Illustration

In this tutorial, you will see step by step how to create a realistic candy bar using Illustrator.

34. Create Movement In Illustration

In this tutorial you will learn how to create stylistic lines that can be used to simulate movement.

35. Creating a Toaster popping Illustration

In this tutorial, you will learn how to apply such rare effect as the Chrome effect, which is used to create a metallic look.  You will also use Texturizer tool to create a toast texture.

36. Create an Angry Octopus

This tutorial shows how to create an angry vector octopus character using brushes in Adobe Illustrator. It’s a simple 12 steps tutorial. Have fun!

37. From Start To Finish

In this tutorial,  you will find out how to create an illustration art piece so that you can witness what goes behind a digital illustrator’s work, as well as gain some new insights for your own projects’ workflow. We’ll go through conceptualization and idea gathering, creating illustrations in Illustrator, and then finishing the piece in Photoshop.

38. Create a luxurious Gold Watch

In this tutorial you will see how to create a very realistic and stunning gold watch using simple tools and techniques like the Pathfinder, Blend, Clipping Mask, etc.

39. Make a colorful, Environment Slice

In this tutorial you will create an earth slice that looks like a piece of cake.

40. Create a Cubist Style Logo Design

In this tutorial you will see how to create a cubist style logo design made up of lots of detailed vector facets.

41. Create a Realistic Guitar

In this tutorial you will draw a realistic guitar from scratch using the free vector program.  This tut requires a basic knowledge of vector tools, such as: the Pen tool, Edit Path Nodes tools, and you should be familiar with the Fill and Stroke toolbox.

42. Create a Video Projector

In this Adobe Illustrator tutorial you will learn how to make an old film projector, such as the early 20th century. Get ready because it’s time to start, open your Illustrator and let’s go.

43. Create a trippy Psychedelic Poster

In this tutorial you will see how to make a funny psychedelic poster in Adobe Illustrator.

44. Create a Clean Retro Badge

In this tutorial you will draw a clean retro-looking badge/burst in Adobe Illustrator. These are great for adding to a website, advertisement, etc to help the text stand out.

45. How to Illustrate a Tomato Using Adobe Illustrator

In this tutorial you  will use Meshes, Gradients and Blends for drawing a tomato. The skills you will learn here can easily be transferred to creating various objects. So let’s get started!

46. How To Make White Holiday Scene

In this tutorial you will create an entire winter landscape and fill it using numerous techniques, like blended blizzards, sprayed snowflakes, and more. The techniques you will use to create this illustration are fairly basic.

47. How to Create a Beautiful Windmill

Windmills have been around for centuries and although their construction evolved through time the idea remains the same. Let this tutorial be a tribute to those old fashioned windmills that are hardly met these days.

48. Create a Grumpy Troll Character

In this step by step tutorial  you will create a grumpy Internet troll character.  You will start the process with a basic pencil sketch then build up a complete vector character design with linework, color fills and basic shading to create a funny cartoon mascot.

49. Create a Picture Gallery In Gallery

In this tutorial you will see how to use 3D rendering, Blends, Opacity masks for creating this three-dimensional stage with vanishing points.

50. Create a Disco Ball

In this tutorial you will find out the right way for drawing a realistic disco ball.

Before getting started, be sure to view the demo to see how the ticker works. Here’s what the finished project will look like:

HTML Demo

Tutorial Details

• Technologies: HTML, CSS, JavaScript, jQuery
• Difficulty: Intermediate
• Estimated Completion Time: 20-30 minutes

Intro: Preparations

You should create an empty HTML file and save it somewhere convenient now; we’ll be working with it throughout this tutorial. We’ll be working exclusively with client-side code, so there’s no need for a server – you can preview directly on your computer. In the demo files we’ll use inline CSS and JavaScript, but you can externalize these if desired.

Tip: For this type of tutorial, it can be helpful to use jsBin or jsFiddle to follow along. These free online tools let you experiment with HTML, JavaScript and CSS without having to create any files on your computer. Best of all, you can save, version and share your experiments. It’s a great way to perfect a technique without cluttering up your computer with tons of files.

If you’re creating your own HTML file, here’s the code you should have to start:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>jQuery News Ticker</title>
  <style type="text/css">
  /* CSS will go here */

  </style>
</head>

<body>

  <!-- Markup will go here -->

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
  <script type="text/javascript">
  // JavaScript will go here

  </script>
</body>
</html>

Note the designated places for markup, CSS and JavaScript. Additionally, note that we have included jQuery 1.6 from Google’s CDN.

Step 1: The HTML Markup

We’ll use a dedicated <div> to hold the ticker. The links will be contained within an unordered list (<ul>). By using an HTML list to define the links, we ensure that the ticker will gracefully degrade for users with JavaScript disabled, and that search engines will still be able to see and follow all of the links. Add the following HTML markup to your page:

<div id="ticker" class="newsTicker">
    <a href="#">Newsroom</a>
    <span class="divider">|</span>
    <ul>
        <li><a href="#story1">Story headline 1</a></li>
        <li><a href="#story2">Another Story headline 2</a></li>
        <li><a href="#story3">Some third story headline</a></li>
        <li><a href="#story4">A final, fourth headline</a></li>
    </ul>
</div>

Update the list to contain an <li> for each of the links you want in the ticker. I’ve chosen to put a ‘Newsroom’ link at the start, but that’s up to you.

Step 2: Styling

Now it’s time to make the scroller look nice. In the <style> tag in the <head>, add the following CSS:

#ticker
{
    border: 1px solid #666;
    background: #DDD;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    color: #333;
    font: 13px/16px Arial,Verdana,sans-serif;
    padding: 3px 7px;
    width: 400px;
}
#ticker .divider {
    padding: 0 4px;
}
#ticker a, #ticker a:visited
{
    color: #333;
    text-decoration: none;
}
#ticker a:hover
{
    color: #930;
}

This adds some background and border to the overall ticker, and styles the links. These styles are just to get you started – if you want, you can add some creativity at this point! As we style, keep in mind that the <ul> won’t be present in the rendered HTML – it will be replaced with a single link that changes. That’s why there are only link styles and no list-related styling.

Step 3: Making It Work

Now we’re ready to add the jQuery-enhanced JavaScript to make the ticker actually work. I’ll show you the overall chunk first, then break down what each portion is doing.

Add the following chunk of JavaScript to the <script> tag at the bottom of the page:

$(function()
{
    $('#ticker').each(function()
    {
        var ticker = $(this);
        var fader = $('<span class="fader">&nbsp;</span>').css({display:'inline-block'});
        var links = ticker.find('ul>li>a');
        ticker.find('ul').replaceWith(fader);

        var counter = 0;
        var curLink;
        var fadeSpeed = 600;
        var showLink = function()
            {
                var newLinkIndex = (counter++) % links.length;
                var newLink = $(links[newLinkIndex]);
                var fadeInFunction = function()
                    {
                        curLink = newLink;
                        fader.append(curLink).fadeIn(fadeSpeed);
                    };
                if (curLink)
                {
                    fader.fadeOut(fadeSpeed, function(){
                        curLink.remove();
                        setTimeout(fadeInFunction, 0);
                    });
                }
                else
                {
                    fadeInFunction();
                }
            };

        var speed = 5500;
        var autoInterval;

        var startTimer = function()
        {
            autoInterval = setInterval(showLink, speed);
        };
        ticker.hover(function(){
            clearInterval(autoInterval);
        }, startTimer);

        fader.fadeOut(0, function(){
            fader.text('');
            showLink();
        });
        startTimer();

    });
});

If you preview now, you should see a working ticker that cycles through all of your links. If you hover over the ticker, it will pause; if you move your mouse away again, it will restart. Now, let’s break down what all of that code is doing.

Breaking Down the JavaScript – Overview

In plain English, here’s what the JavaScript is doing:

• Everything is wrapped in a document-ready trigger, so it will be called once the document is ready for manipulation
• We locate the news ticker
• We create an array that references the links, then replace the unordered list element in the document with a holder span. That holder will be used for displaying the current link.
• We define a function that transitions from one link to the next
• We create a timer, and set it to automatically pause when the user hovers over the ticker
• We show the first link and start running the timer

Breaking Down the JavaScript – Details

Now, lets take an in-depth look at what each of these pieces of code is doing.

Note that we use the #ticker selector to locate the ticker. If you had multiple tickers in your page, you could change this to div.newsTicker instead, since we applied a class of newsTicker to our ticker.

Chunk 1 – Finding the content, Preparing the document

var ticker = $(this);
var fader = $('<span class="fader">&nbsp;</span>').css({display:'inline-block'});
var links = ticker.find('ul>li>a');
ticker.find('ul').replaceWith(fader);

In this first chunk, we create a jQuery reference

to the current ticker. Then, we create a new <span> that will be used to hold the current link. The fader class is applied, to enable styling if desired. Note that we set the display property of the span to inline-block. This is important to enable fading of the text in Internet Explorer. Without some annoyingly-complex trickery (treating the text as a block-level element to be precise), IE fails to fade the text. Next, we create a jQuery list that references all of the link elements that were defined in the markup, so we can use them later on. Having created this list, we destroy the unordered list, replacing it with the fader span.

Chunk 2 – Creating the "Show me a new link" function

var counter = 0;
var curLink;
var fadeSpeed = 600;
var showLink = function()
    {
        var newLinkIndex = (counter++) % links.length;
        var newLink = $(links[newLinkIndex]);
        var fadeInFunction = function()
            {
                curLink = newLink;
                fader.append(curLink).fadeIn(fadeSpeed);
            };
        if (curLink)
        {
            fader.fadeOut(fadeSpeed, function(){
                curLink.remove();
                setTimeout(fadeInFunction, 0);
            });
        }
        else
        {
            fadeInFunction();
        }
    };

In this next major chunk, we define the method that will fade the link in and out. A counter keeps track of which link we’re on. The fadeSpeed variable specifies how fast the fade effect should be. By default, we use 600 milliseconds (0.6 seconds). Next, we define the function that will swap out the links. In this function we increment the counter and select the next link in the earlier-created list, automatically cycling back to the first by using the modulus operator (%). Then we define a temporary function that updates the reference to the current link, adds it to the fader span, then fades it in. Note that we fade the fader, not the link itself; this is part of the trickery to make the fading work properly in IE. Finally, we check to see if a link already is being displayed. If so, we first fade out the fader and remove that link upon effect completion. Then, after a microscopic delay to avoid item reference problems, we call the method to display the new link. On the other hand, if no link exists, we just display the new link directly.

Chunk 3 – Configuring Automatic progression, Starting it up

var speed = 5500;
var autoInterval;

var startTimer = function()
{
    autoInterval = setInterval(showLink, speed);
};
ticker.hover(function(){
    clearInterval(autoInterval);
}, startTimer);

fader.fadeOut(0, function(){
    fader.text('');
    showLink();
});
startTimer();

In the final chunk, we start things running. The speed variable defines (again, in milliseconds) how long each link should be visible when the ticker is automatically progressing. By default, we use 5500 (5.5 seconds). We define a startTimer method that creates an interval to call the earlier-defined showLink method every few seconds. Next, we add the listener that will automatically pause and restart the ticker when the user hovers over and leaves it. Then, to start the initial display, we instantly fade out the fader, empty its existing contents (a space character that’s required to force it to fade), and use showLink to fade in the first link. Finally, we start the timer.

Summary

You’ve now created a simple, compact news ticker to display newsworthy links on your site. The ticker functions properly in all browsers (including IE!) and automatically pauses when hovered-over, to ensure a good user experience. To enhance the ticker, you could use a server-side script (like PHP) to dynamically output the links. There are many possibilities! Moreover, you’ve learned about how jQuery’s document manipulation and effect tools can be leveraged to create nifty, useful widgets for your page. Have fun with your new knowledge!

1. Cute Panda Bear Face

In the following tutorial, you’ll learn how to create a cute panda bear face icon all from ellipses. The great part about this tutorial, is that you can easily apply the techniques to other icons, illustrations, logos, or other projects.

2. Character Mascot

In this intermediate Illustrator tutorial we will show you how to create a vector character mascot from a sketch in Adobe Illustrator CS4. The techniques in this tutorial can easily be applied to other illustrations, icons, and design elements; as well as legacy versions of Illustrator.

3. Drunken Monkey

In this tutorial, You’ll learn step-by-step how I’ve designed an attractive character in one of our recent projects, namely for the company “Drunken Monkey Collectibles”. Sergio will review the entire design process, from the first sketches and drafts to the final touches with Adobe Photoshop.

4. Super Happy Octopus

In Illustrator, it’s really easy to create fun characters with some simple shapes and the Pathfinder Panel. In the following tutorial I will explain how to create a Happy Octopus Character. You can use these techniques and elements to create whatever character you want!

5. Panda

With just a few simple shapes, a mix of gradient colours and a few shadows here and there you can build some great looking illustrations. Here’s a step by step walkthrough of the process used to create a cool Panda character, from the basic outlines through to the detailed final design.

6. Homer Simspon

This tutorial will teach you how to draw the Simpson’s favorite character, Homer Simpson, from the ground up. Our drawing project will involve drawing the outline of the character, applying strokes to these outlines, and then using various selection tools to color Homer’s skin and clothing. We will then finish it off by adding shadows and highlights to make it look similar to the image below.

7. Web Site Mascot

In this tutorial, I’m going to give an overview of how developed a character from the initial brief through to the final site mascot and then to go on to create several poses for different parts of the site.

8. Thug Bunny!

This tutorial will go through the method of using symmetry in your artwork. Learn how to do half the work but still get the full benefit from your artwork. We’ll also feature a plugin for AI that speeds up your build time and cover the topic of “Opacity Masks.”

9. Bunny

In this Illustrator tutorial, I will show you how to create a cute bunny character. This tutorial uses simple shapes and gradients that are easy to apply to other character illustrations

10. Monster

In this tutorial, we show you how to add the illusion of dimension to your vector illustrations by combining the effects of Adobe Illustrator’s versatile linear and radial gradients. Along the way we’ll also demonstrate how subtle (and believable) accents can be applied to your illustration to increase lasting visual appeal. By working within the basic tools of Illustrator, including Transparency and Pathfinder functions, and combining them with more complex tasks such as clipping masks, you can build a dynamic vector illustration that breaks the stereotype of ‘flatness’.

11. Lebron James

Sure Lebron James isn’t in Cleveland anymore but with super and unique styled steps in making this tutorial, it is a must check out tutorials for all character fans.

12. Zombie

In this tutorial, I will show you how to create a cartoon zombie in Illustrator. Starting by creating a fresh corpse, we will then ‘yuck’ it up using a number of techniques. Let’s ‘rip’ this one apart!

13. Cute Monster

We talk through the essential steps, from before you even pick up a pen and paper to working your design up as a vector image, and show you some of our processes for adding details to the character.

14. Furry Vector Monster

Follow these steps in Adobe Illustrator to create your very own super cute fuzzy monster character. We’ll be working with the basic shapes to start, then use a variety of gradients to add depth. We can then finish it off with some detailed fur effects to really lift the design from the screen.

15. Curious Owl

16. Cute Hamster Factory

17. Character Driven Book Cover Art

In this two part tutorial on creating the “Let’s Go To Monster School!” book cover, I’ll show you a complete process from initial sketch to the final artwork, using an Illustrator to Photoshop integrated workflow. In Part 1 we will employ Illustrator to trace our hand drawn sketch, lay down the shapes and define the basic colors.

18. Tiger Striped Cat

19. Lost Kid

20. Typeface

21. Cute Little Monster

This tutorial is going to show a gradient-heavy illustration of a little monster. It’s got a 3-D feel, but it’s done using only gradients. So, stick with us; we’re going to use and see some really nice easy tips for creating this little monster. The tutorial is intended for beginners.

22. Minion Despicable Me

23.Fat Cat

Tutorial aims to guide you from sketchbook to screen; a “Fat Cat” doodled with biro translated into a neat vector caricature. Intermediate knowledge of Adobe Illustrator is advised.

24. Fantasy Character

This tutorial covers the process of creating a fantasy pinup illustration with Illustrator CS3. This tutorial uses Live Paint, so you will need CS2 or above to follow.

25. Cute Little Tiger

We offer best quality MB7-838 exam. You can get our 100% guaranteed MB7-226 and MB6-295 to help you in passing the real exam of 70-595.

You are currently viewing a premium “Member’s Only” post from the Web Design Fan Club. To continue viewing this awesome content after June 16, you can become a member for the heavily discounted of $36/year or join us on a monthly basis for $9/month after June 16.

Did you read that right? Yes, yes you did. $36 for the year (8 months free) if you become a yearly subscriber before June 16. Seems kind of foolish to pass something like that up, eh?

Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. From WordPress themes to premium icon sets and vectors, advanced tutorials to educational resources and files, the Web Design Fan Club delivers. Not only that, but you gain access to interviews with some of the best web designers and developers working today.

How to Make an Image Magnifier in jQuery

1. Introduction and Demo
2. Setting Up the Function
3. The CSS
4. Inner Magnification Elements
5. Blur and Tint Magnification Elements
6. Shared Element Manipulation
7. The Inner Magnification Algorithm
8. The Blur and Tint Algorithms
9. Conclusion

Introduction

This is a tutorial for what is the most complicated jQuery program I have written to date. It is a beautiful script with a simple output that has many potential uses. Undoubtedly, it caused me more stress than it should have, as I debated the most efficient method of displaying a cropped image. Should I use background position or image clipping, scaling or thumbnailing? Which of the many options between methods and styles are cross-browser compatible? After days of debate and testing, I found the perfect combination for a code that supports all high-request browsers (including Internet Explorer 6).

This script takes an image and its thumbnail, then lets the user to magnify in on a specific area of that thumbnail. This allows you to condense an otherwise large image into a small space. Below, for example, is a 1024×768 image of a dog condense down to 320×240.

Demo: Image Magnifier Demo

I feel the need to note that this does not magically transform a low-resolution image into a high-resolution image. It requires both a high-resolution and low-resolution version beforehand. It also supports many different forms of customization, which I tried to emphasize with the examples – from custom colors to custom “animations” (inner, blurred, tinted, and blurred tinted). This tutorial will teach you to make these scripts yourself in the ever-beloved jQuery by walking you through the algorithms used.

Setting Up the Function

Of course, the first thing we’ll need to do is set up the function so that we may call the image magnifier easily. In order to create the function, we must first determine its parameters; and in order to determine its parameters, we must first determine what is likely to change on a per-call basis.

The dynamic features of each box are: whether or not it blurs, whether or not it tints, whether or not it magnifies inside the thumbnail (inner), the low-resolution image and its dimensions, the high-resolution image and its dimensions, the border width of the boxes, the border color of each box, and the border style of each box. Considering there are three boxes (the thumbnail, the popup that contains the high-resolution image, and the box that surrounds the mouse to show you which area is magnified), that is a lot of variables!

Thankfully, we can use objects to condense similar variables in a single variable. We are then left with the effect, the low-resolution image, the high resolution image, and the style information of the boxes. Four variables.

var imageMagnifier = function(effect, popup, thumbnail, css)
{
};

An example of these variables being sent to the function:

imageMagnifier(
{borderWidth: 4, blur: false, inner: false, tint: "#ff0000"},
image = {src: "image-magnifier.jpg", height: 768, width: 1024},
thumbnail = {src: "image-magnifier-thumbnail.jpg", height: 240, width: 320},
{
popup: {borderColor: "#906030", borderStyle: "outset"},
thumbnail: {borderColor: "#604020", borderStyle: "solid"}
}
);

Border Width is not included in the CSS for one simple reason: aesthetics and calculability. If the border width of the mouse box (the box that surrounds the mouse when magnifying) is not the same as the border width of the thumbnail, its border cannot overlap the thumbnail border appropriately. I can think of no scenario where the mouse box border would need to differ from the thumbnail’s, and many errors and nuisances occurring as a result of having to change it within every CSS object.

You should also make sure all the effect variables are set. This allows for shorter code. Instead of having to check to see if the variable is defined and true (typeof(effect.blur) != "undefined" && effect.blur), you can merely check to see if it is true.

var imageMagnifier = function(effect, popup, thumbnail, css)
{
var effects = ["blur", "inner", "tint"];
for (var x = 0; x < 3; x++)
{
if (typeof(effect[effects[x]]) == "undefined")
effect[effects[x]] = false;
}
};

Lastly, an extremely important variable needs to be established: the ratio of width to height between the thumbnail and the full-scale image (referred to herein as “popup,” since it pops up). This is necessary to determine both the size of the mouse box and how far to scroll the popup as your mouse scrolls across the thumbnail.

var imageMagnifier = function(effect, popup, thumbnail, css)
{
var effects = ["blur", "inner", "tint"],
ratio = {
height: popup.height / thumbnail.height,
width: popup.width / thumbnail.width
};
for (var x = 0; x < 3; x++)
{
if (typeof(effect[effects[x]]) == "undefined")
effect[effects[x]] = false;
}
};

The CSS

Before getting deep into the algorithms, it won’t hurt to cover and establish the CSS involved with the image magnifier. The static CSS is very short and to-the-point so will not take long to
cover.

First is the very outer element, div.image-magnify, and its three most important inner elements: div.box (the mouse box), div.popup (the full-scale image), and div.thumbnail.

We’ll want to float the thumbnail and popup to the left so that they stack horizontally next to each other.

div.image-magnify, div.image-magnify div.popup, div.image-magnify div.thumbnail { float : left; }

The box, popup, blur effect, and tint effect should be hidden by default, since they do not appear until you mouse over the thumbnail.

div.image-magnify div.blur div, div.image-magnify div.box, div.image-magnify div.popup, div.image-magnify div.tint { display : none; }

The box needs to have a relative position so that it can shift around as the mouse moves.

div.image-magnify div.box { position : relative; }

For aesthetic purposes, we’ll give div.thumbnail the curser of “move.”

div.image-magnify div.thumbnail { cursor : move }

Now to explain the blur “algorithm” and its CSS. It’s a very simple idea, really, made especially easy with jQuery’s built-in translucency handler. You merely take a translucent image (I use 80% visibility for this magnifier) that’s been shifted to the left 3px, and place it over the same translucent image shifted up 3px. Then place those two images over the same translucent image shifted to the right 3px. Then place those three images over the same translucent image shifted down 3px. Seeing partially through each image will result in a blur effect. Here it is one image added at a time:

Now that you understand how it blurs, you’ll easily understand the CSS for it:

div.image-magnify div.blur > div { background-position : -3px 0 }
div.image-magnify div.blur > div > div { background-position : 0 -3px }
div.image-magnify div.blur > div > div > div { background-position : 3px 0 }
div.image-magnify div.blur > div > div > div > div { background-position : 0 3px }

We also have some dynamic CSS [in that it changes on a per-magnifier basis] that is referenced very often in the JavaScript. I’ve compressed it into a quick-access variable since that makes it easier to use each time than typing out each string.

var imageMagnifier = function(effect, popup, thumbnail, css)
{
var cssCommon = {
background: "background-image : url('" + thumbnail.src.replace(/\'/g, "\\\'") + "');",
backgroundLarge: "background-image : url('" + popup.src.replace(/\'/g, "\\\'") + "');",
dimensions: "height : " + thumbnail.height + "px; width : " + thumbnail.width + "px;"
},
effects = ["blur", "inner", "tint"],
ratio = {
height: popup.height / thumbnail.height,
width: popup.width / thumbnail.width
};
cssCommon.thumbnail = cssCommon.background + " " + cssCommon.dimensions;
for (var x = 0; x < 3; x++)
{
if (typeof(effect[effects[x]]) == "undefined")
effect[effects[x]] = false;
}
};

cssCommon.background is the background image of the thumbnail, as it will be needed for div.thumbnail, div.box, and every div involved in blur. It becomes, then, much easier to reference it each time as cssCommon.background than its string equivalent.

cssCommon.backgroundLarge is the background image of the popup. This variable is only used twice (once for the inner algorithm and once for the other effect algorithms), so is not nearly as common as the thumbnail background.

cssCommon.dimensions is merely the dimensions of the thumbnail. Just like the background image, this applies to div.thumbnail and the blur divs. It does not apply to div.box, since its width is determined by the dimension ratio between the low-resolution and high-resolution images; but it does apply to div.tint which will need to overlay the thumbnail.

Lastly in cssCommon, we have cssCommon.thumbnail, which is merely a combination of the background and dimensions.

In summation, these are shorthand CSS applications for:

• cssCommon.thumbnail: div.blur div, div.thumbnail
• cssCommon.background: div.box
• cssCommon.backgroundLarge: div.popup
• cssCommon.dimensions: div.tint

As the final bit of CSS, each item in div.image-magnify will also lack a repeating background. We only want it to appear the one time. This is especially true for div.blur that has a shifted background position. When it shifts upward 3px, we don’t want those top 3px to appear at the bottom of the div, and so on and so forth for each direction that each blur element shifts.

div.image-magnify div { background-repeat : no-repeat; }

The Elements

Before all else, of course, we need to create the elements in order to assign event handlers to them. The inner magnify algorithm, unfortunately, is not compatible with the blur and tint algorithsm. This is simply due to the fact that the thumbnail is hidden when inner-magnified, so it cannot blur or tint. Because of this, and the position of the elements involved (div.popup being shifted to the left, div.box being non-existent), the inner magnify algorithm is split into an entirely different section of code than the blur and tint algorithms.

var imageMagnifier = function(effect, popup, thumbnail, css)
{
var cssCommon = {
background: "background-image : url('" + thumbnail.src.replace(/\'/g, "\\\'") + "');",
backgroundLarge: "background-image : url('" + popup.src.replace(/\'/g, "\\\'") + "');",
dimensions: "height : " + thumbnail.height + "px; width : " + thumbnail.width + "px;"
},
effects = ["blur", "inner", "tint"],
ratio = {
height: popup.height / thumbnail.height,
width: popup.width / thumbnail.width
};
cssCommon.thumbnail = cssCommon.background + " " + cssCommon.dimensions;
for (var x = 0; x < 3; x++)
{
if (typeof(effect[effects[x]]) == "undefined")
effect[effects[x]] = false;
}
if (effect.inner)
{
/* inner algorithm will go here */
}
else
{
/* blur and tint algorithms will go here */
}
};

Inner Magnification Elements

The most efficient setup for inner magnification is:

<div class="image-magnify inner">
<div class="thumbnail">
<div class="popup"></div>
</div>
</div>

While div.inner-magnify.inner is never used in this tutorial, it is placed there simply for convenience if you desire to add other CSS effects.

Unlike blur and tint, div.popup is going to appear over div.thumbnail. For this, it is appropriately placed within div.thumbnail. Now to port this basic HTML layout to JavaScript to insert it into the function:

if (effect.inner)
{
document.write(
'<div class="image-magnify inner">' +
'<div class="thumbnail" style="' + cssCommon.thumbnail + '">' +
'<div class="popup" style="' + cssCommon.backgroundLarge + " " + cssCommon.dimensions + '">' +
'<\/div><\/div><\/div>'
);
}

Here I went one step further than the basic HTML layout: I applied the dynamic CSS discussed earlier. div.thumbnail receives the background image and dimensions of the thumbnail, and div.popup receives the background image of the high-resolution image and the dimensions of the thumbnail.

Now to put the finishing touches on div.popup. Due to the potential border on div.thumbnail, div.popup will need to be shifted up to the left by the same number of pixels as the border width. Otherwise, it will appear inside of div.thumbnail‘s border, whereas we need it to appear on top of div.thumbnail‘s border.

if (effect.inner)
{
document.write(
'<div class="image-magnify inner">' +
'<div class="thumbnail" style="' + cssCommon.thumbnail + '">' +
'<div class="popup" style="' + cssCommon.backgroundLarge + " " + cssCommon.dimensions + '">' +
'<\/div><\/div><\/div>'
);

// If a border exists, shift div.popup over it.
if (effect.borderWidth > 0)
$("div.image-magnify:last div.popup").css("margin", "-" + effect.borderWidth + "px 0 0 -" + effect.borderWidth + "px");
}

Blur and Tint Magnification Elements

Unlike inner magnification, blur and tint will need a completely separate layout. They need to be designed in a way for them to both work at the same time, since they are compatible with each other. The most efficient setup is:

<div class="image-magnify blur tint">
<div class="thumbnail">
<div class="blur">
<!-- blur background shifted left 3px -->
<div>
<!-- blur background shifted up 3px -->
<div>
<!-- blur background shifted right 3px -->
<div>
<!-- blur background shifted down 3px -->
<div>
<div class="tint"></div>
</div>
</div>
</div>
</div>
</div>
<div class="box"></div>
</div>
<div class="popup"></div>
</div>

Like div.image-magnify.inner, div.image-magnify.blur (not to be confused with div.image-magnify div.blur) and div.image-magnify.tint are not used in this tutorial. They are listed merely for the convenience of custom CSS.

In this, the tinted element is placed on top of the blurred element so as to tint the blur (wheras the four blur images placed above the tint color would make the tint color barely noticeable). The box is placed inside the thumbnail, of course; and the popup is placed next to the thumbnail. Of course, if there is no blur or tint, the blur and tint elements won’t need to exist. This is handled in the JavaScript.

if (effect.inner) { /* ... */ }
else
{
document.write(

// If the image is blurred and/or tinted, apply the blur and/or tint class.
'<div class="image-magnify' + (effect.blur ? " blur" : "") + (effect.tint ? " tint" : "") + '">' +

// Give the thumbnail its background image and dimensions.
'<div class="thumbnail" style="' + cssCommon.thumbnail + '">' +

// If the thumbnail is to be blurred, add the to-be-blurred thumbnails.
(effect.blur ? '<div class="blur"><div style="' + cssCommon.thumbnail + '"><div style="' + cssCommon.thumbnail + '"><div style="' + cssCommon.thumbnail + '"><div style="' + cssCommon.thumbnail + '">' : '') +

// If the thumbnail is to be tinted, add an element of the appropriate color and dimensions.
(effect.tint ? '<div class="tint" style="background-color : ' + effect.tint + '; ' + cssCommon.dimensions + '"><\/div>' : '') +

// If the thumbnail is blurred, close the blur elements.
// The opening and closing elements are separated so that div.tint will be inside of them.
(effect.blur ? '<\/div><\/div><\/div><\/div><\/div>' : '') +

/*
If the thumbnail is neither blurred, tinted, or inner, add a placeholder of the thumbnail dimensions.
If no placeholder exists, div.box will be thumbnail.height pixels higher than if a blur or tint element exists.
The placeholder will allow for div.box to use the same position algorithm regardless of effect used,
instead of having to make an exception for no-effect magnification.
*/
(!effect.blur && !effect.tint ? '<div style="' + cssCommon.dimensions + '"><\/div>' : '') +

// Add the mouse box with the thumbnail background. It needs its own background so that it is not affected by the blur or tint.
'<div class="box" style="' + cssCommon.background + ' height : ' + Math.round(thumbnail.height / ratio.height) + 'px; top : -' + thumbnail.height + 'px; width : ' + Math.round(thumbnail.width / ratio.width) + 'px;"><\/div>' +

// Close div.thumbnail.
'<\/div>' +

// Add the popup with the full-scale background image and same dimensions as the thumbnail.
// Use negative right and bottom margins so that adjascent content is not affected by its position.
'<div class="popup" style="' + cssCommon.backgroundLarge + ' margin-right : -' + (thumbnail.width + effect.borderWidth) + 'px; margin-bottom : -' + (thumbnail.height + effect.borderWidth) + 'px; ' + cssCommon.dimensions + '"><\/div>' +

// Close div.image-magnify.
'<\/div>'
);
}

For those of you wondering about the height and width attributes of div.box, fear not. It was simply too long to explain the comments. As hard as it is to explain mathematics, I shall attempt to do so here.

The box’s height and width need to be preportionate to the high-resolution image. That is to say that if the thumbnail is three times smaller than the popup, then the box needs to be three times smaller than the thumbnail. If the thumbnail is the same size as the popup, then the box needs to be the same size as the thumbnail. In other words, the box needs to be representative of what percentage of the popup is going to be shown.

The ratio variable is a measurement of popup to thumbnail. So a popup of 500 width and a thumbnail of 250 width would have a ratio.width of 2. thumbnail.x / ratio.x (where x is height or width) means that 1 / ratio.x is the percentage of the popup that will be shown. If the ratio of popup to thumbnail is 2:1, then 1/2 of the popup is what will be shown when magnified. For this ratio, the box should be 1/2 of the thumbnail. If the ratio of popup to thumbnail is 5:1, then 1/5 of the popup is what wlil be shown when magnified. For this ratio, the box should be 1/5 of the thumbnail. Thus, the box needs to be 1/ratio.x * thumbnail.x (or thumbnail.x / ratio.x).

Shared Element Manipulation

There are also small manipulations that apply to both the inner, blur, and tint effects. Instead of redundently placing these snippets in both the if and else statements, we’ll execute them outside of the statements. They will need to go after the conditional because div.image-magnify must first exist in order for it to be manipulated.

var imageMagnifier = function(effect, popup, thumbnail, css)
{
/* ... */
if (effect.inner) { /* ... */ }
else { /* ... */ }

// Assign important data that we'll need later.
$("div.image-magnify:last").data({
borderWidth: effect.borderWidth,
popupHeight: popup.height,
popupWidth: popup.width,
thumbnailHeight: thumbnail.height,
thumbnailWidth: thumbnail.width
});

// Apply the sent CSS.
$("div.image-magnify:last div.box, div.image-magnify:last div.popup, div.image-magnify:last div.thumbnail").css("border-width", effect.borderWidth + "px");
if (typeof(css) == "object")
{
for (x in css)
$("div.image-magnify:last div." + x).css(css[x]);
}
};

data() is a very useful jQuery method that allows you to assign various attributes to an element. One cannot assign the attribute (attr()) of popupHeight to div.image-magnify because that is not a valid HTML attribute. Thankfully, jQuery will store it in that element’s data() so that one may access it later via $("#the-element").data("popupHeight"). effect.borderWidth, popup.height, popup.width, thumbnail.height, and thumbnail.width are all variables you will need to access in the future. They will be needed for calculations in various event handlers, which won’t be able to read the data sent to the imageMagnifier() function, so we thus store them in an easy-to-access location: the div.image-magnify‘s data().

Lastly, we apply the CSS. This includes effect.borderWidth and the css variable. Each element gets the same border width, and any custom CSS sent via the fourth parameter (e.g. custom border colors, border styles) will be assigned here as well.

And you’re done! At least with setting up the HTML. All that’s left is the algorithms for displaying specific regions of the box and popup.

The Inner Magnification Algorithm

For easier reading, I will leave out the already-established function and variable declarations and merely discuss the coding that needs to be appended within the if (effect.inner) { } brackets.

We’ll need the trigger to make div.popup appear and disappear as needed. This part is very basic.

$("div.image-magnify:last div.thumbnail")
// When you put your mouse over the thumbnail,
.mouseenter(
function(e)
{
// fade the popup to fully visible within a third of a second.
$(this).children("div.popup").fadeTo(333, 1);
}
)
// When you remove your mouse from the thumbnail,
.mouseleave(
function()
{
// fade the popup to fully invisible within a third of a second.
$(this).children("div.popup").fadeTo(333, 0);
}
);

Lastly, the ever-so-important algorithm itself. This is the part that moves the background of the full-resolution popup to match the background of the low-resolution thumbnail.

$("div.image-magnify:last div.thumbnail")
.mousemove(
function(e)
{

// Get the data stored to the div.image-magnify image.
var data = $(this).parent().data(),

// Get the position of the thumbnail to determine the position of the mouse.
offset = $(this).offset();

// Re-calculate the ratio of popup to thumbnail.
var ratio = {
height: data.popupHeight / data.thumbnailHeight,
width: data.popupWidth / data.thumbnailWidth
},

// Get the X and Y coordinations of the mouse in relation to the thumbnail.
x = e.pageX - offset.left - data.borderWidth,
y = e.pageY - offset.top - data.borderWidth;

// Don't scroll beyond the thumbnail.
// Used to prevent scrolling when the mouse is on the border.
if (x < 0)
x = 0;
if (x > data.thumbnailWidth)
x = data.thumbnailWidth;
if (y < 0)
y = 0;
if (y > data.thumbnailHeight)
y = data.thumbnailHeight;

// Shift the background image of the popup
$(this).children("div.popup").css("background-position", (x > 0 ? "-" + (x * (ratio.width - 1)) + "px" : 0) + " " + (y > 0 ? "-" + (y * (ratio.height - 1)) + "px" : 0));
}
);

For those unaware, I’ll explain the variables used to calculate x and y. e.pageX is the mouse’s horizontal position on the page: the number of pixels the mouse is from the far left of the browser window or frame. offset.left is the thumbnail’s horizontal position on the page: the number of pixels the thumbnail is from the far left of the browser window or frame. By subtracting offset.left and data.borderWidth (the border width of the thumbnail) from e.pageX, you’re left with the mouse’s position in relation to the thumbnail. For example, if your mouse is positioned at the top left of the thumbnail, x will be 0 and y will be 0; if the mouse is positioned at the bottom middle of a 320×240 thumbnail, x will be 160 and y will be 240.

div.popup‘s background positioning is a bit more complicated. The CSS for background position – unlike padding, margin, etc. – is comprised of the left position of the background followed by the top position of the background. Since the thumbnail is smaller than the high-resolution popup, this is where ratio comes into play. For every one pixel the mouse scrolls over the thumbnail, we’ll want to move ratio.x pixels in the popup; e.g. if the popup is three times the size of the thumbnail, we’ll want it to move three pixels for every pixel the mouse moves over the thumbnail. Your algorithm would then be x * ratio.width and y * ratio.height.

Unfortunately, it’s not quite that easy. x * ratio.width will place the pixel in the center of the mouse on the far left of the popup, when we want it in the center of the popup. Using that code, when you place your mouse on the far right of the thumbnail, the background position for the popup will be negative the width of the entire full-resolution image. Take for example, a thumbnail of 320×240 and a popup of 640×480: when your mouse is placed at the 320 x-coordinate of the thumbnail, the background position will be -640px (the mouse position [320] times the ratio [2]). If a 640px image is shifted to the left by 640px, you won’t be able to see it anymore! This isn’t what we want.

So how do we move the position from the far left to the center? You must first note the negative before the value in the CSS. The number we are calculating is how many pixels to the right the image should move; by using a negative, we thus make the image shift to the left. Beware the double negative in the following algorithm. -(a – b) actually means -a + b (moved a pixels to the left, then b pixels to the right). The uncondensed algorithm for determining the number of pixels to move the image to the left is this: x * ratio.width - x / data.thumbnailWidth * data.thumbnailWidth. That is to say, the pixel’s position in the full-resolution image (x * ratio.width) minus the percentage of the image scrolled (x / data.thumbnailWidth; we’re at pixel x out of data.thumbnailWidth pixels) times the number of pixels total (data.thumbnailWidth). In English, the further we scroll to the right, the more we’ll want to substract from x * ratio.width, up to 100% of the thumbnail width. When x is equal to data.thumbnailWidth (i.e. the mouse is at the far right of the thumbnail), we’ll be left with x * ratio.width - 1 * data.thumbnailWidth.

This is a fairly hard algorithm to grasp. If you do not understand how it works, it may serve well to toy with the numbers involved and watch the resulting effect for yourself.

Lastly, if the x or y coordinates are 0, simply use a 0 instead of the negative pixel value, because “-0px” is invalid CSS; thus the inline conditional statements, (x > 0 ? "-Zpx" : 0).

The Blur and Tint Algorithms

I will leave out the parts of the code already established to do away with redundancy and pointless scrolling. The following snippets are to be appended to the else { } block of code.

Like the inner algorithm, we must unhide the elements involved when the thumbnail is moused over. Very simple, but slightly longer than the inner algorithm due to the fact that more elements are involved (the mouse box, the blur elements, and the tint elements).

$("div.image-magnify:last div.thumbnail")
.mouseenter(
function()
{
$(this).children("div.box").fadeTo(333, 1);
$(this).find("div.tint").fadeTo(333, 0.5);
$(this).find("div.blur div:not(div.tint)").fadeTo(333, 0.8);
$(this).parent().children("div.popup").css("display", "block").fadeTo(333, 1);
}
)
.mouseleave(
function()
{
$(this).children("div.box").fadeTo(333, 0);
$(this).find("div.tint").fadeTo(333, 0);
$(this).find("div.blur div").fadeTo(333, 0);
$(this).parent().children("div.popup").css("display", "none").fadeTo(333, 0);
}
);

When the mouse enters the thumbnail, fade in the mouse box and popup completely, fade in the tint element partially (so that you can still see through it), and fade in the blur elements to 80% to cause the blur effect.

When the mouse leaves the thumbnail, fade out the mouse box, tint element, blur elements, and popup completely.

Easy! Now for the dreaded algorithm.

$("div.image-magnify:last div.thumbnail")
.mousemove(
function(e)
{
// Much like inner magnification, we will start with these same variables
// and determine the mouse position within the thumbnail.
var data = $(this).parent().data(),
offset = $(this).offset();
var ratio = {
height: data.popupHeight / data.thumbnailHeight,
width: data.popupWidth / data.thumbnailWidth
},
x = e.pageX - offset.left - data.borderWidth,
y = e.pageY - offset.top - data.borderWidth;

/*
Unlike inner magnification, we will be working with a mouse box.
We must then calculate the X and Y coordinates of the box, not the mouse.
Since the box has a width of thumbnail.width / ratio.width,
the x coordinate will be half the box's width to the left of the mouse
(while the other half of the box is to the right of the mouse).
*/
x = x - $(this).width() / ratio.width / 2;
y = y - $(this).height() / ratio.height / 2;

// If the would-be box is so far left that it's no longer on the thumbnail,
// don't put it any further left.
if (x < 0)
x = 0;

/*
If the would-be box is so far right that it's no longer on the thumbnail,
(if the position of the left of the box plus the width of the box is further than the thumbnail width)
don't put it any further right.
(set the position of the left of the box to be the width of the thumbnail minus the width of the box)
*/
if (x + $(this).width() / ratio.width > $(this).width())
x = $(this).width() - $(this).width() / ratio.width;

if (y < 0)
y = 0;
if (y > $(this).height() - $(this).height() / ratio.height)
y = $(this).height() - $(this).height() / ratio.height;

// Dealing with fractions, we better round. There's no such thing as a fraction of a pixel.
x = Math.round(x);
y = Math.round(y);

/*
Set the background position of the mouse box to match the position of the thumbnail.
Remember, it has its own background, because the thumbnail may be blurred or tinted.
Set the left and top attributes of the mouse box so that it scrolls with the mouse.
$(this).height() is subtracted from y, because div.box comes after div.blur and div.tint.
(Remember the placeholder created in the HTML?)
*/
$(this).children("div.box").css({
backgroundPosition: (x > 0 ? "-" + x + "px" : 0) + " " + (y > 0 ? '-' + y + "px" : 0),
left: (x - data.borderWidth) + "px",
top: (y - $(this).height() - data.borderWidth) + "px"
});

/*
Unlike inner magnification, the x and y values are representative of the left position in the mouse box, not the mouse itself.
Therefore when the mouse is at the far right of the image, the value of x still represents the far right minus the width of the box.
We thus do not need to substract anything when multiplying the x and y values by the ratio.
The popup's background position will never scroll the image out of view, because the x and y values is not allowed to reach the full dimensions of the thumbnail.
*/
$(this).parent().children("div.popup").css("background-position", (x > 0 ? "-" + (x * ratio.width) + "px" : 0) + " " + (y > 0 ? '-' + (y * ratio.width) + "px" : 0));
}
);

And there you have it. I find blur’s and tint’s algorithms to be much easier than inner’s, solely due to the fact that dealing with a mouse box that prevents scrolling beyond the dimensions of the thumbnail makes it easy to calculate the background of the popup.

For those wondering, it is entirely possible to use the mouse box’s algorithm in the inner magnification [without displaying the mouse box, of course]. I chose not to do so for one entirely aesthetic reason. When the box has reached the dimensions of the thumbnail, scrolling of the popup ceases. This isn’t very noticable with the mouse box, because you expect it to stop when the box’s border hits the thumbnail’s border. However, when there is no border guiding you, like with the inner magnification, it appears less fluid and more choppy. To see the difference for yourself, place your mouse in the bottom right corner of any of the magnification examples at the beginning of this tutorial. If you move it slightly to the left or up, nothing changes; the mouse box is still positioned as far to the bottom and right as it can go. However, if you do the same thing in the inner magnification example, it will scroll regardless of where your mouse is. It does not stop scrolling until your mouse is physically at the far right or far bottom of the thumbnail.

I find that to look better with an inner magnification. If you prefer using an invisible mouse box, you may simply copy-paste the algorithm from the blur and tint handler to the other.

Conclusion

If any reader (especially math majors) believes that he or she can explain the algorithms better than I did, feel absolutely free to do so in the comments. I will gladly edit them into the post itself to help future readers, giving credit where credit is due. I attempted to explain the algorithms to the best of my ability and as adequately as I believed they needed to be, but as a visual learner and memorizer, I’m aware of the difficulties of transcribing visual information.

Alas, thank you for reading!

Download the files here

Unlock the key of your success by MB6-502 and MB7-843. By using our latest MB5-294 study material, you can easily pass 70-529 exam.

Join the Fan Club!

You are currently viewing a premium “Member’s Only” post from the Web Design Fan Club. To continue viewing this awesome content after June 16, you can become a member for the heavily discounted of $36/year or join us on a monthly basis for $9/month after June 16.

Did you read that right? Yes, yes you did. $36 for the year (8 months free) if you become a yearly subscriber before June 16. Seems kind of foolish to pass something like that up, eh?

Joining the Web Design Fan Club grants you access to all the incredible resources and knowledge you need to become an expert web designer. From WordPress themes to premium icon sets and vectors, advanced tutorials to educational resources and files, the Web Design Fan Club delivers. Not only that, but you gain access to interviews with some of the best web designers and developers working today.

How to Make a Graphical News Slider in jQuery

1. Introduction
2. The HTML
3. The CSS
4. The Object and Important Variables
5. The Object Call
6. Creating and Styling the Elements
7. Changing Slides Event Listener
8. The Fade Algorithm
9. The Slide Algorithm
   1. The Diagonal Algorithm
   2. The Horizontal and Vertical Algorithm
10. Conclusion

Introduction

The graphical news slider: something used so often in so many places for so many different purposes. I had made one ages ago as one of my first jQuery projects. I figured I could write a tutorial to share that code with WebDesignFan’s readers, but was taken aback when I reviewed the code I had made so long ago. It was not bad formatting or compatibility or any such thing, as I would never allow such problems to be a part of my programs. However, it wasn’t very extensible as I feel all public code should be. It was merely designed to support the features I needed at the time. Having spent the last few days revising the code, namely to allow custom image dimensions, I am happy to share with you the revised code.

In a nutshell, this program will take images and associated text/HTML, put them in a navigation bar, and periodically scroll through the images. A picture is worth a thousand words, so of course I’ll offer an example. The navigation bar below is set to be hidden until you put your mouse over the news slider. The slides are set to change automatically every 7.5 seconds, or when you click on a slide from the navigation bar.

Example

Graphic Slider in Javascript Demo

The HTML

Just like with the previous image magnifier tutorial, I’ll explain the DOM structure before getting into the algorithms involved, as the algorithms are entirely dependant on the DOM.

<div class="news-slider" id="news-slider-#">
<div class="padding">
<div class="background2"></div>
<div class="background"></div>
<div class="navigation bar"></div>
<div class="navigation icons">
<img alt="..." class="image#" src="..." title="" />
<img alt="..." class="image#" src="..." title="" />
<img alt="..." class="image#" src="..." title="" />
</div>
<div class="text">
<div>...</div>
</div>
</div>
</div>

Of course we’ll wrap all of the elements in a div.news-slider element. Since we’ll be needing timeouts in JavaScript to change the background and text periodically, we’ll need a unique identifier (div#news-slider-1, div#news-slider-2, div#news-slider-3, etc.) to refer to which slider needs to change from within the timeout.

div.padding is to prevent an error in older versions of Internet Explorer. If padding (e.g. 10px) is applied to an element that also contains a height or width (e.g. 600px), Internet Explorer would alter that element’s height or width to include the padding (e.g. 620px). In other words, the width would apply to what is inside of the padding instead of the element as a whole. By placing the padding in an element within the fixed-width, Internet Explorer is forced to render the padding inside the width instead of vice-versa, ensuring cross-browser appearance compatibility.

div.background2 is a dummy element used for transition effects. During transitions, two backgrounds are displayed: the new that is one coming into focus and the old one that is leaving. Thus, we’ll need two elements: div.background for the new background and div.background2 for the old background. Since div.background will be the new background that is in-focus, I’ve placed it after div.background2. By placing it after (and then shifting it upward via the CSS top attribute), it will appear on top of div.background2, thus hiding the old background when the new one comes into focus.

div.navigation.bar is merely a colored bar on top of which the navigation images appear. I gave it a separate element from the images themselves because it will be translucent, so the viewer is able to see the background image of div.background through it. I did not place the images inside div.navigation.bar, because I did not want the images to be translucent. Therefore, like with div.background, I placed the images in the proceeding element, then merely shifted them on top of div.navigation.bar. Since div.navigation.bar and div.navigation.icons share so many attributes (height, width, position), I gave them the common class .navigation. The separate class .bar is used for coloring the navigation bar, while .icons is unused and merely there for convenience of anyone who wants to stylize it.

img.image# are semi-unique class names that will be used in jQuery to gather information about the image, e.g. it’s src via $("news-slider-1 img.image1").attr("src"). I say semi-unique, because it is not unique to the page (therefore using class instead of ID) merely unique to the slider (each slider only has one .image1, one .image2, one .image3, etc.).

div.text is the text that will display. The div element inside of it is similar to div.padding. Oddly enough, it is not to appease Internet Explorer, but to appear jQuery. In order to position div.text toward the bottom or right of div.news-slider, we will need to know it’s width() and height() (jQuery functions). Unfortunately, jQuery does not include border or padding in its calculations of width and height, thus will not calculate the visible width and height of the element, thus not positioning div.text where we want to position it. To fix this, we merely use a div element inside of div.text for border, padding, etc. This will cause div.text to stretch and the .width() and .height() of div.text to change, incorporating the border, padding, etc. of its inner div.

The CSS

Now that you know what the elements are, we must set their default styles to position them appropriately!

div.news-slider {
background-color : #f8d8d0;
border: 1px outset #e0d0c0;
height : 320px;
margin : 0 auto;
text-align : left;
width : 620px;
}

div.news-slider div.padding {
padding : 10px;
}

The attributes of the slider itself are pretty self-explanatory. margin : 0 auto; is to center it. If you are using multiple news sliders with multiple widths, use #news-slider-1, #news-slider-2, #news-slider-3, etc. to set the height and width values.

div.news-slider div.background, div.news-slider div.background2 {
background-repeat : no-repeat;
height : 300px;
margin-bottom : -300px;
width : 600px;
}

The two backgrounds are very similar elements and thus have the same attributes. We don’t want the background to repeat so that we can see both at the same time (instead of just the one positioned on top of the other). The bottom must be set to the negative of the height. This will “pull” anything below it on top of it, essentially giving it a “height” of 0, even though it is still visible. Therefore, div.background2‘s negative margin-bottom will cause div.background to render on top of it, while div.background‘s negative margin-bottom will cause div.navigation.bar to render on top of it.

div.news-slider div.navigation {
height : 300px;
position : relative;
margin-bottom : -300px;
text-align : center;
width : 142px;
}

Here we have the shared attributes of the navigation bar and its icon wrapper. The height is the same as the background height. The position is relative so that it can be placed on the left or right of the slider. The bottom margin “pulls” div.navigation.icons on top of div.navigation.bar and div.text on top of div.navigation.icons. The centered alignment centers the images in div.navigation.icons. The width can be whatever you like. Simple.

div.news-slider div.navigation.bar {
background-color : #e0d0c0;
}

The background color of the navigation bar. You can also use a background image if you want, but keep in mind that it will translucently overlay div.background.

div.news-slider div.navigation img {
border : #000000 solid 2px;
cursor : pointer;
height : 59px;
margin-top : 10px;
width : 118px;
}

div.news-slider div.navigation img:hover {
border-color : #808080;
}

div.news-slider div.navigation img.selected {
border-color : #ffffff;
}

These are the attributes of the images in the navigation bar. The height and width are based on how many images are going to appear in the bar. This takes a bit of calculation to determine:

The height of the navigation bar is 300. The number of images is 4. The padding between the images is 10. The border width of the images is 2.

1. Multiple the padding (10) by the number of images (4): 40.
2. Add the padding (10) to that to include the padding at the bottom of the navigation bar: 50.If you have 4 images, you’ll want 10px above the first image (10), 10px above the second image (20), 10px above the third image (30), 10px above the fourth image (40), and 10px below the fourth image (50).That comes out to be 50 pixels of the 300 height that will be padding.
3. Multiply the border width (2) of the images by 2: 4.If you have a border width of 2, that’s 2px on the border top and 2px on the border bottom.That comes out to be 4px total added to the vertical height of the image.
4. Multiply that number (4) by the number of images (4): 16.
5. Subtract that number (16) and the total padding (50) from the height (300): 234.This is how much of your navigation bar is not border or padding.i.e. This is how much of your navigation bar can actually be used for images.
6. Divide that number (234) by the number of images (4): 58.5.
7. Round that number (58.5) if necessary: 59.This is the height of each individual image.The width of each image can be calculated using the height-to-width ratio of the original image and this new height.

div.news-slider div.text {
display : none;
float : left;
position : relative;
}

div.news-slider div.text div {
background-color : #404040;
border : #000000 solid 1px;
color : #e0d0c0;
float : left;
font-family : "Verdana", "Tahoma", sans-serif;
font-size : 13px;
line-height : 17px;
padding : 2px 6px;
}

div.news-slider div.text div a {
color : #e0d0c0;
}

Lastly, these are the attributes of the text that displays with each image. By default, it is hidden, as it will become displayed when the image appears. It and its inner div are floated left so that their widths will match their text instead of being 100% and so it may be positioned (note position : relative;) from the left of the news slider to its appropriate location (e.g. the right side of the slider if the developer chooses so).

The Object and Important Variables

The news slider is placed in an object instead of a function. It requires at least two variables – one function to create the slider and one array to keep track of the timeouts used in changing slides. By using an object, we can store both of these in a single variable, while allowing the extensibility of storing other variables in the object for convenience.

var newsSlider = {
create: function(){},
htmlSpecialChars: function(){},
specialChars: {},
timeouts: [],
total: 0
};

newsSlider.create is simply the function used to create the slider and output the HTML. Unless you are writing custom mods, this will be the only part of the object you will ever call. An example of such a call and its parameters is explained in the following section.

newsSlider.htmlSpecialChars is a function, similar to PHP’s htmlspecialchars. It is used to store HTML in the image’s alt attribute by temporarily stripping out the HTML. newsSlider.specialChars is a variable used by newsSlider.htmlSpecialChars. For an in-depth explanation of this function and variable, give htmlspecialchars in JavaScript a read.

newsSlider.timeouts is an array of timeouts created by setTimeout. These need to be stored so that they may be cleared via clearTimeout when necessary.

newsSlider.total is merely an integer of the total news sliders on the page. It is used in the code to determine what ID should be used for the news sliders, but may also prove useful for any modification you may create: $(“#news-slider-” + newsSlider.total) will reference the last slider created.

With timeouts being an empty array, total being 0, and htmlSpecialChars and specialChars being given to you in the aforementioned tutorial, the only code left is newsSlider.create. Besides it, this object is done.

The Object Call

Before we can create newsSlider.create, we need to know what we’re working with. What is a simple interface for the developer to manipulate? How many variables with which will we be working, and what will they be called? To figure out this information, I’ve added the object call prior to the final bit of code: newsSlider.create.

newsSlider.create({
align: "left",
backgrounds: ["news-slider-4.jpg", "news-slider-3.jpg", "news-slider-2.jpg", "news-slider-1.jpg"],
direction: false,
effect: "random",
hide: true,
text: ["Nintendo 3DS coming out in March 2011", '<a href="http://webdesignfan.com/how-to-design-a-stylish-business-card-in-photoshop/">How to Design a Stylish Business Card in PhotoShop<\/a>', '<a href="http://webdesignfan.com/yslow-tutorial-part-1-of-3-minimizing-file-size/">YSlow Tutorial, Part 1 of 3: Minimizing File Size<\/a>', "Ted Williams offered full-time job by Cleveland Cavaliers"],
valign: "bottom"
});

As you can see, the parameters are all passed as an object, for simplicity reasons, as opposed to memorizing an arbitrary order of parameters.

align is the location of the navigation bar. It may be either left or right. The text will align oppose the navigation bar’s alignment. If you set this parameter to left, the navigation bar will be on the left, and the text will be on the right. If you set this parameter to right, the navigation bar will be on the right, and the text will be on the left.

backgrounds is an array of images. These are the images that will appear in the navigation bar, and the images that will appear in the background of the slide.

direction is a value used for the sliding animation. It is the direction the div.background slides as it overlaps div.background2. It can be any of eight values: top, top-right, right, bottom-right, bottom, bottom-left, left, or top-left. It may also be set to random, or false which is synonymous with random.

effect is the transitional animation. It may be either, fade, slide, or random. Again, false is synonymous with random here.

hide is a boolean for whether or not you want to hide the navigation bar. If false, the navigation bar will always appear. If true, the navigation bar will only appear when you place your mouse over the news slider.

text is the text/HTML that will display with the corresponding backgrounds. When backgrounds[0] is being displayed, text[0] will be displayed; when backgrounds[1] is being displayed, text[1] will be displayed; and so on and so forth.

valign is the vertical alignment of the text. This supports top or bottom.

Creating and Styling the Elements

Now we will tackle the foundation of the newsSlider.create function, albeit not the important algorithms yet. This section will cover the creation of variables that need to be set with JavaScript, the creation of the elements, the stylization of the elements that can only be calculated with JavaScript, and establishing the final event listener. The following code snippets go inside create: function(data) { }.

this.total++;

Incrementing the total will give us a new unique ID for the slider.

this.timeouts[this.total] = null;

Create a dummy value in the array of timeouts. This is so that clearTimeout does not generate an error if no timeout exists yet.

data.id = this.total;

Store the ID in the slider’s data parameter so that it may be accessed in the future. The data parameter will be stored via jQuery’s data() function.

data.object = this;

Store the entire object in the data parameter so that it may be accessed and manipulated in the future. When in an element’s event listener, “this” will no longer refer to the news slider object as it does here, but instead to the element itself. Because of this, we are left with no ability to reference the news slider object. (Especially if the newsSlider variable is renamed!)

div.news-slider‘s data() on the other hand, can be accessed from within event listeners. Thus by storing the object in the data, we will be able to reference it in future event listeners.

document.write(
'<div class="news-slider" id="news-slider-' + data.id + '">' +
'<div class="padding">' +
'<div class="background2"><\/div>' +
'<div class="background"><\/div>' +
'<div class="navigation bar"><\/div>' +
'<div class="navigation icons">'
);

for (var x = 0; x < data.backgrounds.length; x++)
document.write('<img alt="' + this.htmlSpecialChars(data.text[x]) + '" class="image' + (x + 1) + '" src="' + data.backgrounds[x] + '" title="" />');

document.write(
'<\/div>' +
'<div class="text"><div><\/div><\/div>' +
'<\/div><\/div>'
);

Output the HTML. You may want to manipulate this section to modify another element’s inner HTML instead of document.write if you plan on using this post-page-load.

The images are also written into the navigation bar. The text is stored in the images’ alt attributes to be retrieved when necessary.

var last = $("div#news-slider-" + data.id);
last.data(data);

Get the newly created news slider as a jQuery object for some JavaScript-required editing.

Store the data parameter via data() for future retrieval.

if (data.align == "right")
{

// Note: div.navigation includes both div.navigation.bar and div.navigation.icons
var navigation = last.find("div.navigation");
navigation.css("left", (last.find("div.background").width() - navigation.width()) + "px");
}

If the navigation bar is on the right, position it as such.

The navigation bar’s position from the left is the width of the background minus the width of the navigation bar. This aligns the right side of the navigation bar with the right side of the background.

if (data.hide)
{
last.bind({
mouseenter: function()
{
$(this).find("div.navigation.bar").fadeTo(333, 0.5);
$(this).find("div.navigation.icons").fadeTo(333, 1);
},
mouseleave: function()
{
$(this).find("div.navigation").fadeTo(333, 0);
}
});
last.find("div.navigation").fadeTo(0, 0);
}

If the navigation bar is to be hidden by default, bind the event listeners for mouseenter and mouseleave, then hide it.

When the mouse enters the news slider, make the bar translucent and the icons opaque. When the mouse leaves the news slider, hide the navigation.

else
last.find("div.navigation.bar").fadeTo(0, 0.5);

If the navigation bar is not to be hidden, merely make the bar translucent.

Lastly, we need the event listener for changing the slides:

last.find("div.navigation img").bind("click",
function()
{
}
);
last.find("div.navigation img.image1").trigger("click");

When the images in the navigation bar are clicked, we’ll change the slide. To start the slider as soon as it loads, we’ll click the first image instantly using jQuery’s trigger function.

All that’s left to do is setting up the event listener for clicking images, covered in the next section.

Changing Slides Event Listener

To finish the code, we need to populate the click bind for div.navigation img. I’ll separate this into three parts: the fade algorithm, the slide algorithm, and everything else. The “everything else” is basic CSS calculations and setting timeouts and as such will be discussed first.

Being the event listener, this code will go inside the function of the click bind, i.e. inside last.find("div.navigation img").bind("click", function() { });.

if (!$(this).is("img.selected"))
{
}

First things first, if the image is already selected, we don’t want to do anything at all. Thus, we wrap the entire event listener in this conditional. Nothing is outside of this conditional, because nothing at all happens if the image is already selected.

var slider = $(this).closest("div.news-slider");
var data = slider.data();

Inside of the conditional, we’ll need to get the parent div.news-slider. jQuery’s closest() function will return the first parent that matches the selector. Remember, $(this) refers to the image clicked. The closest parent div with the class .news-slider is the wrapper element. This will be used to select other elements that need to be manipulated in the slider. Also important, we will use the div.news-slider to retrieve the data() of the slider, which contains important variables like the slider’s integer ID, the newsSlider object, and the parameters passed when creating the slider.

if (!slider.is("div.animating"))
{
}
else
{
clearTimeout(data.object.timeouts[data.id]);
data.object.timeouts[data.id] = setTimeout('$("#' + slider.attr("id") + '").find("img.' + $(this).attr("class") + '").trigger("click");', 20);
}

.animating is a class used to determine if the slider is currently between slides. If it is, we don’t want to choppily interrupt it. Many timeouts exist to cause the animation, and there’s no way to seamlessly stop the animation to transition to a new slide. What we can do is wait for the current animation to complete, then immediately change to the slide clicked.

We have the conditional to do this. If the slider isn’t animating, change slides. Otherwise, try again every 20 milliseconds. Here is the first use of timeouts. data is the object returned by data(). object is the newsSlider object stored into data() (remember data.object = this;). timeouts is the array of timeouts. Since the animation timeouts won’t be cancelled, they are not stored in timeouts. Timeouts that may be cancelled are the clicks, such as the 20-millisecond-retry. Even though the timeout won’t exist when the click is automatically retried in 20 milliseconds, we must clear the timeout anyway in case the user manually clicks the image again.

Inside the .animating conditional:

$(this).siblings("img.selected").removeClass("selected");
$(this).addClass("selected");
slider.addClass("animating");

When the slider isn’t animating, remove the .selected class from the previously selected image, set the newly selected image’s class to .selected, and set the slider’s class to .animating.

slider.find("div.text").fadeTo(333, 0,
function()
{
var slider = $(this).closest("div.news-slider");
var background = slider.find("div.background"),
data = slider.data();
$(this).children("div").html(data.object.htmlSpecialChars(slider.find("img.selected").attr("alt"), true));
$(this).css({
left: (data.align == "left" ? background.width() - $(this).width() - 10 : 10) + "px",
top: (data.valign == "bottom" ? background.height() - $(this).height() - 10 : 10) + "px"
});
}
);

The text, which is going to change, fades out. Once it has disappeared, we’ll change the contents to the selected image’s alt attribute, in which we stored the associated text when creating the image elements earlier. The second parameter of htmlSpecialChars tells the function to convert the escaped text back to HTML, i.e. convert the string <a href="http://www.charlesstover.com/">Charles Stover</a> to Charles Stover.

Once the new text has been put in the image, we must reposition it. Surely with the new text, the width is not going to be the same; if the text is long enough for it to wrap to a new line, the height won’t be either. The position of the next text is determined with a simple formula:

If the navigation bar is on the left (data.align), we must position the text on the right. To do this, we take the width of the background/slide and subtract the width of the text. Similar to a right-aligned navigation bar, this will position the right side of the text with the right side of the background. We then subtract another 10 pixels for padding. If the navigation bar is not on the left, we merely position it 10 pixels of padding from the left.

If the text is vertically aligned at the bottom (data.valign), we take the height of the background/slide and subtract the height of the text. This will position the bottom of the text with the bottom of the background. We then subtract another 10 pixels for padding. If the text is not vertically aligned at the bottom, we merely position it 10 pixels of padding from the top.

Remember, the text is still hidden. It won’t fade back in until the slide has changed, because running multiple jQuery animations at the same time causes numerous lagging issues in Internet Explorer.

var direction = data.direction,
effect = data.effect;

Now that the text is taken care of, we must calculate the direction and effect used. These are given their own variables because making manipulations to data.direction or data.effect will alter the object in future calls as well. That is, if data.effect is set to “random,” and the code set data.effect to “fade” for this current animation, then all future animations would be “fade” as well, as data.effect in future calls would be “fade” instead of “random.”

if (direction == "random")
direction = false;
if (effect == "random")
effect = false;
{/code{

To simplify future conditionals, we replace "random" in effect and direction with the boolean value false.

{code type=javascript}
if (!effect)
effect = (Math.floor(Math.random() * (!direction ? 9 : 2)) == 1 ? "fade" : "slide");
if (!direction)
direction = ["bottom", "bottom-left", "bottom-right", "left", "right", "top", "top-left", "top-right"][Math.floor(Math.random() * 8)];

If there is no effect, then set one at random. The algorithm Math.floor(Math.random() * max) is fused to calculate a random number from 0 to max – 1. In this slider, there are a total of 9 different animations: fade, slide top, slide top-right, slide right, slide bottom-right, slide bottom, slide bottom-left, slide left, and slide top-left. Thus there should be a 1 in 9 chance of effect being “fade,” with the other chances of effects being “slide.” However, if a direction is set (e.g. data.direction is set to “left”), then there are only two different possible animations: fade and slide direction (e.g. fade and slide left). In our algorithm, if the direction is random (false), we create a 1 in 9 chance of the effect being fade. However, if the direction is fixed, we create only a 1 in 2 chance of the effect being fade.

We must then determine the direction if it is set to random (false). Simply give it an array of possible values, and tell it to choose one of the 8 at random. Simple enough.

The Fade Algorithm

The fade algorithm is very simple, since there is only one way to fade and eight ways to “slide.”

if (effect == "fade")
{
}

The following code will go inside this conditional.

slider.find("div.background2").css("background-image", "url('" + $(this).attr("src") + "')");

Since we are changing slides, we need to manipulate the backgrounds. In order for the previous slide (div.background) to fade into the current slide ($(this).attr("src")), the new slide will need to appear behind the old slide while the old slide fades away. div.background2, being behind div.background, must take on the background image of the soon-to-be current slide, i.e. the source of the image clicked, $(this).attr("src").

slider.find("div.background").fadeTo(2000, 0,
function()
{
var slider = $(this).closest("div.news-slider");
var background2 = slider.find("div.background2"),
data = slider.data();
$(this).css("background-image", background2.css("background-image"));
$(this).fadeTo(0, 1);
slider.find("div.text").fadeTo(333, 0.75,
function()
{
var slider = $(this).closest("div.news-slider");
slider.removeClass("animating");
}
);
}
);

Now with the background-behind-the-background set to what we want, we just need to fade div.background. Once it has faded away, three things need to be done.

1. The element that was created to contain the current background (div.background) needs to be set appropriately. Therefore div.background takes on the background of div.background2 and is set to full opacity. The user will notice no difference, because we are overlaying an image with the exact same image. However, this needs to be done for future transitions.
2. div.text needs to fade back in. It faded out before the slides transitioned; now that the slide has finished transitioning, it should fade back in.
3. Once the text has faded back in, we can safely remove the .animating class from the slider.

And you’re done fading between two images! All that’s left is sliding between two images, and unfortunately the algorithm is not quite as easy.

The Slide Algorithm

The slide algorithm shall take place in the else conditional of the aforementioned if (effect == "fade") { }. I decided that each animation should take place every 10 milliseconds. Generally, 20 milliseconds is fast enough to be seamless to the eye, but I did happen to notice some choppiness, so I upped it to every 10 milliseconds. That is, every 10 milliseconds, the new background will reposition closer to its final position in the middle of the slider. Since it will take 2,000 milliseconds to complete the slide (arbitrary time that I also used in the fade transition), and there will be one animation every 10 milliseconds, that makes for 200 animations – 200 repositions of the background.

var background = slider.find("div.background");
var height = background.height(),
width = background.width();

These are merely some basic variables we’ll need to use in the slide algorithms.

var per = {
horizontal: width / 200,
vertical: height / 200
};

per is merely the number of pixels the background will move with each animation. If the width is 600, and there are 200 animations, that’s 3 (600 divided by 200) pixels per animation. per.horizontal is the number of pixels to move the slide horizontally per animation. per.vertical, of course, is the number of pixels to move the slide vertically with each animation.

There are two types of slide animations – basic vertical/horizontal (top, right, bottom, left) sliding and diagonal (top-right, bottom-right, bottom-left, top-left) sliding.

The Diagonal Algorithm

if (direction.match(/\-/))
{
}

If the direction contains a hyphen, and thus is diagonal, we apply the diagonal algorithm. The vertical and horizontal algorithm will be applied in the else conditional. The diagonal algorithm to put inside this if conditional follows.

slider.find("div.background2").css("background-image", background.css("background-image"));
background.css({
backgroundPosition: "-" + width + "px -" + height + "px",
backgroundImage: "url('" + $(this).attr("src") + "')"
});

We move the current slide from div.background to div.background2 so that we may cover it with the newly selected slide. We then set the background of position of div.background so that you cannot see the background image. Then, the background image of div.background is changed to the new slide. We are left with the old slide appearing in the background and the new slide out of view in the foreground. All we have to do is move the foreground image into view, and with each animation, it will further cover up the old slide.

for (var x = 1; x <= 200; x++)
{
var shift = {
horizontal: Math.ceil(x * per.horizontal),
vertical: Math.ceil(x * per.vertical)
};
setTimeout('$("#' + slider.attr("id") + '").find("div.background").css("background-position", "' + (direction.match(/left/) ? width - shift.horizontal : shift.horizontal - width) + 'px ' + (direction.match(/top/) ? height - shift.vertical : shift.vertical - height) + 'px");', x * 10);
}

Now we loop for each step in the animation: all 200 of them (again, 200 steps times 10 milliseconds per step makes for a two second complete animation).

For each step, we must calculate the shift in the background, i.e. the new background position. We multiply the current step (x) by the number of pixels per step (per.horizontal and per.vertical). Thus, shift.horizontal is the new horizontal position while shift.vertical is the new vertical position.

As an example, say we move 3 pixels to the left or right per animation (per.horizontal = 3). The first animation (x = 1) will have a shift.horizontal value of 3 (x * per.horizontal = 1 * 3 = 3). The second animation (x = 2) will have a shift.horizontal value of 6 (x * per.horizontal = 2 * 3 = 6).

Now for the long timeout. The timeout will execute at x * 10 milliseconds (one step per 10 milliseconds). The first step (x = 1) will be in 10 milliseconds; the last step (x = 200) will be in 2,000 milliseconds.

In the timeout, I will break down the command: '$("#' + slider.attr("id") + '").find("div.background").css("background-position", "' + (direction.match(/left/) ? width - shift.horizontal : shift.horizontal - width) + 'px ' + (direction.match(/top/) ? height - shift.vertical : shift.vertical - height) + 'px");'

• $("#' + slider.attr("id") + '") tells jQuery to get the slider with the same ID as the one in which the image was clicked. slider is the variable $(this).closest("div.news-slider").
• .find("div.background"), simply enough, tells it to get the newly-created slide, so that we can position it closer to the center of the slider.
• .css("background-position", "..."); is the reposition algorithm that moves it closer with each step.
  • (direction.match(/left/) ? width - shift.horizontal : shift.horizontal - width) constitutes the horizontal position of the background.If the direction of the slide is to move to the left, then set the new position to the width minus the horizontal shift. The position is going to start at the far right side, and for every step, it will move to the left.If the direction of the slide is to move to the right, then set the new position to the horizontal shift minus the width. An easier way to think of this may be -width + shift.horizontal. The start position is negative the width, so that it cannot be seen, and each step moves it further to the right.
  • (direction.match(/top/) ? height - shift.vertical : shift.vertical - height) constitutes the vertical position of the background.The algorithm is essentially the same as the horizontal algorithm.

This concludes the diagonal algorithm. All that’s left is the horizontal and vertical movement, which has a slight tweak.

The Horizontal and Vertical Algorithm

Unlike the diagonal algorithm, in which the new slide covers the old slide, the horizontal and vertical algorithm will have the two slides connected. In single-direction animations, the new slide gives the appearance as though it’s “pushing” the old slide out of view. This cannot be elogantly done in a diagonal slide, thus the new slide merely covers the old one in the diagonal algorithm. If you do not know the difference between the two animation types, watch them animate in the example on this page.

Since the horizontal and vertical algorithm are different than the diagonal algorithm, it is placed in the else conditional of if (direction.match(/\-/)) { }.

slider.find("div.background2").css("background-image", "url('" + $(this).attr("src") + "')");

For this algorithm, we’ll set div.background2 to the new slide until the animation completes.

for (var x = 1; x <= 200; x++)
{
var shift = {
horizontal: Math.ceil(x * per.horizontal),
vertical: Math.ceil(x * per.vertical)
};
setTimeout('$("#' + slider.attr("id") + '").find("div.background").css("background-position", "' + (direction == "left" ? '-' + shift.horizontal + 'px' : (direction == "right" ? shift.horizontal + 'px' : '0')) + ' ' + (direction == "top" ? '-' + shift.vertical + 'px' : (direction == "bottom" ? shift.vertical + 'px' : '0')) + '"); $("#' + slider.attr("id") + '").find("div.background2").css("background-position", "' + (direction == "left" ? (width - shift.horizontal) + 'px' : (direction == "right" ? (shift.horizontal - width) + 'px' : '0')) + ' ' + (direction == "top" ? (height - shift.vertical) + 'px' : (direction == "bottom" ? (shift.vertical - height) + 'px' : '0')) + '");', x * 10);
}

This all functions exactly the same as the diagonal algorithm, except for the timeout. Two hundred animations, in which the shift is calculated, and a step is set to execute every 10 milliseconds.

The timeout can be split into two sections, div.background and div.background2.

1. $("#' + slider.attr("id") + '").find("div.background").css("background-position", "..."); gets the previous slide and alters the background position as such:
   • (direction == "left" ? '-' + shift.horizontal + 'px' : (direction == "right" ? shift.horizontal + 'px' : '0'))If the direction to slide is left, move the old slide shift.horizontal pixels to the left.If the direction to slide is right, move the old side shift.horizontal pixels to the right.If the direction is neither left or right (i.e. top or bottom), don’t move it in any horizontal direction (0 pixels).
   • (direction == "top" ? '-' + shift.vertical + 'px' : (direction == "bottom" ? shift.vertical + 'px' : '0'))If the direction to slide is top, move the old slide shift.vertical pixels to the top.If the direction to slide is bottom, move the old slide shift.vertical pixels to the bottom.If the direction is neither top or bottom (i.e. left or right), don’t move it in any vertical direction (0 pixels).
2. $("#' + slider.attr("id") + '").find("div.background2").css("background-position", "..."); gets the new slide and alters the background position in a similar way as div.background. The only difference between the two is that, while the start position of div.background is 0 pixels from the left and 0 pixels from the top, the start position of div.background2 is out-of-view.If it’s sliding from the left, its position will be negative its width (placing it out of view to the left). If it’s sliding from the right, its position will be positive its width (placing it out of view to the right). If it’s sliding from the top, its position will be negative its height (placing it out of view to the top). If it’s sliding from the bottom, its position will be positive its height (placing it out of view to the bottom).Outside of these start positions, the algorithms are precisely the same.
   • (direction == "left" ? (width - shift.horizontal) + 'px' : (direction == "right" ? (shift.horizontal - width) + 'px' : '0'))If the direction to slide is left, position the new slide at the width of the slide (start position) minus shift.horizontal pixels.If the direction to slide is right, position the new slide at shift.horizontal minus the width of the slide, i.e. negative the width of the slide (start position) plus shift.horizontal.If the direction is neither left or right (i.e. top or bottom), don’t move it in any horizontal direction (0 pixels).
   • (direction == "top" ? (height - shift.vertical) + 'px' : (direction == "bottom" ? (shift.vertical - height) + 'px' : '0'))If the direction to slide is top, position the new slide at the height of the slide (start position) minus shift.vertical pixels.If the direction to slide is bottom, position the new slide at shift.vertical pixels minus the hieght of the slide, i.e. negative the height of the slide (start position) plus shift.vertical.If the direction is neither top or bottom (i.e. left or right), don’t move it in any vertical direction (0 pixels).

Once the horizontal or vertical slide is complete (after 2,000 milliseconds), we must move the new slide from div.background2 to div.background for future transitions:

setTimeout('$("#' + slider.attr("id") + '").find("div.background").css({backgroundImage: "url(\'' + $(this).attr("src") + '\')", backgroundPosition: "0 0"});', 2000);

We also reset the background-position of div.background, which was altered in the animation, to 0 0.

There is still one step left in the animation! Fear not, for it is short, and you’ve already been introduced to it in the fade algorithm. This goes for both the diagonal and horizontal/vertical algorithm (therefore goes after/outside the diagonal/horizontal/vertical else block, but still inside the else block for the slide effect).

setTimeout('$("#' + slider.attr("id") + '").find("div.text").fadeTo(333, 0.75, function() { $("#' + slider.attr("id") + '").removeClass("animating"); });', 2000);

After 2,000 milliseconds (after the animation has completed), have div.text fade back in. Once it has faded in, remove the animating class from the slider.

All. Done. (Almost.)

Conclusion

Last but not least there is a final tidbit of code that needs to execute for all animations (both fade and slide). Since it will execute for both, it will need to go after/outside the effect == "fade" else code; it goes inside and at the end of the if (!slider.is("div.animating")) conditional block.

clearTimeout(data.object.timeouts[data.id]);
data.object.timeouts[data.id] = setTimeout('$("#' + slider.attr("id") + '").find("img.' + ($(this).next().is("img") ? $(this).next().attr("class") : "image1") + '").trigger("click");', 7500);

Simply, we take the next image ($(this) is the current image, making $(this).next() the next image in the navigation bar). If there is no next image (i.e. the current slide is the last image in the navigation bar), then we take the first image (.image1). With this image, after 7.5 seconds, we trigger its click event. This will set the slide to automatically change every 7.5 seconds. Of course, we clearTimeout in case they manually click a slide.

Now, you’re done. This is a complete news slider script.

Due to the length of this code and the desire of WebDesignFan to have a special release of it in the future, I won’t be pasting a fully-compiled version. All of the parts of the code are in this tutorial, and those following along shall have easily been able to put them together. I’m sorry to those of you who merely scrolled to the bottom to nab it.

Thanks for reading!

Our excellent online MB7-231 training programs will lead you to success in the MB7-223 exam. We also offer latest MB6-285 with 100% success guarantee. Our 70-579 is rare in IT world.