jQuery slideshow problems on home page.
Hi all
I have an example here to illustrate my problem.
[SOLVED/]
It’s a wordpress site but I’m sure the problem is with my javascript (and wordpress people are never any help)
It’s just one page that has a slideshow using the jQueury cycle plugin - http://jquery.malsup.com/cycle/
My problem is when the page first loads only part of the slideshow is visible. If you scroll left/right near the ‘Home’
button you can see the rest of the slideshow.
If you then click ‘Home’ the same page loads but the full slideshow is visible.
Why is the slideshow not loading correctly when the page loads.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow">
<title></title>
<link rel="profile" href="http://gmpg.org./xfn/11" />
<link rel="stylesheet" type="text/css" href="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/themes/cars/style.css" />
<link rel="pingback" href="http://www.ttmt.org.uk/forum/wordpress-forum/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="forum » Home Comments Feed" href="http://www.ttmt.org.uk/forum/wordpress-forum/?feed=rss2&page_id=5" />
<link rel='stylesheet' id='admin-bar-css' href='http://www.ttmt.org.uk/forum/wordpress-forum/wp-includes/css/admin-bar.css?ver=3.4' type='text/css' media='all' />
<link rel='stylesheet' id='NextGEN-css' href='http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/plugins/nextgen-gallery/css/nggallery.css?ver=1.0.0' type='text/css' media='screen' />
<link rel='stylesheet' id='shutter-css' href='http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css?ver=1.3.4' type='text/css' media='screen' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var shutterSettings = {"msgLoading":"L O A D I N G","msgClose":"Click to Close","imageCount":"1"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.js?ver=1.3.3'></script>
<script type='text/javascript' src='http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/plugins/nextgen-gallery/js/jquery.cycle.all.min.js?ver=2.9995'></script>
<script type='text/javascript' src='http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/plugins/nextgen-gallery/js/ngg.slideshow.min.js?ver=1.06'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.ttmt.org.uk/forum/wordpress-forum/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.ttmt.org.uk/forum/wordpress-forum/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 3.4" />
<link rel='canonical' href='http://www.ttmt.org.uk/forum/wordpress-forum/' />
<!-- <meta name="NextGEN" version="1.9.5" /> -->
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
html { margin-top: 28px !important; }
* html body { margin-top: 28px !important; }
</style>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
</head>
<body>
<div id="wrap">
<div id="header">
</div><!-- #header -->
<div id="leftCol">
<div id="logoDiv">
</div><!-- #logoDiv -->
<ul id="nav">
<li class="page_item page-item-5 current_page_item"><a href="http://www.ttmt.org.uk/forum/wordpress-forum/">Home</a></li>
</ul>
</div><!-- #leftCol -->
<div id="rightCol">
<div id="homeSlides">
<div id="slideshow">
<p><img class="ngg-singlepic ngg-none" src="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/gallery/trucks/17.jpg" alt="17" /></p>
<p><img class="ngg-singlepic ngg-none" src="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/gallery/trucks/18.jpg" alt="18" /></p>
<p><img class="ngg-singlepic ngg-none" src="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/gallery/trucks/19.jpg" alt="19" /></p>
</div><!-- #slideshow -->
</div><!-- #homeSldies -->
</div><!-- #rightCol -->
<script type="text/javascript">
//$(function($) {
jQuery(document).ready(function($){
//$('#slideshow').css('max-height','553px');
$('#slideshow').cycle({
fx: 'fade',
speed: 800,
timeout: 3000
});
});
</script>
</body>
</html>
<script type='text/javascript' src='http://www.ttmt.org.uk/forum/wordpress-forum/wp-includes/js/admin-bar.js?ver=3.4'></script>
<script type="text/javascript">
(function() {
var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\\\s+)(no-)?'+cs+'(\\\\s+|$)');
request = true;
b[c] = b[c].replace( rcs, '' );
b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
}());
</script>