Question for Mobile Web Developers

Discussion in 'The Pub' started by GAD, Apr 8, 2015.

  1. GAD

    GAD Wubbalubbadubdub Silver Supporting Member

    Messages:
    14,308
    Joined:
    May 22, 2008
    Location:
    NJ
    Casting a wide net here on a guitar forum.

    I have a private photo gallery that I've written for the family to see our photos. I have 80,000+ photos online, and this page has been a great resource for all of us for over 10 years. In that time it's evolved repeatedly, and is currently all dynamic PHP.

    Seeing as how it is no longer 2004, I figured I'd add the ability for a nice mobile web-based experience after watching my father-in-law try to swipe one of my pages on his phone. That bugged me because, well, he should be able to swipe on his phone after all.

    I've spent two freaking days trying to come up with a solution for this problem, and sampled probably 10 different gallery plugins, multiple Jquery solutions, and a bunch of custom code. I hate them all. Apparently I'm not the only one as there are piles of people online looking for the same thing, which is a simple full-page image where you can swipe to the next image, and maybe swipe up to the index.

    Why is this so difficult? At this point I'm ready to go back to film and handing people actual photographs.

    Any recommendations for a solution would be most appreciated.
     
  2. CyberFerret

    CyberFerret Member

    Messages:
    9,993
    Joined:
    Feb 25, 2010
    Location:
    Darwin, Australia
    Large collections of scrollable data are always going to be a problem in a web browser, especially a mobile web browser with limited processor speed and memory. That has always been the bane of developing 'hybrid' apps on iOS and Android etc.

    To get the best performance, you have to go native code usually. The iOS 'table' native 'table' views (which is used in the mail app, photo app, message app etc.) is designed to be a 'just in time' type view, in that even if you have 10,000 data items in your table, only the current ones on screen (plus a couple above and below) are rendered, and the rest are removed from memory until needed.

    However, I have had great luck lately with a mobile hybrid framework called Ionic (http://ionicframework.com/). If you are comfortable with javascript, it is quite an easy framework to pick up. It is based on AngularJS.

    It has a view controller with a 'collection-repeat' attribute, meaning that even though it is a web based table, it exhibits the caching and 'just in time' capability of a native view. They are also working on a version which will actually render tables using the native device table viewer.

    All the usual gestures and swipes are also supported, so to an end user, it is essentially just another normal app, with the expected behaviours.

    If your back end is all already coded up in PHP, then you probably only need to add a small PHP script on your server to allow the Ionic app to grab the photos via an asynchronous http call, then you can render them on the device in a swipeable list using Ionic.
     
  3. bayAreaDude

    bayAreaDude Member

    Messages:
    3,227
    Joined:
    Aug 4, 2014
    Location:
    NorCal
    Sounds like iPhoto or whatever it's new replacement is.
     
  4. raph

    raph Member

    Messages:
    1,425
    Joined:
    May 14, 2009
    Location:
    California
    Is the target page opening an image.jpg or opening a php script that loads the image through an img tag?
     
  5. GAD

    GAD Wubbalubbadubdub Silver Supporting Member

    Messages:
    14,308
    Joined:
    May 22, 2008
    Location:
    NJ
    Gah. So complicated! I think I'm giving up on the desire to make it look like an app.

    The vastly simpler option is to load another page when swiping. My PHP scripts already prepare the links for previous/next image. Is there a simple way to capture a swipe and make the browser load a new URL?

    For example, I have this code to let users use the keyboard on the desktop. It works fabulously. If I could get the same simple functionality with swipes instead of keyboard input, I'd be a happy GAD.

     
  6. GAD

    GAD Wubbalubbadubdub Silver Supporting Member

    Messages:
    14,308
    Joined:
    May 22, 2008
    Location:
    NJ
    Currently each image has a dynamic "SourceImage" page that puts some navigation, Exif info, and comments around the image which is included in an IMG tag.

    I'd be happy to have a different page loaded based on discovery of a mobile browser, though, and have been experimenting with many JQuery galleries to that end. They all look terrible, though.
     
  7. GAD

    GAD Wubbalubbadubdub Silver Supporting Member

    Messages:
    14,308
    Joined:
    May 22, 2008
    Location:
    NJ
    BTW the site works like this:

    YearIndex.php which calls EventIndex.php which calls SourceImage.php

    The pages work around the directory structure which is:

    YYYY
    +--Event
    +------Image
    +------Image
    +------Image

    etc.
     
  8. raph

    raph Member

    Messages:
    1,425
    Joined:
    May 14, 2009
    Location:
    California
  9. AbstractLunatic

    AbstractLunatic Member

    Messages:
    4,597
    Joined:
    Apr 13, 2005
    Location:
    Denver
    There are heaps of responsive photo gallery templates/plugins. What didn't you like about Juicebox?
     
  10. bgmacaw

    bgmacaw Member

    Messages:
    8,115
    Joined:
    Nov 14, 2005
    Location:
    Atlanta, GA
    What JQuery plugins have you tried? I know of a few but I didn't want to suggest one that you've already tried. Here's a decent list of some of the better ones.

    I've got a custom one that I did for charts, not photos, but it's pretty easy to code, provided you know Javascript and JQuery.
     
  11. frankencat

    frankencat Guitarded Gold Supporting Member

    Messages:
    11,596
    Joined:
    Sep 1, 2004
    Location:
    Tampa Bay
    Xamarin is pretty cool too. Worth a look if you are already using .net.
     
  12. CyberFerret

    CyberFerret Member

    Messages:
    9,993
    Joined:
    Feb 25, 2010
    Location:
    Darwin, Australia
    If you had a specific 'mobile only' web page that was powered by jQuery Mobile, then you could use the swipe() event handler to process this.

    https://api.jquerymobile.com/swipe/

    You could then use a normal javascript window.location assignment to redirect to another page depending on a left or right swipe.

    Zepto.js is an even lighter mobile javascript library that jQuery Mobile which can do the same thing.

    If you have your photos in an HTML <li> list element with the ID "photos":

    Code:
    $('#photos li').swipeLeft(function(){
      window.location.href = "<?phpcriptURL . "?Year=" . $Year . "&Event=" . $PreviousDir; ?>";
    });
    
    $('#photos li').swipeRight(function(){
      window.location.href = "<?phpcriptURL . "?Year=" . $Year . "&Event=" . $NextDir; ?>";
    });
    
    
    
     
  13. GAD

    GAD Wubbalubbadubdub Silver Supporting Member

    Messages:
    14,308
    Joined:
    May 22, 2008
    Location:
    NJ
    Yes, I've written a page that can capture the swipe, but I can't seem to get it to load a new page on the swipe. From what I've read, it seems that I need to "ID" my pages, and I'm not quite sure why, not to mention the fact that the pages are dynamic so I'm not sure that will work.

    Funny - that's actually the one I have open in another window right now. It looks promising. I'll see how involved it is.

    Fair enough, but I don't have a list. One of the frustrations I've had is that most of those on that link are sliders and seem designed for something within, say, a Wordpress theme. That's not really what I want.

    FWIW, I found a developer complaining that IOS Safari refuses to report the height of the screen which causes no end of problems for exactly what I'm looking for, so this might be an uphill battle.

    Another issue is that though I can code, I'm not a programmer any more, so while my JavaScript code above works for me and I understand it, writing my own app is fairly outside of my skill-set. That led me to "can't I just swipe for prev/next page?"

    Linux-only here.

    Part of my problem is that I'd greatly prefer to not have all the images in a list like so many of these solutions seem to want. Sometimes I have 80 images in an event, and while I can easily code that dynamically, that's a lot of big images to load all at once - it slows the page considerably over some connections.

    A big part of my problem is wanting what I want, which is usually a big part of my problem. :)

    I'd also prefer to not have to go crazy redesigning stuff if I don't have to.

    Thanks guys - great stuff so far.
     
  14. GAD

    GAD Wubbalubbadubdub Silver Supporting Member

    Messages:
    14,308
    Joined:
    May 22, 2008
    Location:
    NJ
    Reading the Juicebox docs, it seems that it needs you to create galleries for it to work. That's a deal-breaker for me. I just want to use the existing images as they are.
     
  15. raph

    raph Member

    Messages:
    1,425
    Joined:
    May 14, 2009
    Location:
    California
    Not sure I follow. Does each image have its own url like SourceImage.php?id=image.jpg ?
     
  16. GAD

    GAD Wubbalubbadubdub Silver Supporting Member

    Messages:
    14,308
    Joined:
    May 22, 2008
    Location:
    NJ
    Exactly. It seems to me that the simplest solution would be to just let the user swipe that page and have it load a new one based on the dynamic previous/next page information already built.

    So, there's really two possibilities I've considered:

    1) Swiping to allow the previous/next page to load with no other changes.

    2) A new, more modern gallery type solution that's only loaded when a mobile browser is detected.

    Sorry, I know I kind of bounced back and forth between those options.
     
  17. raph

    raph Member

    Messages:
    1,425
    Joined:
    May 14, 2009
    Location:
    California
    OK, if you're using the stackoverflow script to detect swipes

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
    if ( xDiff > 0 ) {
    /* left swipe */
    document.location.href="<?php echo $ScriptURL . "?Year=" . $Year . "&Event=" . $PreviousDir;?>";
    } else {
    /* right swipe */
    document.location.href="<?php echo $ScriptURL . "?Year=" . $Year . "&Event=" . $NextDir; ?>";
    }
    } else {
    if ( yDiff > 0 ) {
    /* up swipe */
    document.location.href="<?php echo $YearURL . "?Year=" . $Year;?>";
    } else {
    /* down swipe */
    /*does nothing */
    }
    }
     
  18. GAD

    GAD Wubbalubbadubdub Silver Supporting Member

    Messages:
    14,308
    Joined:
    May 22, 2008
    Location:
    NJ
    To which script are you referring? There are a few "swipe" examples on StackOverflow.

    This one?: http://stackoverflow.com/questions/...-through-javascript-on-the-iphone-and-android
     
  19. GAD

    GAD Wubbalubbadubdub Silver Supporting Member

    Messages:
    14,308
    Joined:
    May 22, 2008
    Location:
    NJ
    Ooh! Progress! I get *something*, which is more than I've gotten before. I had not tried that particular script before.
     
  20. raph

    raph Member

    Messages:
    1,425
    Joined:
    May 14, 2009
    Location:
    California
    I haven't tried it either, but it looked right.
     

Share This Page