jQuery Forum

Here is my predicament:

      I have a mini photo gallery as part of an information page in our mobile site. It displays one image and the user "Swipes" left or right to see the next and previous images. As a fall back for none "Swipe" devices i have 2 arrows, left and right, on their respective sides of the image. This all functions fine. When you click and hold on an image it expand to take up the full available width of the browser window. At this point the arrows are z-indexed and absolutely positioned above the image. This works fine when testing in chrome, however the tap functionality is not working on an iPhone. The arrows are visually z-indexed correctly but it appears something is preventing any action on them.

My initial thought is that the "swipe" action of the iPhone is preventing the "tap" on the image. The arrows are not links, just divs with an image and the action is triggered through jQuery. Are the to actions conflicting by chance? Any help would be fantastic!

This is my CSS(LESS): If anyone is not familiar with CSS LESS let me know and i will post it as generic CSS

2. .photoGallery { // gallery container
3.   display: block;
4.   height: 160px;
5.   padding: 0; margin: 0;
6.   width: 100%;
7.   position: relative;
8.   overflow: hidden;
9.   background: #000;
10.   .galleryNav{ // class of left and right arrows
11.     position:absolute;
12.     top:60px;
13.     z-index:99999;
14.     &.galleryLeft{ // sets left arrow position
15.      left:5px;
16.     }
17.     &.galleryRight { // sets right arrow position
18.       right:5px;
19.     }
20.   }
21.   div.galleryHolder { // images container
22.     width: 100000px;
23.     height: 100%;
24.     position: absolute;
25.     left: 0; top: 0;
26.     z-index:9;
27.     div.listing-photo { // individual image container
28.       float: left;
29.       position:relative;
30.       z-index:9;
31.       img { // image
32.         max-width: 200px;
33.         max-height: 130px;
34.         margin: 5px auto 0px;
35.         display: block;
36.         border:#222222 1px solid;
37.       }
38.     }
39.   }
40. }

Cheers,

Graeme!