Image Zoom
Inspect an image in a keyboard-accessible lightbox.
<div class="max-w-xl">
<%= image_zoom "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgODAwIDUwMCI+PHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM5M2M1ZmQiLz48Y2lyY2xlIGN4PSI2MTAiIGN5PSIxMTAiIHI9IjU1IiBmaWxsPSIjZmJiZjI0Ii8+PHBhdGggZD0iTTAgMzgwIDI0MCA5MCA0OTAgMzgwWiIgZmlsbD0iIzMzNDE1NSIvPjxwYXRoIGQ9Im0yNDAgOTAtNzAgODQgMTMwLTE0WiIgZmlsbD0iI2Y4ZmFmYyIvPjxwYXRoIGQ9Ik0yNzAgMzkwIDUzMCAxODUgODAwIDM5MFoiIGZpbGw9IiM2NDc0OGIiLz48cGF0aCBkPSJNMCAzNzBRMjAwIDMzMCA0MDAgMzkwVDgwMCAzNjBWNTAwSDBaIiBmaWxsPSIjMTRiOGE2Ii8+PC9zdmc+", alt: "Illustrated mountain lake", id: "image_zoom_basic_demo" %>
</div><div class="max-w-xl">
<%= image_zoom "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgODAwIDUwMCI+PHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM5M2M1ZmQiLz48Y2lyY2xlIGN4PSI2MTAiIGN5PSIxMTAiIHI9IjU1IiBmaWxsPSIjZmJiZjI0Ii8+PHBhdGggZD0iTTAgMzgwIDI0MCA5MCA0OTAgMzgwWiIgZmlsbD0iIzMzNDE1NSIvPjxwYXRoIGQ9Im0yNDAgOTAtNzAgODQgMTMwLTE0WiIgZmlsbD0iI2Y4ZmFmYyIvPjxwYXRoIGQ9Ik0yNzAgMzkwIDUzMCAxODUgODAwIDM5MFoiIGZpbGw9IiM2NDc0OGIiLz48cGF0aCBkPSJNMCAzNzBRMjAwIDMzMCA0MDAgMzkwVDgwMCAzNjBWNTAwSDBaIiBmaWxsPSIjMTRiOGE2Ii8+PC9zdmc+", alt: "Illustrated mountain lake", id: "image_zoom_original_demo", zoom_src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgODAwIDUwMCI+PHJlY3Qgd2lkdGg9IjgwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM5M2M1ZmQiLz48Y2lyY2xlIGN4PSI2MTAiIGN5PSIxMTAiIHI9IjU1IiBmaWxsPSIjZmJiZjI0Ii8+PHBhdGggZD0iTTAgMzgwIDI0MCA5MCA0OTAgMzgwWiIgZmlsbD0iIzMzNDE1NSIvPjxwYXRoIGQ9Im0yNDAgOTAtNzAgODQgMTMwLTE0WiIgZmlsbD0iI2Y4ZmFmYyIvPjxwYXRoIGQ9Ik0yNzAgMzkwIDUzMCAxODUgODAwIDM5MFoiIGZpbGw9IiM2NDc0OGIiLz48cGF0aCBkPSJNMCAzNzBRMjAwIDMzMCA0MDAgMzkwVDgwMCAzNjBWNTAwSDBaIiBmaWxsPSIjMTRiOGE2Ii8+PC9zdmc+" %>
</div>