Jump to content

Jquery Image Effects


real_illusions
 Share

Recommended Posts

Does anyone know where abouts i can find out about an image effect thats using jquery.Basically, when you hover over an image, the image gets slightly bigger, hover back out, the image shrinks to back to the original size. Bit like the Mac dock in a way, but for each individual image, doesnt effect the size of the other images around it, as the images are not going to be in a straight line.Any pointers would be appreciated.:)

Link to comment
Share on other sites

I don't know what this jquery is but I'm doing something like that for a site I'm working on, here's the code:

<img src="imagens/foto1th.jpg" class="imagens" onclick="openImage(this, this.lastsrc, this.state, 'picture1.jpg')">...<script>function openImage(object, lastsource, state, source){		if(state)	{		object.state = state;			}		else	{		object.state = false;	}	if(object.state == false)	{		object.lastsrc = object.src;		object.src = "images/" + source;			object.state = true;	}	else	{		object.src = lastsource;		object.state = false;	}}</script>

Adjust according to your needs, hope it helps.Edit: Forgot a line there :)

Edited by Shakazahn
Link to comment
Share on other sites

Jquery is a javascript library, its motto "write less, do more" - jquery.com Makes writing javascript alot easier, has quite a few plugins that are very popular on the web, such as the thickbox technique.Also, i believe, one of the 'rules' (for want of a better word) is that its de-gradable, the basic idea (or at least a basic version) of the effect or technique is still available for those without javascript to fall back on. So requires no (or very little) inline javascript. Theres still a few jquery techniques that require inline JS and have no fallback however.I've found one technique that does a similiar trick so far, but still looking for that elusive technique i described earlier.

Link to comment
Share on other sites

There is a 'hoverbox' photo gallery that uses CSS to do what you are asking about. Increase image size on-hover. Should be able to borrow their technique and do this without javascipt.Google Hoverbox Image Gallery

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...