Link to home
Start Free TrialLog in
Avatar of Coast Line
Coast LineFlag for Canada

asked on

jquery and issue with creating a fancybox

I am using the following Code:

<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>

Open in new window


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
Avatar of Amar Bardoliwala
Amar Bardoliwala
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Coast Line

ASKER

will get abck here once i change the code, sorry being so late
Thanks