Jquery Slideshow For Mobile Devices

[newseed]

I am working on a site that requested a mobile version.

 

elec tri cstep.com/eshop/m/index.asp (remove 2 spaces)

 

The goal here is to have the main image fit mobile unit's screen resolution from 320px up to 640px width.

 

As you can see I was able to achieve this with a static image by defining the image with width="100%".

 

You can test that it works by either resizing your desktop browser to be 320px or view with your mobile unit in two different resolution width.

 

Now my issue.

 

I need a jquery gallery/slideshow (with content and next/prev buttons) script that will allow this kind of auto resizing. I've found several scripts but all of them use positioning thus collapses the div causing the image to fit no larger than the containing div. Fixed width just doesn't work.

 

If no such script exist then what about a mobile sniffer that detects the resolution size? I could then apply 'if' statement to tell it which css to use that fits the resolution. This is what I have now but I have no way if it works for mobile units:

 

$(document).ready(function() {

 

if ((screen.width>=640) && (screen.height>=600)) {

$("link[rel=stylesheet]:not(:first)").attr({href : "detect640.css"});

}

else {

$("link[rel=stylesheet]:not(:first)").attr({href : "detect320.css"});

}

});

 

Keep in mind that I am working with ASP code (not php).

 

Thanks.

[Andrea]

Tested with my iphone and it looks fine horizontally and vertically.

 

But no ideas whatsovever regarding the gallery.

[newseed]

Thanks. Looks like I am going to have to use some kind of resolution detection for mobile devices but I haven't quite figured it out yet.

[virtual]

I can see the slider fine on horizontal, but only the bottom half of it with the text and no step on vertical. I have an HTC Droid.

[newseed]

I finally got this to work.

 

elec tri cstep.com/eshop/m/index.asp (remove 2 spaces)

 

I would like to get some feedback. If possible, a snapshot of that page along with what mobile device you are using.

 

For your info, I used this slideshow which includes flexible image resize dependent on what screen resolution is used and touch screen capability.

[virtual]

The site does resize vertically and horizontally on my Droid phone, but the slideshow does not slide with the arrows. On iPad2 it resizes fine, but the slides are not very smooth, needs a couple of taps to slide.

 

Does your client really need a slideshow on mobile, I believe it is best to just deliver the necessary information on a mobile site and leave the bells and whistles to the main site. Just my 2 cents.

[Andrea]

Looked good on iPhone 3, and noticed no sliding issues. I did not see any arrows, but swiping the screen worked fine. I guess, so, had I not known about the slideshow issue, I'd not have known to swipe.

 

 

[newseed]

Thanks all. Like Andrea, the sliding works fine for almost everyone. One suggest that those that had sliding problems may be due to oiley residue on the screen or finger tip(s). Add a touch of baby powder on the tip of your fingers.

[ibautista]

you can use media queries.

 

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

 

 

This is the best practice way to make sure your website is a responsive design and scales accordingly based on the particular resolution for each device, phone, tablet, laptop, desktop.