Hi All,
I am relatively new to JQuery, so I apologize in advance if my questions are a bit long amateurish.
I added a jquery plugin CrossSlide to my web page available at
http://www.gruppo4.com/~tobia/cross-slide.shtmlbut wanted to make a few modifications
1.) Make it work for only one image (not transitions b/n many images)
2.) Activate the desired effect onMouseOver().
I have kind of managed to make this happen by making some changes, but the problems I am facing at the moment are
1.) Is the way I have made it work for one image (actually using the same image twice) the most efficient way?
2.) Is the way I have activated the mouseOver() event the most efficient way? What if I had three different images each in their own separate div container that I wanted to add this effect to each of them, would that mean that I would have to add the same onMouseOver() event handler for all three of the divs and just change the class name? Is there a better way of handling this?
3.) On firefox the effect starts and then freezes whilst the mouse is still over the image, If I move the mouse away the effect continues (but I actually want the opposite to happen) ie stop the effect onMouseOut(), on ie6 seems to work fine (if cursor is on the image effect doesnt freeze still continues) but doesnt stop on mouseOut()
Here is a working example of how far i got.
http://www.indigoct.com/tests/test.htmAnd I have also pasted my html code below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.cross-slide.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<style type="text/css">
#test3 {
margin: 1em auto;
border: 2px solid #555;
width: 550px;
height: 367px;
}
</style>
<div id="test3" style="padding: 0px; overflow: hidden; position: relative;" onMouseOver="$(function() {
$('#test3').crossSlide({
loop:1,
fade: 1
}, [
{
src: 'lib/sand-castle.jpeg',
href: 'http://flickr.com/photos/spacetrucker/94209642/',
from: 'top left',
to: 'bottom right 1.5x',
time: 3
},
{
src: 'lib/sand-castle.jpeg',
href: 'http://flickr.com/photos/hichako/1125341449/',
from: 'top left',
to: 'top left',
time: 1
}]);
});
">
<a href="http://flickr.com/photos/spacetrucker/94209642/">
<img src="lib/sand-castle.jpeg" style="border: 0px none ; position: absolute; visibility:visible; top: 0px; left:0 width: 550px; height: 460px; display: block;"/>
</a>
<a href="http://flickr.com/photos/spacetrucker/94209642/">
<img src="lib/sand-castle.jpeg" style="border: 0px none ; position: absolute; visibility: hidden; top: 0px; left: -385px; width: 935px; height: 782px; display: block;"/>
</a>
<a href="http://flickr.com/photos/hichako/1125341449/">
<img src="lib/sand-castle.jpeg" style="border: 0px none ; position: absolute; visibility: hidden; top: 0px; left: -385px; width: 935px; height: 782px; display: block;"/>
</a>
</div>
</body>
</html>
I would appreciate any sort of help (otherwise might have to switch to flash which I really dont want to do :(