I have an image carousel on a page on my site (using slidesjs and jQuery). It works fine on all desktop browsers, and even on the iPhone if the phone is on wireless. When the iPhone is connecting via 3G or GPRS, the image area of the carousel doesn’t load and there’s just blank white space.
However, I believe that the size of the images is stopping things from loading.
So what I’d like to do is detect whether or not the user is using mobile Safari, and if so, just show a single image in this space.
To do that means changing the HTML that is output for the carousel and just setting it to a single image source.
Is it possible to do this with javascript somehow ?
It is quite easy to do. Full explanation is here: http://www.quirksmode.org/js/detect.html.
Just look for “iPhone” in
navigator.userAgentstring.