Magnifier.jsは、画像をAmazon風に拡大表示できるJavaScriptライブラリです。 kintoneの添付ファイル画像に適用してみました。
サンプル
フォーム設定
コード
JavaScriptは、「Event.js」、「Magnifier.js」を読み込み後、下記「sample.js」を読み込みます。 またCSSは、「magnifier.css」を読み込みます。 「Event.js」、「Magnifier.js」、「magnifier.css」はいずれも、https://github.com/mark-rolich/Magnifier.jsから入手できます。
・sample.js
(function () { "use strict"; kintone.events.on('app.record.detail.show', function(event){ [].forEach.call(kintone.app.record.getFieldElement('添付ファイル').getElementsByTagName('li'), function(li, index){ var thumb = li.getElementsByTagName('img')[0]; if(!thumb) return; thumb.id = 'magnifier-thumb-' + index; thumb.parentNode.style.position = 'relative'; var xhr = new XMLHttpRequest(); xhr.open('GET', '/k/v1/file.json?fileKey=' + event.record.添付ファイル.value[index].fileKey); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.responseType = 'blob'; xhr.addEventListener('load', function(){ var img = new Image(); img.src = URL.createObjectURL(xhr.response); img.addEventListener('load', function(){ var width = 400; var magnifierLargeWrapper = document.createElement('div'); magnifierLargeWrapper.id = 'magnifier-large-wrapper-' + index; magnifierLargeWrapper.style.width = width + 'px'; magnifierLargeWrapper.style.height = (width/img.width*img.height) + 'px'; magnifierLargeWrapper.style.position = 'relative'; magnifierLargeWrapper.style.overflow = 'hidden'; kintone.app.record.getSpaceElement('space').appendChild(magnifierLargeWrapper); (new Magnifier(new Event())).attach({ thumb: '#magnifier-thumb-' + index, large: URL.createObjectURL(xhr.response), largeWrapper: 'magnifier-large-wrapper-' + index, zoomable: true, onthumbenter: function(){ magnifierLargeWrapper.style.display = 'block'; }, onthumbleave: function(){ magnifierLargeWrapper.style.display = 'none'; } }); magnifierLargeWrapper.style.display = 'none'; }); }); xhr.send(); }); }); })();
0件のコメント