こちらの記事の応用となります。
のように、alt属性がついた画像をマウスオーバーしたときに
拡大表示させます。
前提
- Redmine View Customize がインストールされていること。
- Redmine 5.1で動作を確認しています。
手順
画面移動
- Redmineに管理者権限でログインします。
- 管理＞表示のカスタマイズに移動します。
カスタマイズ作成：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)」など
- 有効
- チェック
- プライベート
- チェックを外す
設定後、保存をクリックします。
動作を確認します。
上記設定後、チケット詳細などのアイコンが表示されているページに遷移します。
冒頭のようにマウスカーソルを近づけた際に拡大されれば設定は完了です。
