Coast Line
asked on
jquery and issue with creating a fancybox
I am using the following Code:
Now from above code, i have created a hotspot map on the image which has the class rollover, i am unable to fire the fancybox event when i click the hotspot, please guide what i am missing
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="js/hover.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/timo.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var img_src = "";
var new_src = "";
timo.init();
setTimeout("timo.imageSwitcher()",1000);
timo.mainPage();
$(".rollover").hover(function(){
//mouseover
img_src = $(this).attr('src'); //grab original image
new_src = $(this).attr('rel'); //grab rollover image
$(this).attr('src', new_src); //swap images
$(this).attr('rel', img_src); //swap images
},
function(){
//mouse out
$(this).attr('src', img_src); //swap images
$(this).attr('rel', new_src); //swap images
});
//preload images
var cache = new Array();
//cycle through all rollover elements and add rollover img src to cache array
$(".rollover").each(function(){
var cacheImage = document.createElement('img');
cacheImage.src = $(this).attr('rel');
cache.push(cacheImage);
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#newsletter").fancybox({
'zoomSpeedIn': 300,
'zoomSpeedOut': 300,
'overlayShow': false,
'modal' : true
});
});
</script>
<td><img src="images/aboutus_0.png" alt="" usemap="#Map" class="rollover" style="margin: 10px;
width: 292px; padding-left:10px; height:141px; display:block; float:left;" rel="images/aboutus_1.png" border="0" /></td>
<map name="Map" id="Map">
<area shape="rect" id="newsletter" coords="64,37,228,106"/>
</map>
Now from above code, i have created a hotspot map on the image which has the class rollover, i am unable to fire the fancybox event when i click the hotspot, please guide what i am missing
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks
ASKER