Slide down effect on mobile

Question

I´m developing an App and my client wants something like this

http://www.youtube.com/watch?v=F0F-jjIcEPY

As far as I know, this is a WebView, but how did they do this effect?

I want to develop something similar, any clue?

I think that maybe it could be done with jQuery Mobile, but how can you slide down and in some point open the image gallery?

I found some libraries for help:

• SwipeBox => http://brutaldesign.github.io/swipebox/

• TouchPunch (Resizable) => http://touchpunch.furf.com/content.php?/resizable/default-functionality

And there is a demo here

http://jsfiddle.net/iruindegi/B3TH7/

It is almost OK, but I need that when I resize, at somepoint the swipebox triggers, like in the video.

$(function() {
    $( "#resizable" ).resizable();
});

I think that I should need to specify a maxHeight and fire SwipeBox when it reaches?

Any help or clue? thanks in advance

Answer 1

You can listen to resize event and trigger any function once height reaches a predefined value, as in the code and demo below

Demo

$('#resizable').on('resize', function (e) {
  var box_h = $(this).height();
  if (box_h > 200) { // ** define height here ** //
    e.preventDefault();
    $.swipebox([{
        href: 'http://swipebox.brutaldesign.com/assets/full/reine.jpg',
        title: 'My Caption'
    }, {
        href: 'http://swipebox.brutaldesign.com/assets/full/nuke.jpg',
        title: 'My Second Caption'
    }]);
  }
});