Advanced Search

Results 1 to 5 of 5

Thread: Slimbox to work with mobiles

  1. #1
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Slimbox to work with mobiles

    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 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
    Thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    // 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):

    Code:
    // 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/dynamici...box2/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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,883
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Hi guys,

    http://www.dynamicdrive.com/dynamici...box2/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
    Last edited by Beverleyh; 03-23-2013 at 05:12 AM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,694
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thanks, guys.

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

Similar Threads

  1. Slimbox fix for Chrome and IE
    By a2482 in forum Looking for such a script or service
    Replies: 0
    Last Post: 03-19-2012, 07:25 PM
  2. Replies: 1
    Last Post: 06-21-2011, 01:46 PM
  3. How to adapt websites for mobiles?
    By robertsaunders in forum Looking for such a script or service
    Replies: 0
    Last Post: 07-24-2009, 06:09 PM
  4. A .mobi webSite for pdas & mobiles, is appropriate for a rent-a-car company: direct b
    By leonidassavvides in forum Computer hardware and software
    Replies: 0
    Last Post: 10-17-2008, 10:02 PM
  5. Slimbox Help
    By luciddd in forum JavaScript
    Replies: 3
    Last Post: 07-21-2008, 05:27 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •