Slimbox to work with mobiles

[Mejse78]

I checked my webpage on the mobile yesterday and saw, that the slimbox does no work there...

How to fix this?
I'm not aware how to make sure, that your webpage acts right on the mobile also... this is just getting more and more difficult! ;)

Can you help me, so that this (http://code.google.com/p/slimbox/downloads/list) will work on a phone also?
This one I wont be able to figure out myself...

And any other great tips of how to make your website work on phones will be apreciated.

This is the website: Stavtrupscenen (http://www.stavtrupscenen.dk)
Thanks.

[jscheuer1]

The version of Slimbox used on that page is specifically designed not to work on mobiles. It detects them and so does not initialize its links. Instead, clicking on the trigger will show the image. Not much good for the setup there where multiple images are linked to a single trigger. But the script may or may not work well or at least acceptably on mobiles, to find out, modify it here:


// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
}

Using a text only editor like NotePad, in slimbox2.js comment out the if line and the closing bracket (red, two places):


// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
//if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
});
});
//}

Save and use that version. The page will need to be refreshed to see changes and the browser's cache might need to be cleared as well.

If that doesn't work out, it might not - the author(s) of the script didn't think it would work with mobiles, otherwise they wouldn't have that there in the first place, you will need a different script.

Someone I was working with in here a little while back was using an older version of Lightbox which Dynamic Drive still has on file:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

She said it worked with mobiles. It requires a different script library though (Prototype/Scriptaculous), not jQuery, so will be tricky integrating with your other jQuery script. But that can be done. First check to see if it works with your mobile device(s). There is also the most recent version of Lightbox, which does use jQuery:

http://lokeshdhakar.com/projects/lightbox2/

so you should try it out as well, just to see.

Finally (if none of that works out) you can Google:

lightbox mobile

There will be solutions. I'm not sure if any of them are free though.

[Beverleyh]

Hi guys,

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm does work on mobile but the background overlay (the semi-transparent veil) doesn't extend the full width of the screen - not for me on iPhone 4S anyway - you might be able to fix that in the CSS but I haven't personally looked. Functionality-wise, it does actually "work" though.

http://lokeshdhakar.com/projects/lightbox2/ "looks" slightly better (the background overlay covers the screen entirely) BUT once a pic is open, the damn thing won't close again - not by clicking the cross in the bottom corner, although it does eventually if you click out of the pic and into the surrounding area. That doesn't seem very intuative to me. There's also an annoying judder once the enlarged pic has loaded - while its loading, the enlarged placeholder sits right in the centre of the screen but as soon as the big pic appears inside, it starts to judder and wriggle up the screen until half of it has disappeared from view. You can pull the screen down afterwards to view the big pic but that's very frustrating, especially when trying to look at a few pictures on the same page.

Can I suggest Fancybox instead?: http://fancyapps.com/fancybox/
That appears to work on a mobile exactly how it does on desktop.

Hope that helps

[jscheuer1]

Fancybox (which I happen to like BTW) was one of those I was referring to that one can find with Google. It's not free though unless your site is non-commercial. Amateur theater is a gray area there. Non-Profit and Volunteer don't necessarily mean non-commercial.

[Mejse78]

Thanks, guys.

I think I'll try that fancybox :D
Thanks a lot.