Is there a way to enlarge an image on mouse click in Google Sheets?

Question

I basically have small images in a table that I'd like to enlarge on mouse click. I'd like the enlarged image to appear on the center of the page. On mouse click again to remove the enlarged image. I was able to do this on Excel using a VB script that I found, but had no luck in Google Sheets. Is there a way to assign this sort of script to each image?

Similarly to this http://imgur.com/ETyflIS

Kind Regards,

Alex

Answer 1

You can have google chrome add-on: Docs Image Zoomer

Test Here: Example

Answer 2

You can assign scripts to images but there's no way (that I can see) for the script to figure out which image is being clicked. Also the script can insert a new image but this one won't have a script assigned to it so we can't make it disappear on click.

I suppose you could assign a script that would open up the image using the HTML service like this:

Enlarge Picture on Click

But you would need to either make a separate function for each image, so it can load the source into the HTML, or identify which image is clicked somehow (I'll have a think but I don't think this can be done).

Edit: Script below. First image should run popUp1 and second image should run popUp2. There might be a more elegant solution for supplying the HTML with the different image URL but this works.

code.gs

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  // Or DocumentApp or FormApp.
  ui.createMenu('Actions')
  .addItem('Authorise', 'Auth')
  .addToUi();
}

function Auth() {
  SpreadsheetApp.getActiveSpreadsheet();
}


function popUp1() {
  var html = HtmlService.createHtmlOutputFromFile('index1')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  html.setHeight(400);
  html.setWidth(600);
  SpreadsheetApp.getUi()
      .showModalDialog(html, 'Image');
}

function popUp2() {
  var html = HtmlService.createHtmlOutputFromFile('index2')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  html.setHeight(400);
  html.setWidth(600);
  SpreadsheetApp.getUi()
      .showModalDialog(html, 'Image');
}

index1.html

<form>
  <div id="closeDiv"><font face="arial" size="1">Click the image to close...</font></div>
  <img src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images-540x303.jpg" alt="DJ BBQ" style="width:540px;height:303px;" onClick="closeImage()">
</form>

<script type="text/javascript">
  function closeImage() {
    google.script.host.close();
  }
</script>

index2.html

<form>
  <div id="closeDiv"><font face="arial" size="1">Click the image to close...</font></div>
  <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="DJ BBQ" style="width:540px;height:303px;" onClick="closeImage()">
</form>

<script type="text/javascript">
  function closeImage() {
    google.script.host.close();
  }
</script>

Answer 3

Not sure if this is what you were looking for, nor if you found another solution, but if you go to insert/drawing you can paste there your full size image, insert it and then resize it within the cell. If you double click the image, the full size drawing will pop up. However this only works as an editor. not viewer nor commenter. Also, you have to click Save and close in order to go back. Neither ESC nor clicking outside closes the drawing editor.

Example: https://docs.google.com/spreadsheets/d/1KDcRQngFy1zRUrD6v2FYH-YPBivZGiUlSKt_PhjeZqU/edit#gid=0

Hope it might be helpful.

Enrique