Skip to main content

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)」など
  • 有効
    • チェック
  • プライベート
    • チェックを外す

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

動作を確認します。

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

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

Back to top