Ok, ok, I’ll spare the hackneyed rhymes and just present you with a completely new Infinite Carousel 3 for the holidays!

Unfortunately since this is a ridiculously busy time of year, I haven’t had time to throw up any demos just yet. But I will. In a few days. But in the meantime you can download the plugin and use it to your heart’s content. I did managed to cobble together some basic information about using the new version which I’m posting below.

Download

• Infinite Carousel 3

What’s New

• Completely rewritten. Smoother, faster, tighter.
• New options
• Images can be linked
• The carousel now accepts images and videos
• New timer
• New thumbnail options
• Easier styling

Notes

• Easing effects still require a separate jQuery easing plugin (I recommend http://gsgd.co.uk/sandbox/jquery/easing/), or adding easing code on your own.

Options

• transitionSpeed – the time (in milliseconds) a transition from one item to another should take (default 800)
• displayTime – the time (in milliseconds) an item should be displayed (default 6000)
• displayProgressRing – a Boolean value that shows or hides the progress ring in the upper right hand of the carousel (default true)
• progressRingColorOpacity – the color and opacity (in RGBa format) of the progress ring (default ’0,0,0,.5′)
• progressRingBackgroundOn – a Boolean value that shows or hides the progress ring background ring (default true
• progressRingBackgroundColorOpacity – the color and opacity (in RGBa format) of the progress ring background ring (default ’255,255,255,.5′)
• thumbnailType – the format of the item thumbnails (default ‘none’. Possible values are: ‘buttons’, ‘images’, ‘numbers’, ‘count’, or ‘none’)
• easeLeft – the easing method when the carousel moves to the left (default ‘linear’. To use values other than linear, either add an easing plugin or add easing code of your own)
• easeRight – the easing method when the carousel moves to the right (default ‘linear’. To use values other than linear, either add an easing plugin or add easing code of your own)
• imagePath – the path to the carousel’s navigation and playback control images (default ‘/js/infinitecarousel/images/’)
• inView – the number of items to be viewable at once (default 1)
• margin – the amount of margin to add around items (default 0)
• advance – the number of items to advance when a user clicks the left or right navigation buttons or the carousel is on autopilot (default 1)
• customClass – a name to be assigned to the carousel (or the carousel’s wrapper) that can be used for styling or scripting. The name will be prepended with “ic_” (default null)
• showControls – a Boolean value that shows or hides the play/pause controls (default true)
• autoHideCaptions – a Boolean values that hides captions between transitions ( default false)
• autoPilot – a Boolean value that moves the carousel automatically when the page loads (default false)
• prevNextInternal – a Boolean value that places the left/right navigation arrows inside or outside the carousel (default true)
• internalThumbnails – a Boolean values that determines whether the thumbnails are placed inside or below the carousel (default false)
• enableKeyboardNav – a Boolean value that enables or disables keyboard navigation. The left and right keys mimic the left and right arrows of the carousel, p pauses playback and s starts playback (default true).
• onSlideStart – default function(){},
• onSlideEnd – default function(){},
• onPauseClick – default function(){},
• onPlayClick – default function(){}

HTML

• An unordered list should contain your items (images, videos, or a mix).
• All items in the list must have the same dimensions which must be set
• Images can be wrapped with links
• Captions must be contained in paragraph tags and come after the image
• User CSS now controls the look of the thumbnails
• Video can have their own thumbnails by adding a longdesc attribute to them.

Ex:
    <ul id="carousel">
        <li><img width="200" height="133" alt="" src="p1.png" /><p>This is <strong>a caption</strong></p></li>
        <li><a href="http://www.google.com"><img width="200" height="133" alt="" src="p2.png" /></a></li>
        <li><a href="http://www.google.com"><img width="200" height="133" alt="" src="p3.png" /></a></li>
    </ul>

Instantiating

• $(‘#carousel’).infiniteCarousel({});

CSS Classes

• .ic_caption – styles the captions
• .ic_button – styles thumbnails
• .ic_active – styles the active thumbnail containers
• .ic_thumbnails – styles the div that holds the thumbnails

	** what's new:
		* completely rewritten. smoother, faster, tighter.
		* new options
		* captions
		* links
		* images or videos
		* new timer
		* new thumbnail options
		* easier styling

• We’d been planning on replacing the original, spam-ridden plugin site for quite some time
• In the process of deleting on the spam, all the plugins were deleted and we didn’t have a recent backup
• Instead of burning cycles keeping the old site on life support, we decided to make a clean break and kick development on the new site into high gear.
• The new site is powered by GitHub and a package manifest for plugins
• Plugins from the old site were never going to be automatically imported into the new one.
• The repo is at github.com/jquery/plugins.jquery.com
• We are very sorry, but also very excited!

So it looks like I’ll have to get everything moved over to github and make some updates to the plugin packages as well. In the meantime you can continue to download the plugins from this site. One of which is currently being completely re-written :)

Visit the Before/After plugin page to download the latest version and try out the demos.

The jQuery

After the jQuery code to instantiate the plugin, add (assuming a container with the id of “conjainer”):

$('#container').prepend('<p id="loader">Loading...</p>');
$('#container > div:eq(2) > img').load(function() {
	$('#loader').remove();
});

The CSS

Then add some styling. Here we’re adding an animated loading gif:

#container {
	border:2px solid #666;
}
#loader {
	background: #e9e9e9 url(ajax-loader.gif) no-repeat 50% 50%;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

And that’s it! Note that this is just a basic example and it only tests for one of the two images being loaded, however it’s basic to extend this concept further and even provide more feedback to the user.

About a year ago I was asked to create a plugin that allowed visitors to navigate a series of web pages without having to ever actually leave one page. What I came up with I’m calling the Page Carousel plugin. The Page Carousel allows you to take an unordered list and turn each item into its own page.

Features:

• Turns an unordered list into a web page carousel. Have an entire website run from one page.
• Each “page” is bookmarkable and can be linked to directly
• Shortest path algorithm finds the shortest path to the selected page. For example, in a seven page site if you navigate from page 2 to page 7, the carousel slides to the right three pages instead of to the left five pages.
• Peek effect. Allows users to see part of the previous and next pages.
• Keyboard navigation. Use the left and right arrows to navigate.
• Customizable navigation links and arrow images.
• Resizes with browser.
• Separate left/right easing effects
• Callback functions
• Degradable. No JavaScript? No problem!

Download

• jquery.pagecarousel.js (13k)

Demos

• Example 1 – Small peek applied
• Example 2 – Embedded video and alternate navigation options

View each demo’s source code for options and styling.

How to Use

Build an unordered list and wrap it in a div with an ID. Point to jQuery and the plugin (using an easing plugin is optional):

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.pagecarousel.js"></script>
<script type="text/javascript">
$(function(){
    $('#container').pageCarousel({
        nextPrevImagePath: 'images/nextprev.png',
        transitionSpeed:500,
        padding:'10px',
        peekAmount: '20px',
        showLinks: true,
        pageWidth: '800px',
        linkPosition: 'top',
        easeLeft: 'easeInOutExpo',
        easeRight: 'easeInOutExpo'
    });
});
</script>

A namespace is essentially a wrapper for your code’s variables, functions, constants, and classes. This wrapper prevents “collisions” (a.k.a. clashes, conflicts, etc.) with other people’s code. For example, if you grab a script from a site and drop it into your web page you might find that for some reason that the script doesn’t work. Or you may discover that code you wrote, which worked before you dropped in this new code, has stopped working. After doing some debugging you determine the problem stems from both you and the person who wrote the script you grabbed are using the same variable names purely by accident. Your code works fine on its own, as does this script you grabbed; however because you both inadvertently used the same name for a variable, one of your variables is being overwritten by the other. For example, you both may have used a variable named firstName. Now while this might not be hard to fix, it can be time consuming and frustrating to track these kinds of errors down. Plus, simply renaming the conflicting variables can lead to other errors springing up. With more and more developers writing code to be shared, the odds only increase that someone will step on someone else’s code. This is where namespaces come in.

Namespaces basically wrap all your variables in a tidy package so that you can use whatever names you like without them colliding with someone else’s variables. A key step is to give your namespace a unique name because if your namespace has the same name as someone else’s namespace, well pretty much the universe will implode on itself. But fear not, it’s far easier to change a namespace’s name in the event of duplication than it is to replace all the instances of one or more variables in your code.

Again, while namespaces are not required, they can be an extremely valuable tool.

JavaScript Namespaces

By default, variables in JavaScript are global in scope unless they’re defined within a function using the var declaration. This means that you can access a variable anywhere in a script since they are within the global namespace. Variables defined within functions using the var declaration (e.g. var foo = 2;) are only accessible from within that function. By creating your own namespace you segregate your variables from the global namespace and prevent other code from accidentally accessing them, similar to the way using the var declaration in a function segregates that variable from being accesses from outside of that function. If you and I both write code that use a variable named firstName and then include both scripts on the same page, one of the scripts will overwrite the other’s use of firstName. As the book JavaScript the Definitive Guide states, “If you want to write a module of JavaScript code that can be used by any script and can be used with any other module, the most important rule you must follow is to avoid defining global variables. Anytime you define a global variable, you run the risk of having that variable overwritten by another module or by the programmer who is using your module. The solution instead is to define all the methods and properties for your module inside a namespace that you create specifically for the module.”

One of the easiest and most widely-used methods for defining your own namespace in JavaScript is to use an object. For example,

var superspace = {};

creates an empty JavaScript object which can then be used as our namespace. In the past we might assign a value to our firstName variable like

var firstName = "John";

however by using an object we can now do the same thing via

superspace.firstName = "John";

You can also place functions in your namespace object in a similar way. For example,

superspace.getFirstName = function() {
return superspace.firstName
};

The only real difference when using namespaces is that you prefix the name of the namespace object (superspace) to the variable name. This little change is what allows us to encapsulate our variables and keep them protected. It’s also possible to create your namespace object and your variables and functions at the same time. For example, using the same code as before you could write:

var superspace = {
    firstName : "John",
    getFirstName : function() {return superspace.firstName}
};
document.write(superspace.getFirstName()); // outputs "John"

Now, superspace.firstName and superspace.getFirstName are available globally within our page, however collisions won’t occur unless someone else is also using an object with both the same name (superspace) and the same variables (firstName and getFirstName).

Another way to create a namespace is through self-executing or self-invoking functions. Self-executing and self-invoking functions are simply anonymous functions (no explicit name) that are executed immediately after they are read by the browser. For example:

var superspace = (function() {
var firstName = "John";
var getFirstName = function(){return firstName};
    return {getFirstName:getFirstName};
})();
document.write(superspace.getFirstName()); // outputs "John"

A self-invoking function is a normal function, just with a set of parentheses appended to the end. The set of parentheses at the end tell the browser to execute the function just as if you were invoking a normal, named function (e.g. getFirstName();). Since self-invoking functions aren’t reusable, they’re really not functions in the truest sense since functions are meant to be reused. To differentiate self-invoking functions from normal functions, it’s recommended that self-invoking functions are wrapped in parentheses. To be honest, I prefer the simple object method of namespacing over the self-invoking function method because it’s easier to read and needs less code to accomplish the same task.

Let me say that canvas support is better than ever with all major browsers now supporting it. In the past this was always a weak point for canvas as IE8 had no canvas support (without hacks), so the case for using canvas was limited. Until now. Unfortunately the documentation for canvas is a little fragmented and getting a good grip on all the nuances and features can be a bit frustrating. But this article isn’t about me teaching you canvas, it’s about how canvas can be used to build a scratch off card without having to use a lick of Flash.

What shocked me the most was how basic the final code I came up with was that accomplished the effect. The Actionscript for a Flash scratch off is no walk in the park, but the canvas version is very neat and clean. In fact, the function that does the heavy lifting is just six lines long. Six lines! And the weird part there is that none of the savings happens to come from jQuery. jQuery does show its strength in the rest of my code by handing the various mouse movements and DOM manipulations, in a total of about 45 lines of code. Awesome.

So I present to you a jQuery/Canvas scratch off that requires no Flash. Move your mouse over the scratch card and you’ll see a coin follow your mouse. Click and drag and you’ll soon be on your way to scratching to reveal the prize below the top layer. Voilà!

How it Works

Instead of a line by line breakdown of the code I’m going to give an overview of the entire process. We start by loading the images we’ll be using via JavaScript. Then we place a <canvas> tag on our page with the width and height set to match the dimensions of the images we’ll be using for our top and bottom layers (the top layer refers to the layer that would be scratched off on a real scratch off card and the bottom layer is what would be revealed). When the page loads, we begin the bulk of our scripting. We create and append a second “overlay” canvas element on top of the original canvas to hold our coin image. We tie listeners for the mousedown, mouseup, and mousemove events to this overlay canvas so that our coin image follows the mouse whenever it moves and that the scratch off effect is triggered only when the mousedown event occurs.

The mousedown event is where the scratch effect takes place. This bit of code comes from a trick I borrowed from my Flash scratch off creation days. While it looks like you’re removing parts of the “top” layer to reveal the “bottom” layer, you’re actually drawing parts of the bottom layer on top of the top layer using the canvas element’s clip() method. Basically we’re drawing an arc (circle) and then clipping it to unmask, or reveal, part of the bottom layer image which is then drawn over the top image on our main canvas. In other words, we first draw our circle shape and then combine that with the bottom image so that only that part of the bottom image is used. We then apply that clipped image and draw it onto our main canvas, thus creating the scratch off effect. We repeatedly save and restore our clipping path to build it up as we continually click and drag. Did I mention that the effect takes just six lines of code?!

Unfortunately neither the canvas element nor jQuery have any built-in collision detection like Flash does. If either one did then this would have allowed me to find out how much scratching someone had done and complete the process for them when they had scratched enough. For example, if they had scratched away 80% of the top layer (actually drawing 80% of the bottom layer but let’s not split hairs) then we could remove the rest of the little pieces automatically. Not a necessity by any means, but it would have been a nice touch. If anyone knows of an easy way to do this that doesn’t add tons of code or eat memory then let me know.

So there you have it. All you need are three images (top layer, bottom layer, and coin) and this code. You could conceivable get rid of the overlay canvas and coin, however I’ve found it a little more user-friendly to have the coin in there so that the user doesn’t just see the mouse cursor poking holes in the image. You could also use PHP to dynamically create the bottom image so that it randomly changed.

License

This code is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) (http://creativecommons.org/licenses/by-nc-sa/3.0/). For commercial use, please email admin@catchmyfame.com.