Hi, here is the site I am having trouble keeping consistent through all the browsers. www.designyp.com
When you click on thumbnails, the large image above should transition through fading effect in to another image and it does it perfectly in Chrome. However, in some browsers when you click on the thumbnail for the first time it will fadeOut and then Fade in the same image and then abruptly change it to the new image. It will do it only once for each thumbnail, and then it will do its fading effect as it supposed to. What is going on?
It works fine in Chrome, but not in IE, Opera, Safari.
This is JQuery script for the fade effect:
$(document).ready(function(){
$(“h2”).append(‘<em></em>’)
$(“.sc_menu a”).click(function(){
var largePath = $(this).attr("href");
var popupimgPath = "";
var largeAlt = $(this).attr("id");
$("#largeImgClicker").removeAttr("href")
if(typeof $(this).attr("popupimg") != 'undefined'){
popupimgPath = $(this).attr("popupimg");
$("#largeImgClicker").attr({ href: popupimgPath });
}
$('#fadeBlock').fadeOut('slow', function(){
$("#largeImg").attr({ src: largePath, alt: largeAlt, popupimg: popupimgPath });
$("h2").html(" " + largeAlt + " ");
$('#fadeBlock').fadeIn('fast');
});
return false;
});
and this is the HTML:
<div id=“fadeBlock”>
<a class=“fancybox” rel=“group” href=“img/thisWeekInWashLong.jpg” id=“largeImgClicker”><img src=“img/thisWeekInWash.jpg” alt=“Large image” id=“largeImg” popupimg=“img/thisWeekInWashLong.jpg” /></a>
</div>
<h2>This Week In Washington</h2>
<div class=“sc_menu”>
<ul class=“webT” id=“webThumbs” input type=“image” value=“Go”>
<li><a href=“img/thisWeekInWash.jpg” popupimg=“img/thisWeekInWashLong.jpg” id=“This Week In Washington” onMouseOut=“MM_swapImgRestore()” onMouseOver=“MM_swapImage(‘thisWeekInWash’,‘’,‘img/keyContactThumbON.jpg’,1)”><img src=“img/keyContactThumbBlur.jpg” alt=“This Week In Wash Newsletter” name=“thisWeekInWash” width=“126” height=“82” border=“0”></a></li>
<li><a href=“img/caissons.jpg” popupimg=“img/caissonsLong.jpg” id=“Caisson Case Study Discussion Forum” onMouseOut=“MM_swapImgRestore()” onMouseOver=“MM_swapImage(‘caissons’,‘’,‘img/caissonsThumbON.jpg’,1)”><img src=“img/caissonsThumbBlur.jpg” name=“caissons” width=“126” height=“82” border=“0”></a></li>
<li><a href=“img/asceSite.jpg” popupimg=“img/asceSiteLong.jpg” id=“ASCE Home Page” onMouseOut=“MM_swapImgRestore()” onMouseOver=“MM_swapImage(‘asceHomePage’,‘’,‘img/asceWebThumbON.jpg’,1)”><img src=“img/asceWebThumbBlur.jpg” alt=“ASCE Home Page” name=“asceHomePage” width=“126” height=“82”/></a></li>
<li><a href=“img/sustainability.jpg” id=“ASCE Committee on Sustainability Site” onMouseOut=“MM_swapImgRestore()” onMouseOver=“MM_swapImage(‘sustainability’,‘’,‘img/sustainabilityThumbON.jpg’,1)”><img src=“img/sustainabilityThumbBlur.jpg” name=“sustainability” alt=“ASCE Committee on Sustainability” width=“126” height=“82”/></a></li>
</ul>
</div>