0

I have modified the gallery script from http://usejquery.com/blog/create-unique-gallery-using-z-index-and-jquery and it works fine in all browsers but IE10. See it here: http://174.122.126.251/~arblockt/index.html. The photos are supposed to "shuffle" the top image to the bottom of the stack but in IE10 the top photo remains on top.

Here is the modified script:

            $(document).ready(function() {
              var z = 0; 
              var inAnimation = false; 

              $('#pictures img').each(function() { 
                z++; 
                $(this).css('z-index', z);
              });

              function swapFirstLast() {
                if(inAnimation) return false; //if already swapping pictures just return
                else inAnimation = true; //set the flag that we process a image

                $('#pictures img').each(function() { //process each image
                  if($(this).css('z-index') == z) { //if its the image we need to process
                    $(this).animate({ 'left' : '-' + $(this).width() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
                      $(this).css('z-index', 1) //set new z-index
                        .animate({ 'left' : '0' }, 'slow', function() { //animate the image back to its original position
                          inAnimation = false; //reset the flag
                        });
                    });
                  } else { //not the image we need to process, only in/de-crease z-index
                    $(this).animate({ 'left' : '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery
                      $(this).css('z-index', parseInt($(this).css('z-index')) + 1); //in/de-crease the z-index by one
                    });
                  }
                });
                return false; //don't follow the clicked link
              }
              window.setInterval(swapFirstLast, 3000);
            });

Can anyone see why this works in every browser (even old versions of IE) but not IE10?

Thanks in advance for your help.

UPDATE: It is still not working in IE10 but I did notice that if you let it continue to run for a while, the top picture will eventually move to the back, but the new top picture will do the same thing and stay on top. Very odd.

UPDATE #2: I just resized the IE10 window as it was running and it immediately started working properly. Any idea what could be causing this very strange behavior? Thanks!

Bill Farber
  • 11
  • 3
  • I don't know why specifically, but I can tell you `` will probably work. Unfortunately that's kinda hackish and not a direct answer, hence why it's a comment – Ohgodwhy Jul 24 '13 at 03:12
  • Yeah, I know. I was desperate! Trying anything I could think of. lol I have since removed it. – Bill Farber Jul 24 '13 at 13:51
  • I figured out the problem, but I don't know why it happens. I removed all css except that which is required by the script and then added it back 1 style at a time. It turned out that the footer style included position:relative. When I removed this, everything worked perfectly. What's odd about that is that the footer div is outside and below the gallery's container element so I don't know why this would have an effect on the gallery, and only in IE10. I've solved the problem, but I'm still curious as to why this happens. Has anyone heard of this situation before and can shed some light on it? – Bill Farber Jul 26 '13 at 16:15

1 Answers1

0

I have been having the same problem. I tried the resizing and it worked for me as well. Then i decided to change the order of when the z indexes were being changed. I displayed the elements according to their z index from highest to lowest and it seemed to work for me. Good luck!

strange_developer
  • 1,327
  • 2
  • 12
  • 17