画像のポップアップウィンドウをカスタマイズする
このHTMLコードによるポップアップウィンドウ、アップロードした画像のサイズにあわせてポップアップするのですが、ウィンドウのリサイズやスクロールが無効な状態で表示されるため、画像サイズがディスプレイサイズを超えている場合、（ポップアップウィンドウはディスプレイサイズより大きくならないため）画像を全て参照することができません。 |
このエントリーでは、ディスプレイより大きなサイズの画像を全部閲覧できるようにするためのカスタマイズを2つ紹介します。いずれかお好きな方をお選びください。これらは通常のポップアップのカスタマイズとしても利用することができます。
１．ポップアップウィンドウのスクロールやリサイズを有効にする方法
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 には任意の値を設定します）。
 修正したら元のディレクトリにアップロードしてください。これで画像の表示方法で「ポップアップウィンドウ」を指定した時にスクロールやリサイズが可能になったHTMLコードが表示されます。 |
２．ポップアップウィンドウに画像を縮小して表示する方法
画像サイズを自動的に縮小するカスタマイズが下記のサイトで紹介されています。
以上です。「見れればいい（というのは語弊がありますが）」という場合は２項、原寸で閲覧させたい場合は１項をお勧めします。
