CurrentlySelected does not work anymore

[Griffy-kevin]

When you use currently selected, it still shows the first image. (This bug is also now live on the demo page if you press the currrentlySelected demo box)

The thumbnails selects the second image and the title says "Beach" but the image shows the firework display.

In a previous opened issue it was said that it only affected edge but I also have it in chrome.

Safari has the image half way:

[edilsonalvarado]

Same here.
I must use another one plugin, meanwhile I use a tricky solution. After instance ImageViewer object I put this code:

const imagesWrapper = document.getElementsByClassName('imagesWrapper')[0]; const imageContainers: HTMLCollection = imagesWrapper.children; for (let i = 0; i < imageContainers.length; i++) { const imageContainer = <HTMLElement> imageContainers.item(i); const url = imageContainer.dataset.url; const image = <HTMLImageElement> imageContainer.getElementsByClassName('image')[0]; image.src = url!; }
Basically is the same code used by plugin to load images. It's like to force to load them.

[edilsonalvarado]

Try with this.
const imagesWrapper: Element = this.document.getElementsByClassName('imagesWrapper')[0]; if (imagesWrapper) { const imageContainers: HTMLCollection = imagesWrapper.children; setTimeout(() => { const imageContainer: HTMLElement = imageContainers.item(index || 0); const imageCenterPosition = imageContainer.offsetLeft - (imagesWrapper.getBoundingClientRect().width - imageContainer.getBoundingClientRect().width)/2; imagesWrapper.scrollTo({left: imageCenterPosition, behavior: 'smooth'}); }, 200); }

[Griffy-kevin]

Thank you for your insights. With some tweaking I got it to work perfectly with this Javascript below:

import ImageViewer from 'awesome-image-viewer';

const images = Array.from(this.el.querySelectorAll('img')); //Select all your images that you want to be able to enlarge
  
// Add click events for each image
images.forEach((image, index) => {
    image.addEventListener('click', (event) => CreateImageViewer(event, index));
});

function CreateImageViewer (index) {
    new ImageViewer({
        images: images
    });
    
    const imagesWrapper = document.getElementsByClassName('imagesWrapper')[0];
    if (imagesWrapper) {
        const imageContainers = imagesWrapper.children;
    
       // "Disable" lazyloading
        for (let i = 0; i < imageContainers.length; i++) {
            const imageContainer = imageContainers.item(i);
            const url = imageContainer.dataset.url;
            const image = imageContainer.getElementsByClassName('image')[0];
            image.src = url;
        }
        
        //Scroll to clicked image (selected by index)
        setTimeout(() => {
            const imageContainer = imageContainers.item(index);
            const imageCenterPosition = imageContainer.offsetLeft - (imagesWrapper.getBoundingClientRect().width - imageContainer.getBoundingClientRect().width)/2;
            imagesWrapper.scrollTo({left: imageCenterPosition, behavior: 'instant'});
        }, 100);
    }
}

As you said, first we overwrite the lazy loading so all images are loaded by default, only then we do the scrollTo animation.

A nice solution, hope it can get implemented in the package soon @MostafaMDZH

Might be a good thing to make lazyloading an optional parameter that people can add to the new ImageViewer object.