I have managed to get almost everything working perfectly in terms of the 3 items mentioned in the title.
My widget displays thumbnails that come from cloudfront, if you click on them the larger image fetched is also from cloudfront. It all works great!
The problem is the NGG slideshow I have in my header which uses the same full sized images. This is using the JQuery slideshow.
That insists on loading images from my server as opposed to Cloudfront.
Cloudfront does not run off my S3, instead Total Cache has been told to deal with Cloudfront directly.
The images are on cloudfront as can be witnessed by the gallery widget in the sidebar.
Is there a reason that the URL used in the header slideshow is not being replaced with the Cloudfront one?
I'm assuming someone must've seen this before?
The site is at: http://www.empireexpeditions.com