2006年6月24日

画像のポップアップウィンドウをカスタマイズする

June 24,2006 1:53 AM
Tag:[, , ]
Permalink

カスタマイズ前Movable Type の管理画面から画像をアップロードした後、次の画面のラジオボタンで「HTMLを表示」を選択し、「ポップアップ」をクリックすると、アップロードした画像をポップアップウィンドウで表示するためのHTMLコードが表示されます(スクリーンショット)。あとはこのコードをエントリーに貼り付ければOKです。

このHTMLコードによるポップアップウィンドウ、アップロードした画像のサイズにあわせてポップアップするのですが、ウィンドウのリサイズやスクロールが無効な状態で表示されるため、画像サイズがディスプレイサイズを超えている場合、(ポップアップウィンドウはディスプレイサイズより大きくならないため)画像を全て参照することができません。

このエントリーでは、ディスプレイより大きなサイズの画像を全部閲覧できるようにするためのカスタマイズを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 には任意の値を設定します)。

カスタマイズ後修正したら元のディレクトリにアップロードしてください。これで画像の表示方法で「ポップアップウィンドウ」を指定した時にスクロールやリサイズが可能になったHTMLコードが表示されます。

2.ポップアップウィンドウに画像を縮小して表示する方法

画像サイズを自動的に縮小するカスタマイズが下記のサイトで紹介されています。

お気楽極楽ブログ画像のポップアップ表示でサイズ制限する

以上です。「見れればいい(というのは語弊がありますが)」という場合は2項、原寸で閲覧させたい場合は1項をお勧めします。

Comments [2] | Trackbacks [3]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3