I am trying to figure out what is going on with my jQuery Cycle2 slideshow ... the issue seems to lie within Windows 7 and FireFox combination, I haven't been able to recreate the issue in any other scenario.
The images all load fine, but even after the images are loaded, the transition between images, it loads a portion of the image and then one second later loads the rest. It's a little difficult to explain, so I've uploaded a video to help: https://www.youtube.com/watch?v=euttwaR4iKk
Here's the first bit of my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Holland Engineering</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<link href="css/style.css" media="screen" rel="stylesheet" type='text/css' />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/cycle.js"></script>
<script type="text/javascript" src="js/caption2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 360,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'fadein',
closeEffect : 'fadein'
});
});
</script>
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/logo.png" alt="Holland Engineering" /></div>
<div id="logovert"><img src="images/logovert.png" alt="" /></div>
<div id="nav">
<ul id="menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">Who We Are</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="casestudies.html">Case Studies</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<div class="clearall"></div>
<div id="banner" class="cycle-slideshow" data-cycle-speed=1400 data-cycle-auto-height=1200:500 data-cycle-caption-plugin=caption2>
<div class="cycle-overlay"></div>
<img src="images/home/slide1.jpg" data-cycle-desc=" Lago Del Pino in Tyler, TX" alt="" />
<img src="images/home/slide2.jpg" data-cycle-desc=" Wood County Electric Cooperative in Quitman, TX" alt="" />
<img src="images/home/slide3.jpg" data-cycle-desc=" Racquet & Jog in Tyler, TX" alt="" />
<img src="images/home/slide4.jpg" data-cycle-desc=" Centene in Tyler, TX" alt="" />
<img src="images/home/slide5.jpg" data-cycle-desc=" Lindale ISD Performing Arts Center in Tyler, TX, Images courtesy of Alan Roberts, AIA" alt="" />
</div>
And the only other pertinent code is these couple blocks of CSS:
#banner {
position: relative;
width: 1200px;
height: 500px;
margin-bottom: 9px;
top: -4px;
}
#banner img {
width: 1200px;
height: 500px;
}
The whole site can be previewed at http://holland.hansonimageworks.com. If anyone has any suggestions on how to fix this issue, please let me know. Thanks!
