Enlarge PNG images in carousel

[FRANZKAFKA13]

Hello,

I don't know if this is related to the webchat client or the MS bot framework in general, but since your support is really great, I thought you might be able to help me.

Is it possible to enlarge images to original size in a carousel by klicking on them? I implemented the carousel as follows:

            let messageWithCarouselOfCharts = MessageFactory.carousel([
                this.getStockPriceAttachment(resultChart1),
                this.getStockPriceAttachment(resultChart1),
                this.getStockPriceAttachment(resultChart1),
            ],"");

            await step.context.sendActivity(messageWithCarouselOfCharts);

        getStockPriceAttachment (companyResult) {
            const imageData = fs.readFileSync(path.join(__dirname, `/resources/images/stockcharts/${companyResult}.png`));
            const base64Image = Buffer.from(imageData).toString('base64');

            return {
                name: 'pp.png',
                contentType: 'image/png',
                contentUrl: `data:image/png;base64,${ base64Image }`
            }
        }

Also, when sending a carousel, the webchat displays the bot's avatar further left compared to normal text messages which leads to a messy result:

[corinagum]

Hi @FRANZKAFKA13, are you using the /latest/ cdn or /master/? I believe the alignment issue should be resolved in master, but if you are using it then we will need to revisit the avatar alignment issue in the carousel.

Currently Web Chat doesn't have support for fullscreen display of images. You might consider looking into the Fullscreen Web API to implement this for your app. :)

[compulim]

Thanks @corinagum for replying this.

FYI, IE11 do support Fullscreen API with limits, https://caniuse.com/#search=fullscreen. And I believe the limit shouldn't affect your case.

#1560 was the bug around layout, fixed in #1561.

[FRANZKAFKA13]

Thanks @corinagum @compulim.

I am already using the /master branch and the alignment issue is still present.

Also, the fullscreen API seems to enlarge the respective elements to fullscreen. What I am looking for is a way to enlarge the images to their original size, not full screen. E.g. make the images "clickable" and show them in a "lightbox" that overfloats the website. The following is excactly what I'm looking for functionality-wise: http://fancybox.net/howto

Since the images aren't static elements on a html site but rendered "on the flow" while chatting with the bot, I don't know how to reference the images, especially since my chatbot runs in an iframe on a third party website (LimeSurvey).

[compulim]

@FRANZKAFKA13 I have separated this bug into multiple issues.

#1635 is the bug for alignment.

#1636 is for the lightbox work you wanted to do. Today, when you click on an image, it can be either submit or open URL. It would be great if one can tap on an image and it fire some custom JavaScript code. And in your case, open a lightbox/fancybox.