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

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

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

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

拡大表示させます。

前提

• Redmine View Customize がインストールされていること。
• Redmine 5.1で動作を確認しています。

手順

画面移動

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

カスタマイズ作成：JavaScript

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

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

• パスのパターン
  • 空白
• プロジェクトのパターン
  • 空白
• 挿入位置
  • 全ページのヘッダ
• 種別
  • 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);

• コメント
  • 任意「alt画像のホバー表示(javascript)」など
• 有効
  • チェック
• プライベート
  • チェックを外す

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

動作を確認します。

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

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