Dash Image Gallery

Hey there,
Is there any possible way to have a dash image gallery?

Best regards!

Hi @Varlor

Can you say more about they type of image gallery you are looking for?

The Carousel in dash-bootstrap-components might work for you:

1 Like

Im searching for something like an image explorer with all datafiles shown on a sidebar and by clicking you got the images shown. But carousel is definitevly the right direction! Thank you very much. My question about this: Is it preloading the images or load them when clicking next? @AnnMarieW

Hi @Varlor

The functional part of the the carousel is handled by the component. If you do an inspect element on the carousel image, you will see that is specifies lazy loading.

But it should also be pretty easy to create a sidebar with links or button that display an image when clicked on.

Hi @AnnMarieW
I see. Thank you. One last question about this. The paths to the images. Do they require some special format? I try to load images from disk but it is not working. Those are png images and i put them in the item list in the format like: [{“key”:“0”,“src”:"/c/tmp/imageFolder/FirstImage.png"}…]

See more about loading images here: Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly

@AnnMarieW : Yes i know about the base64 encoding decoding method. Is it somehow possible to have a callback with the caroussel component to convert/load only that source that is selected by the clicking/sliding ?