Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 2

Updates

1)  Flickering issue in iPhone/iPod solved.
After the swipey demo was done I was observing a strange flickering issue of the images. If you see the demo link in an iPhone or iPod’s mobile safari browser you would notice it. Test case – swipe the images to the left and you would notice a black flicker on the right side of the browser for a brief moment. This is happening when you swipe all the image for the first time. Second time on wards it is not being seen. Finally I could solve the issue and made a small post on it with the new fixed demo. You can find it here.

2) Images linked to URL - Now you can click or tap on the images to go to a URL. I have made a new post which describes the changes made. This was requested by one of the reader. I felt the importance of having the ability to link the images to URL so came up with an extension of this post. You can fine the post here. There is a demo and also a download link.

3) Common code and example for mobiles and computer browsers - I have developed a common universal code for mobile browsers and computer browsers. Note that when I am saying browsers I mean web-kit browsers – Chrome & Safari in computers, and then the default web browsers in iOS and Android mobiles. The major changes are in the javascript code, where I have automated the user event handling process. What this means is that for mobile devices touch based events are registered and listened to and then for computer browsers mouse based events are registered and handled by the script automatically. This way there is no need to hard code touch events for mobiles and mouse events for computers. The same code works everywhere. Find the post here. There is a demo and also a download link.

4) Circular swipe gesture gallery - I have a new tutorial where I have talked about a circular swipeable gallery. So the images keep on looping. The tutorial also includes a new demo. Read it here.

5) Auto scrolling gesture gallery - Sometimes users may want a auto scrolling gallery along with the normal swipe gesture feature. I have a new post with a demo. Read it here.

6) Vertical swipe gesture - for a vertical swipe gesture gallery check out this post. It has a new demo and explanation on how to swipe the images in y-direction i.e up or down.

Now, back to the actual post - 

Gesture Interaction – The JavaScript code
By looking at the java scriptcode you might have a question in your mind that this time I have used a different way of writing my javascript code. What I have done is that I have created a self calling function and I have defined an object (swipey) inside the function and finally exposed the object to the window object (window.swipeyObj = swipey) so that I can call the properties and methods of the swipey object anywhere after including the javascript file to our library. Ofcourse there are several other ways to execute the same, but this way it maintains the scope of the properties and methods of the object.

Let’s go straight to the swipey object which follows a JSON pattern. Inside the swipey object we have defined a series of properties and the methods. Think of it as a Class, but there are slight differences between a JSON Object and a Class. We will not go into that at the moment. The basic structure of swipey object is shown below,

var swipey = {
                property1:value1,
               property2:value2,
               ……………
                method1:function(){},
                method2:function(){},
                ……………
};

To access a property we write swipey.property1 and to call a method swipey.method1().Ok, that’s quite a brief description of a JSON object.Also, at most places I have provided comments for understanding. Now, the initSwipey() method defines some basic operations which is simple enough to understand. window.scrollTo(0, 1); is for hiding the address bar of the browser to give the app a native look. I have already talked about it in details in my earlier post,  here. One thing to be noticed is the line below,

swipey.slideContainer.style.width = swipey.slides.length * swipey.preferredWidth + "px";

If you remember we should have our slides (<li>) horizontally placed and for that we have set float:left in CSS.  But that is not enough for them to be placed horizontally inside the container (<ul>) element. We also need to provide enough space to the container so that all the slides are arranged horizontally and for that we have to set the width of the container to

width_of_container = number_of_slides * width_of_one_slide;

We could have hardcoded the value of width in CSS, but to keep things dynamic I have done it in script block. Now, it doesnot matter how many slides you add, you do not have to calculate the width value manually and change it in CSS. The script will do it for you. Finally, the last line of initSwipey() makes a call to initEvents().

Inside initEvents() function all the event listeners are registered. This is a touch based app so we have touch events. Note that I have added the event listeners to the wrapper. You can add it to the container <ul> element also. I felt it better to add to the wrapper.

Next up, for each touch based event I have defined listener functions which will handle the actions when the corresponding event is fired.

startHandler function()
This function is called when touch start event is fired. Inside it we mainly store the starting X co-ordinate of the touch point and save it in swipey.startX. Also we set our timer on.

moveHandler function()
This function is called when the figer moves over the device screen. It is called repeatedly each time the finger is moved. Here we calculate the net distance that the container should move relative to the start point

swipey.distanceX = event.touches[0].pageX - swipey.startX;

and then we translate the container <ul> element by that much distance. Now which direction – left or right depends on the value of distanceX, if it is negative it moves to the left and if positive moves to the right.

swipey.slideContainer.style.webkitTransform = "translate3d(" + (swipey.distanceX + swipey.currentDistance) + "px, 0,0)";

Also we have a value of currentDistance added to the distanceX. This is because when we translate the <ul> element the co-ordinate system moves by that distance. So next time whenever it is moved again the earlier position  should be taken into consideration.

endHandler function()
And then we have our endHandler() function which is called when the finger leaves the screen. Here the final movement is made based on the direction. We check the following conditions here,

1)      The direction of movement – left or right

if (swipey.distanceX > 0) {
  swipey.direction = "right";
}
if (swipey.distanceX < 0) {
  swipey.direction = "left";
}

2)      If it is the beginning of the gallery and you are swiping to the right then the images will come back / If it is the end of the gallery and you are swiping to the left  then the images will come back. (Feature no. 4 from the list that I discussed in Part1)

if ((swipey.direction == "right" && swipey.currentDistance == 0) || (swipey.direction == "left" && swipey.currentDistance == -(swipey.maxDistance - swipey.preferredWidth))) {
  swipey.comeBack();
}

3)      If the swiping is very fast and instantly you flicker the images with minimum distance swiped is 10 for right direction and -10 for left, then the previous slide or the next slide is displayed respectively. (Feature no. 2 from the list that I discussed in Part1)

else if (swipey.timerCounter < 30 && swipey.distanceX > 10) {
  swipey.moveRight();
}
else if (swipey.timerCounter < 30 && swipey.distanceX < -10) {
  swipey.moveLeft();
}

4)      If you swipe the current image a minimum distance of half the screen width then the next or previous image is displayed based on the direction of swipe. (Feature no. 1 from the list that I discussed in Part1)

else if (swipey.distanceX <= -(swipey.preferredWidth / 2)) //-320/2
  swipey.moveLeft();
}
else if (swipey.distanceX >= (swipey.preferredWidth / 2)) //320/2
  swipey.moveRight();
}

5)      If any of the conditions are not met then the image will come back to its original position. (Feature no. 3 from the list that I discussed in Part1)

else {
  swipey.comeBack();
}

Next, there are specific methods for translating/moving the slide container to left or right and also come back to current position.

moveLeft: function() {
  swipey.currentDistance += -swipey.preferredWidth;
  swipey.slideContainer.style.webkitTransitionDuration = 300 + "ms";
  //using CSS3 transformations - translate3d function for movement
  swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
},
moveRight: function() {
  swipey.currentDistance += swipey.preferredWidth;
  swipey.slideContainer.style.webkitTransitionDuration = 300 + "ms";
  swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
},
comeBack: function() {
  swipey.slideContainer.style.webkitTransitionDuration = 250 + "ms";
  swipey.slideContainer.style.webkitTransitionTimingFunction = "ease-out";
  swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
}

moveLeft() and moveRight() are very similar, only the calculation of swipey.currentDistance variable is different. Note that we have to translate the <ul> slide container by 320px(preferredWidth) left or right everytime for the neighboring slides to be visible. And finally we expose the swipey object to the global window object.

window.swipeyObj = swipey;

Finally we have the full java script code below with inline comments,

(function() {
var swipey = {
slideContainer: null, //<ul> element object that holds the image slides
wrapper: null, //meant for masking/clipping
slides: null, //array of all slides i.e <li> elements
distanceX: 0, //distance moved in X direction i.e left or right
startX: 0, //registers the initial touch co-ordinate
preferredWidth: 0, //dynamic variable to set width
preferredHeight: 0, //dynamic variable to set height
direction: "", //direction of movement
timer: null, //timer that set starts when touch starts
timerCounter: 0, //counter variable for timer
isTouchStart: false, //boolen to chk whether touch has started
maxDistance: 0, //maximum distance in X direction that slide container can move
currentDistance: 0, //current distance moved by slide container through translate

initSwipey: function() {
//scroll the window up to hide the address bar of the browser.
window.setTimeout(function() { window.scrollTo(0, 1); }, 100);
//get all the instances of the HTML elements
swipey.wrapper = document.getElementById("wrapper");
swipey.slideContainer = document.getElementById("slideContainer");
swipey.slides = slideContainer.getElementsByTagName("li");

//for iPhone, the width and height
swipey.preferredWidth = 320;
swipey.preferredHeight = 416; //510 for android
//setting the width and height to our wrapper with overflow = hidden
swipey.wrapper.style.width = swipey.preferredWidth + "px";
swipey.wrapper.style.height = swipey.preferredHeight + "px";
//setting the width to our <ul> element which holds all the <li> elements
swipey.slideContainer.style.width = swipey.slides.length * swipey.preferredWidth + "px";
swipey.slideContainer.style.height = swipey.preferredHeight + "px";
//calculating the max distance of travel for Slide Container i.e <ul> element
swipey.maxDistance = swipey.slides.length * swipey.preferredWidth;
//initialize and assign the touch events
swipey.initEvents();
},
initEvents: function() {
//registering touch events to the wrapper
swipey.wrapper.addEventListener("touchstart", swipey.startHandler, false);
swipey.wrapper.addEventListener("touchmove", swipey.moveHandler, false);
swipey.wrapper.addEventListener("touchend", swipey.endHandler, false);
},
//funciton called when touch start event is fired i.e finger is pressed on the screen
startHandler: function(event) {
//stores the starting X co-ordinate when finger touches the device screen
swipey.startX = event.touches[0].pageX; //.changedTouches[0]
//timer is set on
swipey.timer = setInterval(function() { swipey.timerCounter++; }, 10);
swipey.isTouchStart = true;
event.preventDefault(); //prevents the window from scrolling.
},
//funciton called when touch move event is fired i.e finger is dragged over the screen
moveHandler: function(event) {
if (swipey.isTouchStart) {
swipey.distanceX = event.touches[0].pageX - swipey.startX;
//move the slide container along with the movement of the finger
swipey.slideContainer.style.webkitTransform = "translate3d(" + (swipey.distanceX + swipey.currentDistance) + "px, 0,0)";
}
},
//funciton called when touch end event is fired i.e finger is released from screen
endHandler: function(event) {
clearInterval(swipey.timer); //timer is stopped
if (swipey.distanceX > 0) {
swipey.direction = "right";
}
if (swipey.distanceX < 0) {
swipey.direction = "left";
}
//the following conditions have been discussed in details
if ((swipey.direction == "right" && swipey.currentDistance == 0) || (swipey.direction == "left" && swipey.currentDistance == -(swipey.maxDistance - swipey.preferredWidth))) {
swipey.comeBack();
}
else if (swipey.timerCounter < 30 && swipey.distanceX > 10) {
swipey.moveRight();
}
else if (swipey.timerCounter < 30 && swipey.distanceX < -10) {
swipey.moveLeft();
}
else if (swipey.distanceX <= -(swipey.preferredWidth / 2)) { //-160
swipey.moveLeft();
}
else if (swipey.distanceX >= (swipey.preferredWidth / 2)) { //160
swipey.moveRight();
}
else {
swipey.comeBack();
}

swipey.timerCounter = 0; //reset timerCounter
swipey.isTouchStart = false; //reset the boolean var
swipey.distanceX = 0; //reset the distance moved for next iteration
},
moveLeft: function() {
swipey.currentDistance += -swipey.preferredWidth;
swipey.slideContainer.style.webkitTransitionDuration = 300 + "ms";
//using CSS3 transformations - translate3d function for movement
swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
},
moveRight: function() {
swipey.currentDistance += swipey.preferredWidth;
swipey.slideContainer.style.webkitTransitionDuration = 300 + "ms";
swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
},
comeBack: function() {
swipey.slideContainer.style.webkitTransitionDuration = 250 + "ms";
swipey.slideContainer.style.webkitTransitionTimingFunction = "ease-out";
swipey.slideContainer.style.webkitTransform = "translate3d(" + swipey.currentDistance + "px, 0,0)";
}
}; //end of swipey object
window.swipeyObj = swipey; //expose to global window object
})();

swipeyObj.initSwipey(); //invoke the init method to get started

The code can be modified and manipulated as per  your need. The same logic however, can be used to build the iPhone/Android carousel menu as well. And here it is, the link for the demo app for mobile device: http://jbk404.site50.net/html5/mobile/swipey/mobile_version/ (Open it in your iPhone or Android smartphone browser and swipe across the screen). Here is the download link if you want to download the code - http://jbk404.site50.net/html5/mobile/swipey/mobile_version.zip

For a desktop browser version (Chrome and Safari – webkit browsers only) here is the link: http://jbk404.site50.net/html5/mobile/swipey/

This completes our two part series of Swipe Gesture gallery. Hope you find it useful.

About these ads

82 thoughts on “Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 2

  1. Pingback: Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 1 « Joseph's RIA Lab

  2. Some how, I just can’t make it work for me, since I’m a newbie I downloaded your images, copied and pasted on a text editor your .js and .css files and convert them to their especific extensions, and even the html code then I upload them to my server and just change the:

    as well as the:

    to match my files folder well I end up with something like this:

    btw my html file name is mobil.html, that’s why the folder mobil_files

    could you pls help me? is there something else I need to modificate inside the javascrip file or the css to match my folders?
    what am I doing wrong ?
    ‘when I preview the site seems like the images are huge and distorted and I have to scroll down.
    I would like to build my mobil website for my business and i really would like to implement this feature to the iphone user thanks in advance for the great post as well as your prompt answer

    • Hi Jonathan,
      Can you be more detailed regarding your problem. The swipe code that I did is for mobile browsers with touch events. Are you trying the same code for a desktop browser? If you are doing that then it will not work since touch events don;t work on desktop browsers.

      Also just check out the demo once in an iPhone or Android device. The code from the demo URL should work once you have them in place.

  3. I’ve been surfing online more than three hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my view, if all site owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.

  4. Pingback: Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – flickering issue fixed « Joseph's RIA Lab

  5. Good day! I know this is somewhat off topic but I was wondering if you knew where I could find a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one? Thanks a lot!

  6. Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 2 Joseph's RIA Lab I was recommended this blog by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You are wonderful! Thanks! your article about Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – Part 2 Joseph's RIA LabBest Regards Shane

  7. Thank you for another fantastic article. Where else could anyone get that kind of information in such a perfect way of writing? I’ve a presentation next week, and I am on the look for such info.

  8. I like the valuable information you provide in your articles. I’ll bookmark your blog and check again here regularly. I am quite certain I will learn a lot of new stuff right here! Good luck for the next!

  9. Very nice post. I just stumbled upon your weblog and wanted to say that I’ve really enjoyed surfing around your blog posts. In any case I’ll be subscribing to your feed and I hope you write again very soon!

  10. Simply wish to say your article is as amazing. The clearness in your post is simply nice and i could assume you’re an expert on this subject. Fine with your permission allow me to grab your feed to keep up to date with forthcoming post. Thanks a million and please carry on the enjoyable work.

  11. Great job. Transitioning is very smooth and very clean code.
    I took the liberty of accounting for non-fullscreen images:
    swipey.preferredWidth = window.innerWidth; //better than hardcoded number
    swipey.preferredHeight = window.innerHeight;

    then add this inside initSwipey:
    var screenRatio=window.innerWidth/window.innerHeight;
    for (var i=0;iscreenRatio){
    img.style.width=swipey.preferredWidth+”px”;
    img.style.height=”auto”;
    }
    else {
    img.style.width=”auto”;
    img.style.height=swipey.preferredHeight+”px”;
    }
    }

    also, place swipeyObj.initSwipey(); as the onLoad function.
    When you keep it inline in the anonymous function, it might get called before all images are loaded.

  12. Great job! transitions are very smooth and code is clean.
    However, I took the liberty of accounting for non fullscreen images:
    swipey.preferredWidth = window.innerWidth; //to account for any device
    swipey.preferredHeight = window.innerHeight;

    Then inside initSwipey add this:
    var screenRatio=window.innerWidth/window.innerHeight;
    for (var i=0;iscreenRatio){
    img.style.width=swipey.preferredWidth+”px”;
    img.style.height=”auto”;
    }
    else {
    img.style.width=”auto”;
    img.style.height=swipey.preferredHeight+”px”;
    }
    }

    You might also want to place swipeyObj.initSwipey(); as the onLoad function.
    If you call it from inline inside the anonymous function it might be executed before all images are loaded.

  13. I plugged everything in and for some reason when I open up the webpage it displays the html files code and not the actual look it should have. I am opening it on an android and it is new enough for HTML5. Any ideas as to what I did wrong. The files are named the same as they are referenced in the html file (folders and all).

      • Hi Steve,
        The code was deliberately done for iPhone since I set

        //for iPhone, the width and height
        swipey.preferredWidth = 320;
        swipey.preferredHeight = 416;

        these in the script.
        For iPad set the width and height accordingly or you can dynamicize them.

      • Is there anyway of setting the li elements to device width – I have tried in the javascript. My images will be random size sometime bigger than the viewport sometimes much smaller would like to use css to set the img.width:100% of the set li element if that makes sence??

      • Hi Bryan,

        Try setting li elements to 100% width and height. And also if needed set the wrapper size also to 100%. And then in javascript comment out the line that sets the width and height to 320 x 416.

        Thanks.
        Joseph

      • Hi Joseph-
        Can you Please share the code here as well? so we all can see it.
        Im curious if you just changed the width and Height, or if you wrote the code to make the Width and Height Dynamic.

        Im really glad to have stumbled on your page, your Tutorials are very understandable for me, and Im not very good at, ActionScript or JavaScript.
        Thank you For being so giving-

      • Thanks for your kind comments. Here is the download link – http://jbk404.site50.net/html5/mobile/swipey/mobile_version.zip . In any case you can view any of my demo links in your browser and then right click to view source.
        The width and height for the demo have been set to 320 x 416 (iPhones and iPods), you can find these lines in the javascript code,
        swipey.preferredWidth = 320;
        swipey.preferredHeight = 416;
        You can make the width and height dynamic, something like swipey.preferredWidth = window.innerWidth
        What you can do is subscribe to the email notifications in my blog, so that whenever there is some new post you get an email.
        Thanks.
        Joseph

  14. This is a great script. It works great on iOS and older androids. Unfortunately something is wrong on Android 4.0.3. Any ideas what might be causing this?

    • I haven’t really tested this in Android 4.0.3 so not sure as of now. Android’s always give a hard time. I will check it.
      Thanks.
      Joseph

      • Putting event.preventDefault(); at the beginning of startHandler, endHandler and moveHandler helps. Just some strange bug in 4.0.3.

      • Hey Chris,

        Thanks for pointing it out. And sorry I still could not test it out. I will update my blog post based on your findings and will provide your courtesy.

        Joseph

  15. Hey Joseph,

    I’m trying to use html documents in place of images. I’ve been able to get the whole swiping part working fine but the html documents do not respond to any tap gesture I can only get it to swipe. I don’t know if there’s some script that can be changed or what. Hoping you could help.

    Thanks

    • Hi Brad,
      Are you trying to use HTML documents inside iFrames? Or is it that you are trying to put HTML elements such as

      or others in place of images? Please elaborate.
      Thanks.
      Joseph
      • I’m using HTML in iframes. It works fine and displays properly but tapping functionality is lost. Thanks for responding.

      • I actually got it to work. Now there’s just a little display problem but I’m sure I’ll be able to fix it. Thanks

  16. Hello Joseph,

    Thanks a lot of the great article and tips. One question though… I have noticed that you cannot scroll the page up and down when you swipe up and down on the gallery images. I am trying to implement the same gallery effect but leaving the ability to scroll up and down since I have contents below or above the gallery (something like the mobile page at http://www.theverge.com)

    Appreciate your help on this :)

    Ramadan

    • Hi Ramadan,

      Yes, you can make it scroll. Just comment the line event.preventDefault(); . But, now when you try to swipe in the gallery it will have issues. Usually the page/document need to be made unscrollable.

      Thanks.
      Joseph

  17. Hi Joseph,
    Thanks a lot for such a useful post. After searching a lot, I found your post. I have a query here.
    How can I use the above code for swipe effect between 2 html pages?
    Desperately waiting your help. :)
    Neha Bansal

    • Hi Neha,
      You can definitely use that to swipe between HTML pages. Here is what you can do,
      Use iFrame instead of inside

    • element. And then within the iframe src put your HTML page.
      Similarly, you can use as many iFrames in place of and then define HTML page in the iframes.
      Although I personally have not tried it out but his should help you.
      Let me know if you have issues.
      Thanks.
      Joseph
  18. It’s all great… My only issue would be, if your using it as a gallery to display all product images. If you want to scroll further down the page, the Y scroll is triggered, making it impossible to scroll any further down the page. Y scroll doesn’t make it scroll left or right (as expected) I’d just like Y to be ignored and allow for page scrolling.

    • Just to follow this up further. What needs to happen is for scrolling to detect undefined.

      I found this where it checks for scrolling as undefined, if so, continue page scroll. Perhaps this can be adapted into your code.

      if ( typeof this.isScrolling == ‘undefined’) {
      this.isScrolling = !!( this.isScrolling || Math.abs(this.deltaX) < Math.abs(e.touches[0].pageY – this.start.pageY) );
      }
      https://raw.github.com/bradbirdsall/Swipe/master/swipe.js

    • Hi Nick,
      To be honest both Horizontal and vertical swiping is difficult for a good user experience. That’s why you normally do not see horizontal swiping menu screens on mobile device allowing vertical swiping also. Is this what you were looking for or am I wrong?
      Thanks.
      Joseph

      • Hi Joseph,

        Thanks for the quick reply. The basics of it are. If you have a swipe gallery half way down the page and there is more content you wish the user to see after the swipe gallery, it is impossible to continue down the page because the Y swipe is undefined. I was hoping there would be a solution to continue down the page if Y scrolling and swipe left or right if X scrolling.

      • That’s true. Normally I have seen real web pages which has the horizontal swipe gallery kind of implementation, but they generally are a part of a longer page where the gallery occupies only a certain height. The rest of the page is scrollable to view contents below. You can comment event.preventDefault() in the javascript code for that. Let me know if you need anything else.
        Thanks.
        Joseph

  19. Hi I love this mobile version – a newbie to coding… and trying to find out if I can adapt the code to allow the scaling of the image as I am in the process of building my first app for iphone and andriod and am trying to work out for image scaling across portrait or landscape image scaling – ideally I want landscape to be the primary for displaying full screen images and then have the images swipe vertically and when the phone is in portrait mode the images scale to the full width of the image…

    Is this what someone was talking about making the width and height ‘dynamic’ ?

    Good work though… very cool code

    • Hi Mike,
      This will need some work though. You have to make changes to the code. The current code is not very intelligent to handle all this. It was just meant for an idea to the swiping feature.
      Joseph

  20. Thanks for your article it’s really great. I implemented ur code and all was perfect. However when i had some other html on the page and the slideshow wrapper with just a higher z-index, and absolute position, the swipping became so lazy and breaks. Any ideas? I am guessing is maybe just some css issues?

  21. In response to Mike Bailey about handling rotations, this is how I achieved it.
    First you add two more properties:
    previousOrientation: window.orientation, //this saves the orientation
    currentIndex: 0, //this will note which slide ( element) you are currently viewing

    in initEvents, add the follwing
    //check if on resize is present or fall back to resize
    var supportsOrientationChange = “onorientationchange” in window,
    orientationEvent = supportsOrientationChange ? “orientationchange” : “resize”;
    window.addEventListener(orientationEvent, swipey.resizeHandler, false);

    now define your swipey.resizeHandler. First I explained briefly about this. If you develop native android apps then you must have learnt that each time the is a rotation (orientation change), another instance of the ‘Activity’ Class is created that supports the new orientation i.e. the Activity is ‘re-painted’. I used this idea and considered swipey as my activity so on resize, I calculate the distance where I was in the previous orientation, set new distance with current orientation and initSwipey. this way the li elements have the new widths depending on (portrait/landscape orientations). I wil not make this long because the code is only a few lines.

    resizeHandler: function(event) {
    if(window.orientation !== swipey.previousOrientation){
    swipey.previousOrientation = window.orientation;
    setTimeout(function() {
    swipey.currentDistance = Math.abs(swipey.currentIndex) * -window.innerWidth;
    swipey.timerCounter = 0;
    clearInterval(swipey.timer);
    swipey.initSwipey();
    swipey.comeBack();
    var currentSlide = swipey.slides[swipey.currentIndex];
    }, 700);
    }
    }

    The setTimeOut here just helps to give DOM time to recoil; i used 700ms to achieve results. you can set what you think is reasonable here. Another way is to have a setInterval() in swipey.initEvents that calls swipey.resizeHandler at defined intervals. All this go well when you don’t use the fixed widths but use window.Innerwidth and window.innerHeight as outlined in several comments above.

  22. Pingback: David Sword - Creating a Responsive Website

  23. Pingback: Replicating the iPhone Swipe Gesture – Vertical swiping | RIA Lab

  24. I tried the code but for some reason my slides are vertical and not horizontal. I have the float;left; in CSS.
    but it’s not horizontal.

    body
    {
    margin:0;
    padding:10px;
    }

    #wrapper
    {
    overflow:hidden;
    }

    #wrapper ul
    {
    list-style:none;
    margin:0;
    padding:0;
    -webkit-transition: -webkit-transform 0.3s linear;
    }

    #wrapper ul li
    {
    float:left;
    }
    body {
    background-image: url(/BBop/Bullies/images/plaidbackground.png);
    }

    • Hi Hardy,

      Only setting float:left in CSS is not enough to ensure that the slides are horizontal. Make sure you also give the slide container the required width to hold all the slides (width_of_container = number_of_slides * width_of_one_slide). So check out the javascript code and make changes to this line as per you needs -

      swipey.slideContainer.style.width = swipey.slides.length * swipey.preferredWidth + “px”;

      This should help you out.

      Thanks.

  25. Hi there, is there any way to create this so that you haven’t got 2 sets of code (desktop and mobile). How would Iput both sets of codes so it works in whatever my file is opened up in. I have an html5 magazine with image sequence but i want it to work on any device. Thanks.

  26. Hi Joseph,

    I have try
    #images_full ul li img { -webkit-backface-visibility:hidden; -webkit-perspective: 1000; }
    for android but issue is not solve on my tablet i have test this on android nexus 7. image is shake or flicking

    • Hi Amit,

      This might be a new Android browser quirk. You have to look for other options. Previously I used the current technique to remove flickering. The mobile browsers can be very nasty at times and I guess you will have to find some solutions. I will let you know if I come across anything.

      Thanks.

  27. Hi joseph,

    I have track that issue. I have try that page on Andorid emulator and create emulator without GPU. it work. If i will test with GPU it will occur shake. Is there any way to stop hardware Acceleration stop for particular page.

  28. Anyone have any clues as to how to put more than one slider on a page? I’m guessing the unique ID of the #wrapper and #SlideContainer are causing problems with multiple sliders? Any help would be really appreciated.
    Fantastic Slider by the way!

    • Yes, you correct. You need to pass unique id’s for these elements. Otherwise it is quite easy to use multiple swipe galleries in one page. Just modify the code a bit.

      Thanks.
      Joseph

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s