nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

how to display 'clicked' image in popup in new window

FranklinAlexander

Ok, this should be very easy, but I cannot figure this out. I just want to display a full size image in a new browser window by clicking a smaller version in a popup window. I don't know why I can't get this to work, but I am getting the images from and ajax call to a web service. The smaller image displays in the popup, but when clicked a new browser opens and nothing is there. See the Temp1 var in line 19.

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">getBearImage</SPAN><SPAN class="punctuation token">(</SPAN>imageFile<SPAN class="punctuation token">,</SPAN> count<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"getting bear image"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="keyword token">var</SPAN> obj <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
                    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"POST"</SPAN><SPAN class="punctuation token">,</SPAN>
                    url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'/BlackBearImages/BBIWebService.asmx/GetImageFile'</SPAN><SPAN class="punctuation token">,</SPAN>
                    data<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="string token">"filename"</SPAN><SPAN class="punctuation token">:</SPAN> imageFile
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                    contentType<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"application/x-www-form-urlencoded"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">//use for POST type</SPAN>
                    <SPAN class="comment token">//contentType: "application/json; charset=utf-8",</SPAN>
                    error<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>x<SPAN class="punctuation token">,</SPAN> y<SPAN class="punctuation token">,</SPAN> z<SPAN class="punctuation token">,</SPAN> data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="token function">alert</SPAN><SPAN class="punctuation token">(</SPAN>x<SPAN class="punctuation token">.</SPAN>responseText <SPAN class="operator token">+</SPAN> <SPAN class="string token">"  "</SPAN> <SPAN class="operator token">+</SPAN> x<SPAN class="punctuation token">.</SPAN>status<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
                $<SPAN class="punctuation token">.</SPAN><SPAN class="token function">ajax</SPAN><SPAN class="punctuation token">(</SPAN>obj<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">done</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"ajax result "</SPAN><SPAN class="punctuation token">,</SPAN> data<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">var</SPAN> cp1<SPAN class="punctuation token">,</SPAN> cp2<SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">var</SPAN> image <SPAN class="operator token">=</SPAN> data<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementsByTagName</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"base64Binary"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML<SPAN class="punctuation token">;</SPAN>                                        
                    <SPAN class="keyword token">let</SPAN> temp1 <SPAN class="operator token">=</SPAN> <SPAN class="string token">"<a href='data:image/jpeg;charset=utf-8;base64,"</SPAN> <SPAN class="operator token">+</SPAN> image <SPAN class="operator token">+</SPAN> <SPAN class="string token">"' target='_blank'><img src='data:image/jpeg;charset=utf-8;base64,"</SPAN> <SPAN class="operator token">+</SPAN> image <SPAN class="operator token">+</SPAN> <SPAN class="string token">"'alt='no image'></img></a>"</SPAN><SPAN class="punctuation token">;</SPAN>  <SPAN class="comment token">//I cannot seem to get the href right. </SPAN>
                    <SPAN class="comment token">//let temp1 = "<img src='data:image/jpeg;charset=utf-8;base64," + image + "'alt='no image' onClick='displayInNewTab()'>"</SPAN>
                    <SPAN class="comment token">//console.log("bear image ", image);</SPAN>

                    <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>count <SPAN class="operator token">==</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        cp1<SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ContentPane</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                             title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Image"</SPAN><SPAN class="punctuation token">,</SPAN>
                             content<SPAN class="punctuation token">:</SPAN> temp1
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        tc<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addChild</SPAN><SPAN class="punctuation token">(</SPAN>cp1<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"image pane "</SPAN><SPAN class="punctuation token">,</SPAN> cp1<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>

                    <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>count <SPAN class="operator token">==</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        cp2<SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ContentPane</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                             title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Image"</SPAN><SPAN class="punctuation token">,</SPAN>
                             content<SPAN class="punctuation token">:</SPAN> temp1
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        tc<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addChild</SPAN><SPAN class="punctuation token">(</SPAN>cp2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                    console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"text pane "</SPAN><SPAN class="punctuation token">,</SPAN> cpText<SPAN class="punctuation token">)</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            <SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

The new browser window opens, but there is no image.

As always, thanks for all of your suggestions.

Ok, I am answering my own question. Evidently it isn't possible to open base64 URIs in a new Chrome window any more for security reasons. I did find a workaround for anyone who is having the same issue by embedding the image in an iFrame:

$<SPAN class="punctuation token">.</SPAN><SPAN class="token function">ajax</SPAN><SPAN class="punctuation token">(</SPAN>obj<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">done</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">var</SPAN> cp1<SPAN class="punctuation token">,</SPAN> cp2<SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">var</SPAN> image <SPAN class="operator token">=</SPAN> data<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementsByTagName</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"base64Binary"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML<SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">var</SPAN> base64URL <SPAN class="operator token">=</SPAN> <SPAN class="string token">"data:image/jpeg;charset=utf-8;base64,"</SPAN> <SPAN class="operator token">+</SPAN> image<SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">function</SPAN> <SPAN class="token function">newWindow</SPAN><SPAN class="punctuation token">(</SPAN>base64URL<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">var</SPAN> win <SPAN class="operator token">=</SPAN> window<SPAN class="punctuation token">.</SPAN>open<SPAN class="punctuation token">;</SPAN>
                        win<SPAN class="punctuation token">.</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">write</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<iframe src="'</SPAN> <SPAN class="operator token">+</SPAN> base64URL <SPAN class="operator token">+</SPAN> <SPAN class="string token">'"style="width:100%; height:100%;" allowfullscreen></iframe>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                    <SPAN class="keyword token">let</SPAN> temp1 <SPAN class="operator token">=</SPAN> <SPAN class="string token">"<img id='bearImg' src='data:image/jpeg;charset=utf-8;base64,"</SPAN> <SPAN class="operator token">+</SPAN> image <SPAN class="operator token">+</SPAN> <SPAN class="string token">"'alt='no image' style='width:230px; height:215px;'>"</SPAN>
                    <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"img"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">var</SPAN> win <SPAN class="operator token">=</SPAN> window<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">""</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"_blank"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        win<SPAN class="punctuation token">.</SPAN>document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">write</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'<iframe src="'</SPAN> <SPAN class="operator token">+</SPAN> base64URL <SPAN class="operator token">+</SPAN> <SPAN class="string token">'"style="width:100%; height:100%;" allowfullscreen></iframe>'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                    <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>count <SPAN class="operator token">==</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        cp1<SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ContentPane</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                             title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Image"</SPAN><SPAN class="punctuation token">,</SPAN>
                             content<SPAN class="punctuation token">:</SPAN> temp1
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        tc<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addChild</SPAN><SPAN class="punctuation token">(</SPAN>cp1<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"image pane "</SPAN><SPAN class="punctuation token">,</SPAN> cp1<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>

                    <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>count <SPAN class="operator token">==</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        cp2<SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ContentPane</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                             title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Image"</SPAN><SPAN class="punctuation token">,</SPAN>
                             content<SPAN class="punctuation token">:</SPAN> temp1
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        tc<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addChild</SPAN><SPAN class="punctuation token">(</SPAN>cp2<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                    console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"text pane "</SPAN><SPAN class="punctuation token">,</SPAN> cpText<SPAN class="punctuation token">)</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Find more posts tagged with

Accepted answers

All comments

There are no accepted answers yet

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.