Tuesday, June 15, 2010

jQTouch Photo Gallery

UPDATE: jqextensions and the jQTouch photo gallery have been discontinued.


I just uploaded a new Photo Gallery extension for jQTouch to the jqextensions project, along with a completely revamped version of the jQTouch inertia scrolling/sliding/fixed toolbar extension. It was quite an experience building the photo gallery extension, and the updates to the scrolling extension were pretty exciting for me.

New features in the scrolling extension include: an optional scrollbar and dynamically assigned dimensions for better support across more devices.

I will post a more complete account of each of these useful extensions in the coming weeks. In the mean time, try them out in this demo.

32 comments:

  1. Hey Sam, quick question - why your gallery doesn't support tap to image to save?
    I would suggest that this function is pretty important too.

    Thanks!

    ReplyDelete
  2. @the-romero,
    jQtouch disables -webkit-touch-callout by default. You should be able to re-enable this with a CSS rule:
    {{{

    #jqt jqt-photo .jqt-image{-webkit-touch-callout:inherit;}

    }}}

    ReplyDelete
  3. I would love to use your new gallery extension in an iPhone app I'm developing with phonegap, but as you note it does not run with JQTouch version 109 (the latest official beta) and when I try to use it with the version 148 you supply the same JQTouch code that works with JQT 109 to produce two independent pages and button-induced transitions between produces instead the two pages one after the other with dead buttons. Is there a workaround? (This is before I do anything other than load the required files.)

    ReplyDelete
  4. I found the problem: I was using the files from the 148 distribution from your site, and the CSS requires that all the HTML be contained in a div with id="jqt". I'm going to see if OTHER files for the photo gallery perhaps do not require this change.

    ReplyDelete
  5. Thanks a lot for your reply Sam, but
    -webkit-touch-callout:inherit;
    This only selects image (as selecting a text), but doesn't pull out "save image" option when in full-screen mode, although it works when browser buttons are visible on the bottom.
    Is there another way to do it?
    How do some applications save image automatically when tapping on "save" button? Is it possible on web based apps?
    Thanks!

    ReplyDelete
  6. @the-romero,
    The auto save definitely doesn't work in a web application, only in native apps. I am also having a hard time finding any web apps that support that in fullscreen mode. Could you provide an example of this?

    ReplyDelete
  7. You mean example of a full-screen web app?

    ReplyDelete
  8. Yes, could provide an example of a full screen web app that has the "Save Image" dialog that pops up, because I haven't been able to find any examples of this.

    ReplyDelete
  9. I haven't seen it too :) That's what I'm trying out to figure out as well :)

    ReplyDelete
  10. Hi Sam

    Great extension, works well on my iPhone and iPad ...great job!

    Heres one issue I found could make this a lot quicker for adding galleries Pipho uses a folder structure could this be done with this extension rather than adding all the images to html file? or am I missing something :)

    Simply add the path to the folder(s) to the html file and away we go :)

    Great job :)

    ReplyDelete
  11. @Fred,
    Pipho is server-side, jQTouch Photo Gallery is client-side. No way to detect files in a folder from client-side. Wouldn't be hard to write a PHP script that did that for you though. Thanks.

    ReplyDelete
  12. Hi Sam

    Thanks for the quick reply, Im a designer im only scratching the surface on coding hahahaa

    IS there a script out there I could use to do this , maybe part of Pihpo's filemanager.php ?

    Sorry for my ignorance on coding I just can't wrap my head around it :)

    ReplyDelete
  13. Hi Sam, the photo gallery is great!
    The scaling of images was something i was looking for some time ago, and the way it is built in right now is a great enhancement.

    In this release the offline extension doesn't seem to work anymore. Have you got any idea what causes the problem?

    Thanks,
    Patrick

    ReplyDelete
  14. @navigatie (Patrick),
    I don't understand. Are you telling me that there is a conflict between the Photo Gallery extension and the offline extension? Or are you just saying that the offline extension doesn't work anymore? If the later, I am sorry, but I do not maintain that extension.

    ReplyDelete
  15. Thanks so much for doing this - I've been looking for a "carousel" extension for jQTouch for a while now! Question - In the examples, all the links to the gallery images are contained in the HTML file...Is there some way to move them out to a separate file? (Sorry if I'm asking a really basic question. I'm not a programmer but am trying to learn by making a flashcard app :). My app will have *a lot* of cards / images! Thanks so much for your help :)

    ReplyDelete
  16. @may,
    Yes, you should have no problem initializing a gallery from an external script, just as long as you ensure that the DOM is ready for manipulation.

    ReplyDelete
  17. Hi Sam!
    Awesome photo extension. I am trying to add a button to the bottom toolbar which, when tapped, flips the page to show extended information about the image you are looking at.

    I've gotten as far as extending the gallery to include the new button (based on the "next" button code) so now I have a function which pulls image specific information - so far so good - but I am having a hard time figuring out how to do a transition effect to a new page to show this info. I have tried breaking out of the photo extension by calling a function in my host page where I do a

    jQT.goTo('#imgdetails', 'slide');

    And this (maybe obviously) doesn't do a thing.

    Any tips or hints on how I could achieve this? Again, what I've done is very simple: I just duplicated the next button code throughout the extension and now I am stuck on how to proceed...

    Thanks! :)

    ReplyDelete
  18. @Arnito,
    I need more information, file an Issue at http://code.google.com/p/jqextensions/issues/list, so that I can track the conversation. Include details on how you are "breaking out" of the photo extension, and provide examples where possible, please.

    ReplyDelete
  19. Hi Sam,

    Well I got it solved. It ended up being quite hacky in the end. The problem was rooted in the following:

    I needed to initialize the photo gallery on document ready. The only way I could figure how to do that was to call the jQT.generateGallery on page load and then add class .current to galleryTemplate

    However, this resulted in jqtouch not adding #photo to current page, nor fixup the page hash.

    So when I called jQT.goTo('#imgdetails', 'slide'); jQtouch thought it was navigating to the same page (as jqtouch adds .current to the first page element etc. etc.) and it errored out

    A bit of a chicken or the egg problem. Maybe there is a cleverer way of initializing the photo gallery on page load, but I ended up doing a hacky callback in jQT init (around line 182) which initializes jQT.generateGallery if a variable is set.

    This enables jQtouch to correctly figure out which "page" is "current" and hence navigation, effects etc. work again.

    It seemed like a lot of hacking just to add a button which can flip the page to some extended info regarding the image you are looking at, but I got it working. If you want to take a look at my haxxed source you are welcome to mail me at zabersoft (at) gmail (dot com)

    Thanks for the feedback!

    ReplyDelete
  20. Hi Sam,

    I'm really loving this extension, but I've gotten it to do some weird things. First the back button didn't work, but I realised that was because your jqtouch.js was newer than the beta2 I downloaded yesterday. But now that it works, something strange is happening:

    I've made a thumbnail gallery (by just manually placing all the images on a page), and each thumbnail uses the goToSlide function to open the full image.
    However, when I tap back to exit the viewer, then tap back again to exit the thumbnail gallery, then OPEN the thumbnail gallery again, it automatically opens the viewer to a random image - always the same one. It keeps doing that even if I reload the page. And sometimes after that the back button stops working.

    Try it at dinerdate.net/iphone. It happens on the first page, "2D art".

    ReplyDelete
  21. @TimH,

    Can you file an issue at:

    http://code.google.com/p/jqextensions/issues/list

    Thanks!

    ReplyDelete
  22. Hi, Sam!

    This extension is quite an impressive piece of work. Good job!

    I wonder how hard is it to make this extension to work with other HTML elements other than images? I'm trying to get this gallery effect on multiple pages (i.e. <div>s), so the users can swipe side ways to get to another page and swipe up and down to read the current page.

    Some pointers would be appreciated. Thanks!

    ReplyDelete
  23. @id,
    Well, if I were to give advice on how to create something like that I would suggest you start from scratch.

    The extensions for jQTouch that I have written are all optimized (I use that word loosely) for accomplishing a specific task.

    You would have to build a single event listener that responded to the touch events based on the current position of the elements, and the direction of the touch movement, like the Photo Gallery does, but without all the extra stuff that the Photo Gallery does.

    ReplyDelete
  24. Hi Sam! First thanks for your job, it's really good!!! I'm trying to make a photogallery in accord of the user choose. What i would like to have is that, in according of what the user click, a photogallery is dinamically create (reading the image with ajax by a mysql db). i wrote this code:

    $(".attivaPhoto").click(function(event){
    $("#photo2").remove();
    var id = $(this).attr('id');
    if(id == 1){
    jQT.generateGallery("photo2",[
    {src:"img-citta/10/1_big.jpg"},
    {src:"img-citta/11/1_big.jpg"},
    {src:"img-citta/12/1_big.jpg"},
    {src:"img-citta/12/2_big.jpg"},
    {src:"img-citta/14/1_big.jpg"}
    ]);
    }else if(id == 2){
    jQT.generateGallery("photo2",[
    {src:"img-musei/10/1_big.jpg"},
    {src:"img-musei/10/2_big.jpg"},
    {src:"img-musei/11/1_big.jpg"},
    {src:"img-musei/11/2_big.jpg"},
    {src:"img-musei/12/1_big.jpg"},
    {src:"img-musei/12/2_big.jpg"}
    ]);
    }
    jQT.goTo('#photo2');
    event.preventDefault();
    });

    that is call with 2 link with href #photo2 and class attivaPhoto

    it's working, but when with a bug: i open the first gallery, then come back and open the second. when i click back again, it open a black page with nothing inside! there is another (and more correct) method to do it? thanks!

    ReplyDelete
  25. @directory,

    Check out issue 14
    http://code.google.com/p/jqextensions/issues/detail?id=14

    or maybe issue 19 http://code.google.com/p/jqextensions/issues/detail?id=19&can=1

    ReplyDelete
  26. Hi Sam,

    First off, thanks for such a great extension. I'm using it in a project with multiple galleries and followed your advice to use ontouchstart to generate and load the galleries. However, it makes it near impossible to scroll the list of galleries. I tried replacing it with onclick but that was really slow. So I started creating all the galleries on the page load when I parse the XML and so I can pass the href directly to the link:


    $(xml).find("collezione").each(function() {
    var coll = $(this).attr('titolo');
    loadGallery(coll, c); //function which creates the gallery and calls jQT.generateGallery()
    var listItem = $("[li][a href='#photo" + c + "' class='slide'"]"+coll+"[/a][/li]");
    $("#menu_ul").append(listItem);
    c++;
    });


    Am in right in thinking that creating the gallery doesn't actually load the images so this shouldn't really slow my app down? It does seem a bit slower than the other approach but I can't really tell whether it's a connection problem or what. Sorry if it seems like a stupid question, I just want to be sure this is a valid approach and that I'm not going to run into problems afterwards.

    Thanks a million!

    ReplyDelete
  27. @Caro,

    Creating a new gallery loads between 1 and 5 of the images from the gallery by default, that is necessary to prevent getting the spinning wheel on initial navigation to the gallery. This design will most definitely slow down your load time.

    ReplyDelete
  28. Thanks a million Sam. I've bound it to an ontap event and that seems to work fine.

    I have another question for you (sorry!) I need to add a link to the toolbar to navigate to another page (each gallery has like a subgallery) but I see that jqt.photo overrides the default goTo event in order to navigate to another slide. How would I go about adding a link or is it even possible? The only way I can think of doing it is to tie a function to a css class (like the way the back button works) but that seems like a really long way around. I'd be very grateful for any advice.

    Thanks a million,
    Caro.

    ReplyDelete
  29. @Caro,

    jqt.photo doesn't override the default .goTo, it adds .goToSlide which allows you to navigate to a specific slide in a specific gallery. Just use a tap handler to call .goToSlide.

    ReplyDelete
  30. Hello Sam,

    Thank you for this great extension, which works great on Safari.

    However, I have an issue using this extension with phonegap on both simulator & real Iphone : some basic animations are working randomly (slide etc), and when going back from a gallery image and gallery, it opens a random image of the galery itself without any action.

    What should I do ?

    Thanks,

    Nicolas

    ReplyDelete
  31. do you know that your lib does not work under jquery 1.7 ? Just replace in your demos version of jquery and gallery stop work ...

    ReplyDelete
    Replies
    1. Yes, I know that it does not work with 1.7, there are a lot of instances that cause it to stop working. I discontinued support for this script about a year or 2 ago. Feel free to modify the script as you feel necessary, as I cannot provide support at this time.

      Delete