Jump to content
Killersites Community
Sign in to follow this  
newseed

Jquery Slideshow For Mobile Devices

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

 

But no ideas whatsovever regarding the gallery.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

eddie01.PNG

 

eddie02.PNG

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×