1

I have several figures that are to big for my HTML page.

So the action I would like to have is, a thumbnail image in my HTML that when the user clicks, a new tab is opened with a image, figure title and text (e.g. something like caption="This is my caption").

However, I do not want to have a bunch of new HTML pages with all my figures and I do not want to have a bunch of small and full-sized images. Instead I would like something "cleaner"

My code below has the one figure (the original size) but displays the image as a thumbnail and when you click, it opens the figure in a new tab.

Is there a simple way to add my caption text (and allow me to reuse it for all my figures and 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>
cFreed
  • 4,404
  • 1
  • 23
  • 33
user918967
  • 2,049
  • 4
  • 28
  • 43

1 Answers1

2

I wound up having to write a Javascript function that could 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 then when I want to use it, I 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 - all the &#39;s are being used because the code is embedded within a JSON array

user918967
  • 2,049
  • 4
  • 28
  • 43