View demo Download source

Applying a :hover pseudo-class to an element is widely known as the classic “hovering” over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This becomes extreme when we create a circle by setting the border-radius of a square to 50% (half of its outer width and height).

Today we want to share one possible solution to the circle hovering problem. We’ll create a plugin that will take care of the ‘mouseenter’, ‘mouseleave’ and ‘click’ events to be triggered only on the circular shape of the element and not its bounding box.

The image used in the demo is by Andrey & Lili. They are licensed under the Attribution-NonCommercial 3.0 Unported (CC BY-NC 3.0) License.

How it works

In our example, we’ll be creating a circle with some kind of hover effect. The structure will simply be:

<a href="#" id="circle" class="ec-circle">
	<h3>Hovered</h3>
</a>

And the style will be the following:

.ec-circle{
	width: 420px;
	height: 420px;
	-webkit-border-radius: 210px;
	-moz-border-radius: 210px;
	border-radius: 50%;
	text-align: center;
	overflow: hidden;
	font-family:'Kelly Slab', Georgia, serif;
	background: #dda994 url(../images/1.jpg) no-repeat center center;
	box-shadow:
		inset 0 0 1px 230px rgba(0,0,0,0.6),
		inset 0 0 0 7px #d5ad94;
	transition: box-shadow 400ms ease-in-out;
	display: block;
	outline: none;
}

Now, we will define a class for the hover effect but not a dynamic pseudo-class :hover. The idea is to apply this class then with jQuery when we enter the circular area of our element:

.ec-circle-hover{
    box-shadow:
		inset 0 0 0 0 rgba(0,0,0,0.6),
		inset 0 0 0 20px #c18167,
		0 0 10px rgba(0,0,0,0.3);
}

Only when we have JavaScript disabled, we’ll add the pseudo-class. This style can be found in the noscript.css:

.ec-circle:hover{
    box-shadow:
		inset 0 0 0 0 rgba(0,0,0,0.6),
		inset 0 0 0 20px #c18167,
		0 0 10px rgba(0,0,0,0.3);
}

The JavaScript

We are going to create a simple plugin that basically “redefines” the three events mentioned earlier. We’ll make the events only applicable on the circular shape:

$.CircleEventManager 			= function( options, element ) {

	this.$el			= $( element );

	this._init( options );

};

$.CircleEventManager.defaults 	= {
	onMouseEnter	: function() { return false },
	onMouseLeave	: function() { return false },
	onClick			: function() { return false }
};

$.CircleEventManager.prototype 	= {
	_init 				: function( options ) {

		this.options 		= $.extend( true, {}, $.CircleEventManager.defaults, options );

		// set the default cursor on the element
		this.$el.css( 'cursor', 'default' );

		this._initEvents();

	},
	_initEvents			: function() {

		var _self	= this;

		this.$el.on({
			'mouseenter.circlemouse'	: function( event ) {

				var el	= $(event.target),

						  circleWidth	= el.outerWidth( true ),
						  circleHeight	= el.outerHeight( true ),
						  circleLeft	= el.offset().left,
						  circleTop		= el.offset().top,
						  circlePos		= {
							  x		: circleLeft + circleWidth / 2,
							  y		: circleTop + circleHeight / 2,
							  radius: circleWidth / 2
						  };

				// save cursor type
				var cursor	= 'default';

				if( _self.$el.css('cursor') === 'pointer' || _self.$el.is('a') )
					cursor = 'pointer';

				el.data( 'cursor', cursor );

				el.on( 'mousemove.circlemouse', function( event ) {

					var distance	= Math.sqrt( Math.pow( event.pageX - circlePos.x, 2 ) + Math.pow( event.pageY - circlePos.y, 2 ) );

					if( !Modernizr.borderradius ) {

						// inside element / circle
						el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
						_self.options.onMouseEnter( _self.$el );

					}
					else {

						if( distance <= circlePos.radius && !el.data('inside') ) {

							// inside element / circle
							el.css( 'cursor', el.data('cursor') ).data( 'inside', true );
							_self.options.onMouseEnter( _self.$el );

						}
						else if( distance > circlePos.radius && el.data('inside') ) {

							// inside element / outside circle
							el.css( 'cursor', 'default' ).data( 'inside', false );
							_self.options.onMouseLeave( _self.$el );

						}

					}

				});	

			},
			'mouseleave.circlemouse'	: function( event ) {

				var el 	= $(event.target);

				el.off('mousemove');

				if( el.data( 'inside' ) ) {

					el.data( 'inside', false );
					_self.options.onMouseLeave( _self.$el );

				}

			},
			'click.circlemouse'			: function( event ) {

				// allow the click only when inside the circle

				var el 	= $(event.target);

				if( !el.data( 'inside' ) )
					return false;
				else
					_self.options.onClick( _self.$el );

			}
		});

	},
	destroy				: function() {

		this.$el.unbind('.circlemouse').removeData('inside').removeData('cursor');

	}
};

When we enter with the mouse in the square bounding box of our circle, we bind the ‘mousemove’ event to the element and like that we can track if the distance of the mouse to the center of the element if longer than the radius. If it is, we know that we are not yet hovering the circular area of the element.

Once the distance of the mouse is shorter than the radius, we know that we entered the circle and we trigger our custom ‘mouseenter’ event.

We also only allow the click event when the mouse is inside of the circle.

In our example we will then apply our plugin to the regarding element. In our case, we are adding the hover class on ‘mouseenter’ and removing it on ‘mouseleave’.

$('#circle').circlemouse({
	onMouseEnter	: function( el ) {

		el.addClass('ec-circle-hover');

	},
	onMouseLeave	: function( el ) {

		el.removeClass('ec-circle-hover');

	},
	onClick			: function( el ) {

		alert('clicked');

	}
});

Remember that the “normal” pseudo hover class is also defined in the noscript.css which gets applied when JavaScript is disabled.

I hope you find this useful!

View demo Download source

View demoDownload source

Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. Today we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.

jScrollPane was created by Kevin Luck and you can read more about it here:
jScrollPane – cross browser styleable scrollbars with jQuery and CSS

The Markup

An example for the markup used in our demos is the following:

<div id="jp-container" class="jp-container">
	<!-- content -->
</div>

The jp-container will be our scrollable content area.

The CSS

Besides the style for the custom scrollbar of jScrollPane, we will have the following style for our container:

.jp-container{
    width:500px;
    height:400px;
    position:relative;
    background:#fff;
    border:1px solid #D8DFEA;
	float:left;
}

The JavaScript

We are going to extend the jScrollPane plugin with the new functionality of showing and hiding the scrollbar:

// the element we want to apply the jScrollPane
var $el					= $('#jp-container').jScrollPane({
	verticalGutter 	: -16
}),

// the extension functions and options
	extensionPlugin 	= {

		extPluginOpts	: {
			// speed for the fadeOut animation
			mouseLeaveFadeSpeed	: 500,

			// scrollbar fades out after
			// hovertimeout_t milliseconds
			hovertimeout_t		: 1000,

			// if set to false, the scrollbar will
			// be shown on mouseenter and hidden on
			// mouseleave
			// if set to true, the same will happen,
			// but the scrollbar will be also hidden
			// on mouseenter after "hovertimeout_t" ms
			// also, it will be shown when we start to
			// scroll and hidden when stopping
			useTimeout			: false,

			// the extension only applies for devices
			// with width > deviceWidth
			deviceWidth			: 980
		},
		hovertimeout	: null,
		// timeout to hide the scrollbar

		isScrollbarHover: false,
		// true if the mouse is over the scrollbar

		elementtimeout	: null,
		// avoids showing the scrollbar when moving
		// from inside the element to outside, passing
		// over the scrollbar

		isScrolling		: false,
		// true if scrolling

		addHoverFunc	: function() {

			// run only if the window has a width bigger than deviceWidth
			if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false;

			var instance		= this;

			// functions to show / hide the scrollbar
			$.fn.jspmouseenter 	= $.fn.show;
			$.fn.jspmouseleave 	= $.fn.fadeOut;

			// hide the jScrollPane vertical bar
			var $vBar			= this.getContentPane().siblings('.jspVerticalBar').hide();

			/*
			 * mouseenter / mouseleave events on the main element
			 * also scrollstart / scrollstop
			 * @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
			 */
			$el.bind('mouseenter.jsp',function() {

				// show the scrollbar
				$vBar.stop( true, true ).jspmouseenter();

				if( !instance.extPluginOpts.useTimeout ) return false;

				// hide the scrollbar after hovertimeout_t ms
				clearTimeout( instance.hovertimeout );
				instance.hovertimeout 	= setTimeout(function() {
					// if scrolling at the moment don't hide it
					if( !instance.isScrolling )
						$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
				}, instance.extPluginOpts.hovertimeout_t );

			}).bind('mouseleave.jsp',function() {

				// hide the scrollbar
				if( !instance.extPluginOpts.useTimeout )
					$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
				else {
				clearTimeout( instance.elementtimeout );
				if( !instance.isScrolling )
						$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
				}

			});

			if( this.extPluginOpts.useTimeout ) {

				$el.bind('scrollstart.jsp', function() {

					// when scrolling show the scrollbar
					clearTimeout( instance.hovertimeout );
					instance.isScrolling	= true;
					$vBar.stop( true, true ).jspmouseenter();

				}).bind('scrollstop.jsp', function() {

					// when stop scrolling hide the
					// scrollbar (if not hovering it at the moment)
					clearTimeout( instance.hovertimeout );
					instance.isScrolling	= false;
					instance.hovertimeout 	= setTimeout(function() {
						if( !instance.isScrollbarHover )
							$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
					}, instance.extPluginOpts.hovertimeout_t );

				});

				// wrap the scrollbar
				// we need this to be able to add
				// the mouseenter / mouseleave events
				// to the scrollbar
				var $vBarWrapper	= $('<div/>').css({
					position	: 'absolute',
					left		: $vBar.css('left'),
					top			: $vBar.css('top'),
					right		: $vBar.css('right'),
					bottom		: $vBar.css('bottom'),
					width		: $vBar.width(),
					height		: $vBar.height()
				}).bind('mouseenter.jsp',function() {

					clearTimeout( instance.hovertimeout );
					clearTimeout( instance.elementtimeout );

					instance.isScrollbarHover	= true;

					// show the scrollbar after 100 ms.
					// avoids showing the scrollbar when moving
					// from inside the element to outside,
					// passing over the scrollbar
					instance.elementtimeout	= setTimeout(function() {
						$vBar.stop( true, true ).jspmouseenter();
					}, 100 );	

				}).bind('mouseleave.jsp',function() {

					// hide the scrollbar after hovertimeout_t
					clearTimeout( instance.hovertimeout );
					instance.isScrollbarHover	= false;
					instance.hovertimeout = setTimeout(function() {
						// if scrolling at the moment
						// don't hide it
						if( !instance.isScrolling )
							$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
					}, instance.extPluginOpts.hovertimeout_t );

				});

				$vBar.wrap( $vBarWrapper );

			}

		}

	},

	// the jScrollPane instance
	jspapi 			= $el.data('jsp');

// extend the jScollPane by merging
$.extend( true, jspapi, extensionPlugin );
jspapi.addHoverFunc();

And that’s it! I hope you liked this little extension and find it useful!

View demoDownload source

View demo Download source

With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

In a carousel, one could think that simply making its container “shorter” will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. This and other options are part of Elastislide’s properties.

Elastislide uses the jQuery Touchwipe Plugin which allows you to obtain the wipe event on an iPhone, iPad or iPod Touch.

The images are by Karrie Nodalo and you can find her awesome photos here:
Karrie Nodalo’s Photostream on Flickr
Her images are licensed under the Attribution 2.0 Generic License.

The HTML Structure

The Markup for the carousel consists of a main wrapper that will adjust to the width of any fluid container you put it into. (If you put the carousel in a container with a fixed width, it will not adapt. So make sure that your container has a fluid layout.)
The carousel element will have an unordered list with linked images:

<div id="carousel" class="es-carousel-wrapper">
	<div class="es-carousel">
		<ul>
			<li>
				<a href="#">
					<img src="images/medium/1.jpg" alt="image01" />
				</a>
			</li>
			<li>...</li>
			...
		</ul>
	</div>
</div>

Use your preferred ID and call the plugin like this:

$('#carousel').elastislide({
	imageW 	: 180
});

where imageW is the width of the thumbnails.

Options

Elastislide has the following default options:

speed		: 450,
// animation speed

easing		: '',
// animation easing effect

imageW		: 190,
// the images width

margin		: 3,
// image margin right

border		: 2,
// image border

minItems	: 1,
// the minimum number of items to show.
// when we resize the window, this will
// make sure minItems are always shown
// (unless of course minItems is higher
// than the total number of elements)

current		: 0,
// index of the current item
// when we resize the window,
// the plugin will make sure that
// this item is visible 

onClick		: function() { return false; }
// click item callback
// Example of how to get the index
// of the clicked element:
/*
$('#carousel').elastislide({
    onClick  :  function( $item ) {
        alert( 'The clicked item´s index is ' + $item.index() )
    }
});
*/

It is also possible to dynamically add new items to the carousel. The following is an example on how to achieve that:

var $items	= $('<li><a href="#"><img src="images/large/1.jpg" alt="image01" /></a></li><li><a href="#"><img src="images/large/2.jpg" alt="image01" /></a></li>');
$('#carousel').append($items).elastislide( 'add', $items );

I hope you like this plugin and find it useful!

View demo Download source

jCookies, a jQuery plugin, makes getting and settings HTTP Cookies a breeze. jCookies allows the storage of any type of data: strings, arrays, objects, etc. A while back while developing my FormBuilder I needed a good solution for storing cookies via JavaScript. As a result of the work down for that project I built jCookies.

The following will demonstrate the methods for storing and retrieving data using jCookies and will show how to retrieve data using server side code such as C# and PHP.

Note: Data is stored in the cookie as JSON data then Base64 encoded to enable the survival through transport layers that are not 8-bit clean. JSON and base64 functions are included in the script and if trimmed out, provided they exist elsewhere, would reduce the size by 70%.

Creating Cookies

To create a cookie you call jCookies and must pass two properties, name and value.

$.jCookies({
    name : 'Listening To',
    value : { album : 'The Go Round', artist : 'Inf', rating : 9, thumbs_up : true}
});

As you can see you can store pretty much anything. By default cookies are set to expire after 27 days. You can edit the expiration by settings one of the following properties: seconds, minutes, hours, days. The value entered for these properties must be a valid number or they will be ignored.

$.jCookies({ name : 'User', value : { username : 'Bob' , level : 5 }, minutes : 60 });

Note: If you plan on retrieving data from the server side via ASP.net keep the cookie data very simple. More on this later.

Retrieving Cookies

To retrieve a cookie you call jCookies and pass a single properties, get.

var listening_to = $.jCookies({ get : 'Listening To' });
    // response: { album : 'The Go Round', artist : 'Inf', rating : 9, thumbs_up : true}

var rutabaga = $.jCookies({ get : 'Rutabaga' }); // (cookie was set by another proces)
    // response: false

Data is returned just as you would expect it to. If there was no cookie stored with that name, the cookie has expired, or there was an error then the response would be false. If you want to see if there was an error with the cookie you can set the optional property error. By default this property is set to false.

var rutabaga = $.jCookies({ get : 'Rutabaga', error : true });
    /* response:
        Error : {
            arguments : undefined,
            message : "Invalid base64 data",
            stack : "—",
            type : undefined
        }
    */

This is an error response from Chrome. Depending on your browser your results may vary.

Erasing Cookies

To erase a cookie you call jCookies and pass a single property, erase.

var erased_listening_to = $.jCookies({ erase : 'Listening To' });
    // response: true

var rutabaga = $.jCookies({ erase : 'Rutabaga' });
    // response: false

If a cookie existed and was erased successfully true is returned. If the cookie never existed false is returned.

jCookies Server Side

Dealing with HTTP Cookies created by jCookies on the server side is a cinch you simply need to Base64 decode the data then JSON decode the data.

Setting cookie in JavaScript

$.jCookies({name:'user',value:{name:'brian',level:'awesome'}});
    // response: true

Retrieving the cookie in PHP

<?php print_r(json_decode(base64_decode($_COOKIE['user'], true))); ?>
    /* response:
        stdClass Object
            (
            [name] => brian
            [level] => awesome
            )
    */

With PHP it couldn’t be easier. In the demonstration above I am printing out the entire cookie.

Retrieving the cookie in C#

Dictionary<string,object> user =
  new JavaScriptSerializer().Deserialize<Dictionary<string,object>>
  (Encoding.UTF8.GetString(
	Convert.FromBase64String(Page.Request.Cookies["user"].Value)
  ));

Page.Response.Write("user : name  = " + (string) user["name"]);

With C# its a bit more difficult. You have to set the type of each bit of data that comes back before you can use it. That is why I am storing the data as Dictionary<string,object>. We set the property to string to make it accessible and set the value to object for casting later. If you knew exactly the format of the cookie beforehand you could always create your own class and store that data in that class.

That about does it. If you want to know more visit my site or the jQuery plugin page.

Download jCookies

Today we want to share a little zoom tour script with you. Showing a main image initially, we want to be able to zoom into certain parts of the image by clicking on tags, using another image for the closer view. This next step can contain other tags that again allow to show more images. We achieve the “zoom” effect by enlarging the current image and fading in the new one.

The images used in the demos can be found here:
image1: City Crowd
image1_5: Office
image2: Ikea Room
image3_n: Portimão Marina
Background Pattern by http://www.blunia.com/ on http://subtlepatterns.com/

The HTML Structure

For the HTML structure we will have a main container and each image inside of a div with the class “zt-item”:

<div id="zt-container" class="zt-container">
	<div class="zt-item" data-id="zt-item-1">
		<img class="zt-current" src="images/image1.jpg" />
		<div class="zt-tag" data-dir="1" data-link="zt-item-2" data-zoom="5" data-speed="700" data-delay="50" style="top:138px;left:151px;"></div>
		<div class="zt-tag" data-dir="1" data-link="zt-item-3" data-zoom="6" data-speed="700" data-delay="50" style="top:253px;left:520px;"></div>
	</div>
	<div class="zt-item" data-id="zt-item-2">
		<img class="zt-current" src="images/image1_1.jpg" />
		<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="5" data-speed="500" data-delay="0"></div>
	</div>
	<div class="zt-item" data-id="zt-item-3">
		<img class="zt-current" src="images/image2_2.jpg" />
		<div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="6" data-speed="500" data-delay="0"></div>
	</div>
</div>

<img class="zt-current" src="images/imageX.jpg" /> is the image in each step. The item then have tags with certain attributes.
The data attributes are the following:

• data-dir is either 1 or -1 depending on whether we want to “zoom in” (1) or “zoom back out” (-1)
• data-link will indicate to which item we connect the tag to (based on the data-id we give to each item)
• data-zoom is the factor of zooming. Set very low, the image we zoom into or zoom back to will only enlarge slightly.
• data-speed the animation speed in milliseconds
• data-delay the delay time for the new image to appear

The example structure above has the first initial image (zt-item-1) with two tags that lead to zt-item-2 and zt-item-3. zt-item-2 and zt-item-3 only have the back tag. As you can see, the back tag has another class “zt-tag-back” and a data-dir value of -1.

The position of the tags is defined in the style attribute and you can also add another size for it, too.

Options

The following are the default options:

$('#zt-container').zoomtour({
	// if true the tags are rotated depending on their position
	rotation		: true,
	// zoom out animation easing. Example: easeOutBounce , easeOutBack
	zoominEasing	: '',
	// zoom out animation easing
	zoomoutEasing	: ''
});

We hope you like this little script and find it useful!

View demo Download source

Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in all 2D ways (horizontal/vertical). Either the arrows or the little boxes below the current image can be used in order to navigate.

The beautiful photography is by Angelo González. Check out his Flickr photostream or follow him on Twitter @ag2r.

The Markup

For the markup, we’ll have a main wrapper div with the background, the arrows and the gallery containers inside:

<div id="portfolio">
	<div id="background"></div>
	<div class="arrows">
		<a href="#" class="up">Up</a>
		<a href="#" class="down">Down</a>
		<a href="#" class="prev">Previous</a>
		<a href="#" class="next">Next</a>
	</div>
	<div class="gallery">
		<div class="inside">
			<div class="item">
				<div><img src="images/1.jpg" alt="image1" /></div>
				<div><img src="images/2.jpg" alt="image2" /></div>
				<div><img src="images/3.jpg" alt="image3" /></div>
			</div>
			<div class="item">
				<div><img src="images/4.jpg" alt="image4" /></div>
				<div><img src="images/5.jpg" alt="image5" /></div>
			</div>
			<div class="item">
				<div><img src="images/6.jpg" alt="image6" /></div>
				<div><img src="images/7.jpg" alt="image7" /></div>
				...
			</div>
			<div class="item">
				...
			</div>
		</div>
	</div>
</div>

Now, let’s take a look at the style.

The CSS

First, let’s define the style for the main container. We’ll set it’s position to be fixed and center it in the screen with the 50% and negative margin technique:

#portfolio {
	position:fixed;
	top:50%;
	left:50%;
	z-index:1;
	width:1000px;
	height:500px;
	margin:-250px 0 0 -500px;
}

The background will also be fixed and we’ll add a background image that creates the spotlight effect:

#background {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
	background:url(../images/bg.png) no-repeat center;
}

The gallery will be positioned absolutely, just like it’s inner div:

#portfolio .gallery,
#portfolio .gallery .inside {
	position:absolute;
	top:0;
	left:0;
}

The gallery will also occupy all the space of the portfolio:

#portfolio .gallery {
	width:100%;
	height:100%;
	overflow:hidden;
}

We’ll fix the z-index of the inside div in order for keeping the stacking right:

#portfolio .gallery .inside {
	z-index:1;
}

Now, we’ll style the arrows. First, we’ll define the common style:

#portfolio .arrows a {
	position:absolute;
	z-index:3;
	width:32px;
	height:32px;
	background-image:url(../images/arrows.png);
	background-repeat:no-repeat;
	outline:none;
	text-indent:-9999px;
}

And then we’ll style all the single arrows:

#portfolio .arrows .prev,
#portfolio .arrows .up {
	display:none;
}

#portfolio .arrows .up,
#portfolio .arrows .down {
	left:50%;
	margin-left:-16px;
}

#portfolio .arrows .prev,
#portfolio .arrows .next {
	top:180px;
}

#portfolio .arrows .up {
	background-position:0 -64px;
	top:20px;
}

#portfolio .arrows .down {
	background-position:0 -96px;
	bottom:120px;
}

#portfolio .arrows .prev {
	background-position:0 -32px;
	left:60px;
}

#portfolio .arrows .next {
	background-position:0 0;
	right:60px;
}

#portfolio .arrows .up:hover {
	background-position:-32px -64px;
}

#portfolio .arrows .down:hover {
	background-position:-32px -96px;
}

#portfolio .arrows .next:hover {
	background-position:-32px 0;
}

#portfolio .arrows .prev:hover {
	background-position:-32px -32px;
}

The item divs, which are our wrappers for the image sets will be styled as follows:

#portfolio .item {
	position:absolute;
	top:0;
	width:1000px;
	height:400px;
}

Each image wrapper will be positioned absolutely, too and occupy all the space:

#portfolio .item div {
	position:absolute;
	left:0;
	width:100%;
	height:100%;
}

Each image will be centered. Keep in mind that in our example we are using images with a width of 600px, so if you use different ones, you need to adapt this:

#portfolio .item div img {
	position:absolute;
	top:0;
	left:50%;
	margin-left:-300px;
}

Let’s style the little boxes navigation which will be added dynamically:

#portfolio .paths {
	position:absolute;
	bottom:60px;
	left:50%;
	margin-left:-30px;
	z-index:4;
}

#portfolio .paths div {
	position:absolute;
	top:0;
}

#portfolio .paths a {
	background:#333;
	display:block;
	position:absolute;
	left:0;
	outline:none;
}

#portfolio .paths a:hover,
#portfolio .paths .active {
	background:#fff;
}

And that’s all the style!

The JavaScript

In this part, we’ll show you how to initialize the plugin.
In the head of our HTML file, we will include the following three scripts:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/portfolio.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

The first one is the jQuery library, the second one is our plugin and the third one is the initialization script:

var o = {
	init: function(){
		this.portfolio.init();
	},
	portfolio: {
		data: {
		},
		init: function(){
			$('#portfolio').portfolio(o.portfolio.data);
		}
	}
}

$(function(){ o.init(); });

The default option values for our plugin are the following:

$('#portfolio').portfolio({
	image: {
		width: 600,
		height: 400,
		margin: 20
	},
	path: {
		width: 10,
		height: 10,
		marginTop: 5,
		marginLeft: 5
	},
	animationSpeed: 400
});

The image options are the width, height and the margin between the images. The path options define the aspect of the little navigation boxes, how big they should be and how much margin they should have. Last, the animation speed can be adjusted.

Stay tuned for the next tutorial!

View demoDownload source

Timeglider is a zooming, panning data-driven timeline — great for history projects, project planning, and much more. This Javascript/jQuery plugin is completely free & open-source [MIT]..

Source

http://timeglider.com/jquery/

Demo

http://timeglider.com/jquery/large.html

diagonalFade is a jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements. All you have to do is import it, specify the container to which the group of items resides, and poof, you’re off and away..

Source

http://jonobr1.github.com/diagonalFade/

Demo

http://jonobr1.github.com/diagonalFade/