Modal Image to Enlarge on Click

Dash Python
1

Hello,

I’m looking to create a Modal Image in this example.
Modal Image

So the point is to enlarge an image on click and then have the option to close it. I’m currently using this method of show images on my dashboard.

import dash
import dash_html_components as html
import base64

app = dash.Dash()
image_filename = ‘my-image.png’ # replace with your own image
encoded_image = base64.b64encode(open(image_filename, ‘rb’).read())
app.layout = html.Div([
html.Img(src=‘data:image/png;base64,{}’.format(encoded_image.decode()))
])

if name == ‘main’:
app.run_server(debug=True)

Advice? Thanks in advance.

2

i wish i can do it for my plotly graph in dash App also :slight_smile:

3

@serlucov @zhsee

You can use a hidden div and a callback to update the display. Something like:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go

app = dash.Dash()
server = app.server

app.layout = html.Div([

    html.Div(id="image", children=[
        html.Img(src="http://placeimg.com/625/225/animals", height='100', width='100')
    ], style = {'display': 'block'}),

    html.Div(id='modal', children=[
        html.Img(
            src="http://placeimg.com/625/225/animals",
            height='500',
            width='500',
            style={
                'display':'block',
                'margin-left': 'auto',
                'margin-right': 'auto'
            })
    ], style={'display': 'none'})

])

@app.callback(Output('modal', 'style'),
              [Input('image', 'n_clicks')])
def display_image(n):
    if n % 2 == 0:
        return {'display': 'none'}
    else:
        return {
            'display': 'block',
            'z-index': '1',
            'padding-top': '100',
            'left': '0',
            'top': '0',
            'width': '100%',
            'height': '100%',
            'overflow': 'auto'
            }

if __name__ == '__main__':
    app.run_server(debug=True)
1 Like