Redmine View Cutomizeを用いてアイコンを拡大表示させる。

概要

アイコンの画像にマウスを近づけたとき、

アイコンを拡大表示させるためのView_Customizeのスクリプトです。

前提

手順

画面移動

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

カスタマイズ作成:JavaScript

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

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

コード

$(document).ready(function() {
// gravatarクラスを持つ画像にホバーイベントを追加
$('img.gravatar').hover(
function() {
$(this).css({
'transform': 'scale(1.5)', // 拡大率
'transition': 'transform 0.3s ease' // 拡大のスムーズなアニメーション
});
},
function() {
$(this).css({
'transform': 'scale(1)', // 元のサイズに戻す
'transition': 'transform 0.3s ease' // 縮小のスムーズなアニメーション
});
}
);
});

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

カスタマイズ作成:CSS

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

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

コード

/* gravatarクラスを持つ画像のスタイル */
img.gravatar {
transition: transform 0.3s ease; /* スムーズなアニメーション */
cursor: pointer; /* ポインタを表示 */
}

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

動作を確認します。

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

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


Revision #3
Created 2 December 2024 06:47:58 by manualmaton
Updated 2 December 2024 08:05:11 by manualmaton