ttmt — 2012-08-02T06:52:21-04:00 — #1
I have a simple example to illustrate my problem here.
[SEE UPDATED LINK BELOW/]
It's just one page, home.php.
The home page has a list of images that are made into a slideshow.
From Settings > Reading > Front page display, I have selected the home page as the Front page.
The home page loads but without the slideshow.
If I click 'Home' to reload the home page the slideshow appears.
Why does the slideshow not appear when the page opens.
pullo — 2012-08-03T07:52:38-04:00 — #2
When I clicked on the link you'd provided, the slideshow started straight away.
I'm using the latest version of Chrome on Windows.
In fact, I just tried it on the latest versions of FireFox, Safari, IE & Opera. It works for me in all of them.
ttmt — 2012-08-03T07:56:48-04:00 — #3
Yes, I've been working on it and got that bit working, I have another problem now - I'll post again
ttmt — 2012-08-03T08:12:56-04:00 — #4
The slideshow needs to have a line of text below it.
Again when the page first loads it's there put it's underneath the slideshow and you can quickly see it before the image loads.
When the page is reloaded the text appears were it should below the image.
pullo — 2012-08-04T14:17:10-04:00 — #5
The problem with your page is being caused by the jQuery.cycle.all plugin.
Apparently it expects every image in the slideshow to have a height and width attribute.
If these are missing, then it attempts to apply these attributes programmatically, and this is what was causing the text to get repositioned.
So, if you include these attributes on your images, everything works as expected.
<img class="ngg-singlepic ngg-none" src="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/gallery/trucks/17.jpg" alt="17" width="498" height="510"/>
<img class="ngg-singlepic ngg-none" src="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/gallery/trucks/18.jpg" alt="18" width="708" height="510"/>
<img class="ngg-singlepic ngg-none" src="http://www.ttmt.org.uk/forum/wordpress-forum/wp-content/gallery/trucks/19.jpg" alt="19" width="765" height="510" />
</div><!-- #slideshow -->
Also, a couple of pointers.
- You can lose the <p> tags around the images.
- In the example page you provide, <div id="wrap"> isn't closed.
- You appear to include two versions of the jQuery.cycle.all plugin. In line 25#4 you have 'jquery.cycle.all.min.js?ver=2.9995' and in line 33 you have 'jquery.cycle.all.2.74.js'