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 https://i.sstatic.net/NthPR.jpg

Kind Regards,

Alex

Hypabyssal

if the image is put with a formula, a custom sidebar or dialog from a custom menu can be used to get image from selection. not possible any other way to get the zoomed image on the same sheet window. – Mateya

Very disappointing that there is no native handling for this. Either the images are too small to be useful or the rows are too large to be readable. – Dvorak

Answer 1

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>

Recipe

@Itsuki Productions Had an issue with permissions. If you're logged into your Google account you should see an "Actions" menu at the top. Run "Authorise" and then click the image and it should work. – Recipe

Yeah, is there a way to bypass the permissions? I'm not able to tell everyone to authorise and login to their google account D: – Hypabyssal

Unfortunately certain API's require authorisation and this script uses the SpreadsheetApp API. They would only need to authorise it once but they would need to be logged in for it to work. I can't think of a workaround right now but if I do I'll let you know. – Recipe

They can't actually see the Actions > Authorize option unless everyone has the ability to edit the spreadsheet. So normal viewers, even logged in can't authorize. Is there a way around this? – Hypabyssal

I believe people will need edit access for this to work. One workaround would be to have protection on the sheet but the clickable images in an unprotected column. I have made these changes on the above sheet as an example. If this isn't feasible for your situation I might be out of ideas. Permissions and authorisation makes certain things difficult to keep us protected from malicious scripts. – Recipe

Answer 2

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

Test Here: Example

Tigges

Great! But please, update an Example page! This plugin works in my docs edit mode, but does not work in Your example page. – Knotweed

Yeah, As plugin only works only in edit mode. In my example file is read-only that's why you are facing this. – Tigges

Add-on link is broken – Goofy

Answer 3

One working with the latest version of Google Docs, in a very effective way, also allowing to download images is: Google Docs Image Zoom

Dollydolman

This addon does not work with in-line images. – Goofy

Answer 4

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

Occipital

file is not accessible any more – Sheepshead

file is deleted / Kike, porque borraste el archivo kbron... – Willardwillcox

Answer 5

Actually, there is an easy way now, upload the picture to google drive, paste the shareable link in the cell. click the link and select "chip".

It would look like this: enter image description here

Perak

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Passepartout

But it's not showing image as a small shortcut, you have to hover to view image. – Photoengrave