real_illusions Posted April 5, 2009 Share Posted April 5, 2009 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 More sharing options...
Shakazahn Posted April 5, 2009 Share Posted April 5, 2009 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 Link to comment Share on other sites More sharing options...
real_illusions Posted April 5, 2009 Author Share Posted April 5, 2009 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 More sharing options...
jlhaslip Posted April 6, 2009 Share Posted April 6, 2009 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 More sharing options...
real_illusions Posted April 6, 2009 Author Share Posted April 6, 2009 Ah, excellent, near enough what I was after.Thanks:) Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.