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){varthumb=li.getElementsByTagName('img')[0];if(!thumb)return;thumb.id='magnifier-thumb-'+index;thumb.parentNode.style.position='relative';varxhr=newXMLHttpRequest();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(){varimg=newImage();img.src=URL.createObjectURL(xhr.response);img.addEventListener('load',function(){varwidth=400;varmagnifierLargeWrapper=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);
(newMagnifier(newEvent())).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();
});
});
})();