jQuery Page Carousel Plugin

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>

You may have heard the term “namespace” and had a vague idea (or no idea whatsoever) what it referred to. A namespace is a coding term that pops up from time to time as something you should probably know about but don’t have to get through your day. Knowing when to use a namespace is both a good coding practice and a courtesy to other developers. In this article I’ll give you an overview about what a namespace is and how it works with a focus on JavaScript. Continue Reading »