Ultimate Fade-in slideshow Error

**coreya** · 11-26-2012, 04:31 PM

I have been using the Ultimate Fade-in slideshow for a while on my homepage and every once in while an error message pop-up box will appear (DIV with ID "fadeshow1" not found on page.") and then the slideshow will not appear.

This happens maybe about 5% of the time going to my website.

Does anyone know how to fix it?

website: http://www.toolsforchrist.com

Thanks
Corey

**Beverleyh** · 11-26-2012, 05:29 PM

I think the main issues are that some of your resources are rather large, and you're also linking to 3 different versions of jQuery - versions 1.4.2, 1.7.1 and 1.8.0 - you only need to link to one.

When I ran your page through the GTMetrix performance tool, it reports a page size of 1.66MB which is really big - I think you should be able to get your page under 600kb after you've optimised stuff and that will help with how all the scripts load too. Here are your report details: http://gtmetrix.com/reports/toolsforchrist.com/togU5v7b

The 1.8.0 jQuery script alone is a massive 254kb, (with all of them togther equalling about 400kb) so be sure to use the optimised/minified version to reduce page size.

An image that sticks out like a sore thumb on file size is the one called "Christian-Shirts-Homepage5.png" - you should be able to reduce that from 141kb to about 50kb with DD's image optimiser: http://tools.dynamicdrive.com/imageoptimizer/

Hope this info helps.

**coreya** · 11-26-2012, 06:07 PM

Thanks for the response. I have a few questions:

So the error is happening because my page too large?
How do I stop linking to all 3 versions of jQuery? Can I just delete the 2 older versions from my folders?
What is an optimised version of jQuery and will it still perform the same?

Thanks again
Corey

**Beverleyh** · 11-26-2012, 06:18 PM

1 - I *think* the error is largely happening due to a combination of the page being too large overall AND there being links to 3 different jQuery libraries. Im not saying that's 100% of what's causing the error, but its a good start.

2 - You need to remove the links in the <head> section of your web page - take out both references to the older 2 jQuery libraries.

3 - An optimised jQuery is just the jQuery library file that has all the comments and extra whitespace stripped out, making it a lot smaller. It still contains all the inf,o and functions the same way, but it has all the bumf taken out. You can download the latest minified/optimised version here: http://jquery.com/download/ (1.8.3)

**Beverleyh** · 11-26-2012, 06:25 PM

ps - I forgot to say that instead of downloading and hosting jQuery yourself, you can actually link to the latest version of jQuery that's stored in Google hosted libraries - just use this link in the <head> section of your web page;

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

The benefits of this are that it will be downloaded quicker, due to being hosted on a different domain (something called 'parallel downloading'), and also, there's a good chance that your visitors already have the file stored in their cache from having visited other websites that are using it already, so this again will speed up page load times for your own site.

**coreya** · 11-26-2012, 08:03 PM

Thanks again

I was able to reduce the size of that image but only to 94KB. I tried using that optimizer tool but it removes a lot of colors and image looks really bad.
The management system I use (Zen-cart) loads Jquery thru my folders so I removed 2 and added the new version you are talking about. When I remove the other old version, the fadeshow does not appear. It must be calling the 142 version of jQuery but I cannot find it anywhere. So I had to keep it in there. Also, Zen-cart is saying I should not link to the Google libraries because it could mess up some of the modules I use.

Thanks for all your help.

**Beverleyh** · 11-26-2012, 08:19 PM

The order of the scripts is causing the problem.

Fadeshow doesnt appear in the way you describe because it should follow jQuery - yours does, but the 1.4.2 version, and then the later jQuery follows after fadeshow (fadeshow is sandwiched between both jQuery libraries).

If you put the link to the latest jQuery in place of the v 1.4.2 script, the fadeshow should work fine.

So to clarify, you should have the latest jQuery library only, and it should be before the fadeshow script. Does that make sense?

**coreya** · 11-26-2012, 08:30 PM

Yes, that makes sense. Thanks. Zen-cart loads them alphabetically so I just changed the name of the jQuery file so it would load before the fadeshow. Now it works with just 1 version of jQuery.

Thanks for the help