web-dev-qa-db-ja.com

Googleスプレッドシートでマウスクリックで画像を拡大する方法はありますか？

私は基本的に、マウスクリックで拡大したい小さな画像をテーブルに持っています。拡大画像をページ中央に表示したいのですが。マウスをもう一度クリックして、拡大した画像を削除します。見つけたVBスクリプトを使用して、Excelでこれを行うことができましたが、Googleスプレッドシートではうまくいきませんでした。この種のスクリプトを各画像に割り当てる方法はありますか？

これと同じように http://imgur.com/ETyflIS

敬具、

アレックス

google-apps-scriptgoogle-sheetsgoogle-spreadsheet-api
6
Itsuki Productions

スクリプトを画像に割り当てることはできますが、どの画像がクリックされているかをスクリプトが把握する方法はありません（私にはわかりません）。また、スクリプトは新しい画像を挿入できますが、この画像にはスクリプトが割り当てられていないため、クリックしても画像が消えることはありません。

次のようなHTMLサービスを使用して画像を開くスクリプトを割り当てることができると思います。

クリックすると画像が拡大します

ただし、ソースをHTMLにロードできるように画像ごとに個別の関数を作成するか、何らかの方法でクリックされた画像を特定する必要があります（私は考えますが、これはできないと思います）。

編集：以下のスクリプト。最初の画像はpopUp1を実行し、2番目の画像はpopUp2を実行する必要があります。 HTMLに別の画像URLを提供するためのより洗練されたソリューションがあるかもしれませんが、これは機能します。

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>
2
SBmore

あなたはグーグルを持つことができますchromeアドオン： Docs Image Zoomer

ここでテスト： 例

enter image description here

0
Unnati Solanki