Asaf Zamir – Chief Technology Officer and Cloud Consultant

I've recently needed an image gallery built, with some sort
of a good looking Dock.
My problem was, that all the docks I've seen try to emulate Apple's
dock, but I didn't want the sizes to change, I just wanted a nice flow,
so I just built my own dock.

Example Page

all you need to do is write a small JS code:

$(window).load(function() {
initDock($('#dock'),$('#dock img.active'),250,25);
});

on window.load otherwise Chrome can't calculate the image sizes,
paramter 1 - the div that holds the images
parameter 2 - the default active image
parameter 3 - basically the radius of the "affected" images,
that is, the maximum distance needed for an image to start moving.
parameter 4 - the maximum distance the images would move (upward)

for some reason the plugin doesn't work well in Firefox 4 for linux
(not sure why yet)

Requirements:

• jQuery (used 1.5.1, but probably works with older versions)
• jQuery imageDock plugin

Download imageDock Plugin

jQuery plugin Page

Ever wanted to create Custom Cursor for different elements on your page?

It is a little known fact that although possible through CSS, custom cursors don't work
in most browsers! what a shame.

I made this small plugin to simply enable people create custom cursors with any
image format they wish (unlike the CSS solution that makes you use .cur files, ha?!)

Example Page

all you need to do is write a small JS code:

1
2
3
$(document).ready(function() {<br />
customcursor($('#smileDiv'),'smile.gif');<br />
});

of course you can insert the line inside an already existing document.ready function

Requirements:

• jQuery (used 1.5.1, but probably works with older versions)
• jQuery CustomCursor plugin

Download Custom Cursor Plugin

jQuery plugin Page

Ever wanted to do a .next() or .prev() on jQuery and make
it automatically wrap around (so if there's no next, just choose the first..)?

Well, it's quite simple, but I made a small script for that.
all you have to do is instead of $('element').next() just write $('element').nextWrap()
and instead of $('element').prev() it's $('element').prevWrap()

Update!

Now it's possible to add a selector  (only if you want to :-) )

if you want the next element that is an image, simply write $(this).nextWrap('img')
this will work like the normal jQuery selectors!

Enjoy!

nextPrevWrap.js

A small script that executes the given commands AFTER
all animation is done.

I created this small scripts, it seems like many, many people would like
to do some commands after all animations are done, which make sense
because jQuery animations are asynchronous, which means that the
other lines of code are being executed while the animation is still in progress.

as always, jQuery is required.

enjoy:

waitForAnimation.js

I just finished developing the SlideNSwap Controllers plugin!
What I simply did was adding 3 buttons on hover: back, pause and hover.
Example Page

a CSS file is attached to this plugin, I recommend to change it as much as you want, I just did something really basic.

Requirements:

• jQuery (used 1.5.1, but probably works with older versions)
• jQuery Background Position plugin
• jQuery SlideNSwap plugin
  

Download slideNSwap Controllers Plugin:
the JS File
the CSS File

github page
jQuery plugin Page

SlideNswap is a pretty cool plugin,
It makes your image slide inside a frame and then swaps it to the next one.

To really understand what I'm talking about see the Example Page

Requirements:

• jQuery (used 1.5.1, but probably works with older versions)
• jQuery Background Position plugin

That's it!

Download Here

github page
jQuery plugin Page

plans for version 0.02:

• support for smaller images