Redmine View Customizeを用いて、alt属性がついた画像を拡大して表示する。

https://barrel.reisalin.com/books/redmine-bsA/page/redmine-view-cutomize

こちらの記事の応用となります。

のように、alt属性がついた画像をマウスオーバーしたときに

拡大表示させます。

前提

手順

画面移動

  1. Redmineに管理者権限でログインします。
  2. 管理>表示のカスタマイズに移動します。

カスタマイズ作成:JavaScript

表示のカスタマイズに移動後、「新しい表示のカスタマイズ」をクリックします。

以下の通りに入力します。

コード

// JavaScript部分
$(document).ready(function() {
$('img[alt]').hover(
function() {
$(this).css({
'transform': 'scale(1.5)',
'transition': 'transform 0.3s ease'
});
},
function() {
$(this).css('transform', 'scale(1)');
}
);
});

// CSS部分
var style = document.createElement('style');
style.innerHTML = `
img[alt] {
transition: transform 0.3s ease;
}
`;
document.head.appendChild(style);

設定後、保存をクリックします。

動作を確認します。

上記設定後、チケット詳細などのアイコンが表示されているページに遷移します。

冒頭のようにマウスカーソルを近づけた際に拡大されれば設定は完了です。


Revision #1
Created 3 December 2024 22:59:54 by manualmaton
Updated 3 December 2024 23:06:21 by manualmaton