Is there a way to enlarge an image on mouse click in Google Sheets?
You can have google chrome add-on: Docs Image Zoomer
Test Here: Example
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>