2006年6月24日
画像のポップアップウィンドウをカスタマイズする
このエントリーでは、ディスプレイより大きなサイズの画像を全部閲覧できるようにするためのカスタマイズを2つ紹介します。いずれかお好きな方をお選びください。これらは通常のポップアップのカスタマイズとしても利用することができます。
1.ポップアップウィンドウのスクロールやリサイズを有効にする方法
CMS.pm を任意のエディタで開き、「window.open」で検索すると下記の行がみつかります。
ちなみに、3.2 では3600行目あたり、3.3b2 では4700行目辺りです。
<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">$link</a>
この中の window.open? のカッコの部分がポップアップウィンドウの詳細設定になります。
赤色の部分を下記のように yes に修正します。
<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">$link</a>
- scrollbars=yes
は、画面サイズにスクロールバーが表示する設定です。
- resizable=yes
は、表示されたポップアップウィンドウのリサイズを可能にします。
なお、スクロールバーを表示する設定にした場合、スクロールバーが画像にやや被ってしまうので、下記のリストのように先程修正した行の少し上に青色の行を追加してください。
:
}
$width += 17;
my $link = $thumb ? qq(<img src="$thumb" width="$thumb_width" height="$thumb_height" alt="" />) : q{<MT_TRANS phrase="View image">};
return $app->translate_templatized(<<"HTML");
<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">$link</a>
:
これでポップアップウィンドウの横幅がやや広くなります。17 という数値は場合は自分で試した結果ですので、修正してもらっても構いません。
高さをひろげたい場合は
$height += xx;
を同じように追加してください(xx には任意の値を設定します)。
![]() |
2.ポップアップウィンドウに画像を縮小して表示する方法
画像サイズを自動的に縮小するカスタマイズが下記のサイトで紹介されています。
以上です。「見れればいい(というのは語弊がありますが)」という場合は2項、原寸で閲覧させたい場合は1項をお勧めします。
Comments [2]
| Trackbacks [3]