html - Using javascript to open image and text in new tab -


i have several figures big html page.

so action have is, thumbnail image in html when user clicks, new tab opened image, figure title , text (e.g. caption="this caption").

however, not want have bunch of new html pages figures , not want have bunch of small , full-sized images. instead "cleaner"

my code below has 1 figure (the original size) displays image thumbnail , when click, opens figure in new tab.

is there simple way add caption text (and allow me reuse figures , captions)? 

<a href='#' onclick=window.open('js/figures/bi_figure1.png','_blank');>   <img src='js/figures/bi_figure1.png' alt=&#34;thumb&#34; width=100px;height=100px/> </a>

i wound having write javascript function handle this

the function looks like:

function imagepopup(myimage, mytitle, mycaption, mysource) {    var mywindow = window.open("", mytitle, "_blank", "toolbar=no,scrollbars=no,resizable=yes");    mywindow.document.write("<head><title>" + mytitle + "</title></head>");    mywindow.document.write("<big><b>figure caption:</big></b>" + mycaption + "<p>");    mywindow.document.write("<big><b>figure source:</big></b>" + mysource + "<p>");    mywindow.document.write("<img src=" + myimage + ">");    return mywindow; };

and when want use it, call it:

<a href="#" onclick=imagepopup(&#39;path_to_figure&#39;,&#39;figure_title&#39;,&#39;figure_caption&#39;,&#39;figure_source&#39;);><img src="path_to_figure" alt="thumb" width=100px;height=100px/></a>

ps - &#39;s being used because code embedded within json array


Comments

Post a Comment