Gallery lightbox not inserting image on first click in IE11 only

Question

I have a gallery that is working fine in all browsers except IE11 (shock!).

The main issue is that in IE11 when you first click on a gallery item it doesn't insert the image url from the data attr. If you then go to load the next image (either using the lightbox navigation or gallery thumbnail) the img src is then updated and it works fine.

The other issue that I have noticed which is in IE11 only is the . gallery-navigation counter navigation circles don't trigger any of the other images to load either.

I've been looking around and seen IE11 can have an issue with prepend etc, but I've tried changing this and some other solutions I have seen online but I cannot get the gallery to work correctly in IE11

 (function() { var galleryLightbox = document.querySelector('.gallery-lightbox'); var galleryItems = document.querySelectorAll('.gallery-item'); var closeButton = document.querySelector('.gallery-close'); var nextButton = document.querySelector('.gallery-next'); var previousButton = document.querySelector('.gallery-previous'); var galleryItemIndex = 0; function createGalleryNavigation() { var navigationItemHtml = '<li class="gallery-navigation-item"><a class="gallery-navigation-button"></a></li>'; var navigation = document.querySelector('.gallery-navigation'); for (var i = 0; i < galleryItems.length; i++) { navigation.innerHTML += navigationItemHtml; } } createGalleryNavigation(); var navItems = document.querySelectorAll('.gallery-navigation-button'); function showGallery() { $('.gallery-lightbox').delay(200).fadeIn(300); } function hideGallery() { $('.gallery-lightbox').fadeOut(300); } function updateNavigation() { for (var i = 0; i < navItems.length; i++) { navItems[i].classList.remove('active'); } navItems[galleryItemIndex].classList.add('active'); } function showImage() { var imageUrl = galleryItems[galleryItemIndex].getAttribute('gallery-full-image'); var img = document.createElement('img'); img.src = imageUrl; var galleryImage = document.querySelector('.gallery-image-top'); var oldImage = galleryImage.querySelector('img'); if (oldImage) { galleryImage.removeChild(oldImage); } $('.gallery-image-top').hide().prepend(img).addClass('active').fadeIn(400); $('.gallery-caption p').html($('.gallery-figure img', galleryItems[galleryItemIndex]).prop('alt')); updateNavigation(); } function getItemIndex(items, item) { return Array.from(items).indexOf(item); } function onGalleryItemClick(event) { var clickedGalleryItem = event.currentTarget; showGallery(); galleryItemIndex = getItemIndex(galleryItems, clickedGalleryItem); showImage(); } for (var i = 0; i < galleryItems.length; i++) { galleryItems[i].addEventListener('click', onGalleryItemClick); } function onCloseButtonClick() { hideGallery(); } closeButton.addEventListener('click', onCloseButtonClick); function onNextButtonClick() { galleryItemIndex++; if (galleryItemIndex === galleryItems.length) { galleryItemIndex = 0; } showImage(); } nextButton.addEventListener('click', onNextButtonClick); function onPreviousButtonClick() { galleryItemIndex--; if (galleryItemIndex === -1) { galleryItemIndex = galleryItems.length - 1; } showImage(); } previousButton.addEventListener('click', onPreviousButtonClick); function onNavigationButtonClick(event) { var clickedNavigationItem = event.currentTarget; galleryItemIndex = getItemIndex(navItems, clickedNavigationItem); showImage(); } for (var i = 0; i < navItems.length; i++) { navItems[i].addEventListener('click', onNavigationButtonClick); } function onKeyUp(event) { if (event.which === 27) { //Escape key up hideGallery(); } else if (event.which === 39) { //Arrow right key up onNextButtonClick(); } else if (event.which === 37) { //Arrow left key up onPreviousButtonClick(); } } document.body.addEventListener('keyup', onKeyUp); }()); 

 #gallery-album { width: 100%; margin-bottom: 87px; } .gallery-lightbox { display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 9999999; } .gallery-content { width: 100vw; height: 100vh; position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); } .gallery-inner { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .gallery-image { position: relative; margin: 0 10%; display: inline-block; } .gallery-image img { max-height: 70vh; max-width: 100%; } .gallery-image-top { position: relative; } .gallery-navigation-wrapper { display: flex; position: relative; } .gallery-caption { background: white; width: 100%; padding: 35px 50px 55px; flex-grow: 1; width: 0; } .gallery-caption p { font-size: 12px; line-height: 16px; color: black; margin: 0; padding: 0; } .gallery-close { width: 40px; height: 40px; border-radius: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; position: absolute; top: 20px; right: 20px; border: none; outline: 0; transform: rotate(0deg); transition-duration: 0.3s; transition-property: all; cursor: pointer; } .gallery-close:hover, .gallery-close:active, .gallery-close:focus { outline: 0; transform: rotate(360deg); background-color: rgba(255, 255, 255, 1); } .gallery-close:after, .gallery-close:before { content: ''; width: 20px; height: 2px; background-color: $monza; position: absolute; } .gallery-close:before { transform: rotate(45deg); } .gallery-close:after { transform: rotate(-45deg); } .gallery-control { width: 42px; height: 42px; border-radius: 100%; background-color: rgba(255, 255, 255, 0.8); border: none; outline: 0; cursor: pointer; position: absolute; top: 50%; transform: translate(0, -50%); outline: 0; transition-duration: 0.3s; transition-property: all; } .gallery-control:hover, .gallery-control:active, .gallery-control:focus { outline: 0; background-color: rgba(255, 255, 255, 1); } .gallery-control:after { content: ''; display: inline-block; position: absolute; background-image: url(../img/arrow.png); background-size: 12px; width: 12px; height: 21px; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translate(0, -50%); } .gallery-previous { left: 20px; } .gallery-next { right: 20px; } .gallery-next:after { transform: translate(0, -50%) rotate(180deg); } .gallery-navigation { list-style: none; padding: 0; margin: 0; position: absolute; display: flex; top: -30px; left: 50%; transform: translate(-50%); } .gallery-navigation-button { display: block; width: 10px; height: 10px; border: 0; background-color: rgba(0, 0, 0, 0.7); border-radius: 50%; margin: 0 2px; cursor: pointer; } .gallery-navigation-button.active { background-color: red; } .gallery-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0 -4px; padding: 0; } .gallery-item { position: relative; display: block; height: 224px; flex-grow: 1; margin: 0 2px 4px; } .gallery-item img { height: 224px; object-fit: cover; max-width: 100%; min-width: 100%; vertical-align: bottom; } .gallery-figure { display: block; width: auto; height: auto; cursor: pointer; } .position-relative { position: relative !important; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="gallery-album"> <ol class="gallery-list"> <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1556911073-38141963c9e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"> <div class="gallery-figure"> <img src="https://placekitten.com/g/400/224" alt="caption here"> </div> </li> <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564399331650-bbfe2aac0a04?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80"> <div class="gallery-figure"> <img src="https://placekitten.com/g/400/224" alt="caption here"> </div> </li> <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564399328369-228e628d003c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"> <div class="gallery-figure"> <img src="https://placekitten.com/g/400/224" alt="caption here"> </div> </li> <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1560871402-467c8633acba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"> <div class="gallery-figure"> <img src="https://placekitten.com/g/400/224" alt="caption here"> </div> </li> <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564408512035-6597e7afd94e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"> <div class="gallery-figure"> <img src="https://placekitten.com/g/400/224" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et "> </div> </li> <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564415637254-92c66292cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80"> <div class="gallery-figure"> <img src="https://placekitten.com/g/400/224" alt="caption here"> </div> </li> <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564419795513-ef6e58aa3c55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80"> <div class="gallery-figure"> <img src="https://placekitten.com/g/400/224" alt="caption here"> </div> </li> <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564661610655-e7a2a110196a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80"> <div class="gallery-figure"> <img src="https://placekitten.com/g/400/224" alt="caption here"> </div> </li> <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564537392312-9b83755aae5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"> <div class="gallery-figure"> <img src="https://placekitten.com/g/400/224" alt="caption here"> </div> </li> <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564506667932-789f87dfaafe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80"> <div class="gallery-figure"> <img src="https://placekitten.com/g/400/224" alt="caption here"> </div> </li> <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564507004663-b6dfb3c824d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80"> <div class="gallery-figure"> <img src="https://placekitten.com/g/400/224" alt="caption here"> </div> </li> <li class="gallery-item" gallery-full-image="https://images.unsplash.com/photo-1564505971742-18360fa287eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80"> <div class="gallery-figure"> <img src="https://placekitten.com/g/400/224" alt="caption here"> </div> </li> </ol> <div class="gallery-lightbox"> <div class="gallery-content"> <div class="gallery-inner"> <div class="gallery-image"> <div class="gallery-image-top position-relative"> <button class="gallery-close"></button> <button class="gallery-control gallery-previous"></button> <button class="gallery-control gallery-next"></button> </div> <div class="gallery-navigation-wrapper position-relative"> <ol class="gallery-navigation"></ol> <div class="gallery-caption"> <p></p> </div> </div> </div> </div> </div> </div> </div> 

Here is a JSFiddle of the gallery.

Answer 1

I have tried to create a sample using your code, it will show me this error:

Error: Object doesn't support property or method 'from'

After adding the following polyfills, the code works well on IE browser:

    // Production steps of ECMA-262, Edition 6, 22.1.2.1
    if (!Array.from) {
        Array.from = (function () {
            var toStr = Object.prototype.toString;
            var isCallable = function (fn) {
                return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
            };
            var toInteger = function (value) {
                var number = Number(value);
                if (isNaN(number)) { return 0; }
                if (number === 0 || !isFinite(number)) { return number; }
                return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
            };
            var maxSafeInteger = Math.pow(2, 53) - 1;
            var toLength = function (value) {
                var len = toInteger(value);
                return Math.min(Math.max(len, 0), maxSafeInteger);
            };

            // The length property of the from method is 1.
            return function from(arrayLike/*, mapFn, thisArg */) {
                // 1. Let C be the this value.
                var C = this;

                // 2. Let items be ToObject(arrayLike).
                var items = Object(arrayLike);

                // 3. ReturnIfAbrupt(items).
                if (arrayLike == null) {
                    throw new TypeError('Array.from requires an array-like object - not null or undefined');
                }

                // 4. If mapfn is undefined, then let mapping be false.
                var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
                var T;
                if (typeof mapFn !== 'undefined') {
                    // 5. else
                    // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
                    if (!isCallable(mapFn)) {
                        throw new TypeError('Array.from: when provided, the second argument must be a function');
                    }

                    // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
                    if (arguments.length > 2) {
                        T = arguments[2];
                    }
                }

                // 10. Let lenValue be Get(items, "length").
                // 11. Let len be ToLength(lenValue).
                var len = toLength(items.length);

                // 13. If IsConstructor(C) is true, then
                // 13. a. Let A be the result of calling the [[Construct]] internal method 
                // of C with an argument list containing the single item len.
                // 14. a. Else, Let A be ArrayCreate(len).
                var A = isCallable(C) ? Object(new C(len)) : new Array(len);

                // 16. Let k be 0.
                var k = 0;
                // 17. Repeat, while k < len… (also steps a - h)
                var kValue;
                while (k < len) {
                    kValue = items[k];
                    if (mapFn) {
                        A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
                    } else {
                        A[k] = kValue;
                    }
                    k += 1;
                }
                // 18. Let putStatus be Put(A, "length", len, true).
                A.length = len;
                // 20. Return A.
                return A;
            };
        }());
    }

You could check the whole sample code . The result on my side like this.