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

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

Posted at June 24,2006 1:53 AM
Tag:[Customize, MovableType, Popup]

カスタマイズ前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項をお勧めします。

関連記事
トラックバックURL


トラックバック

画像ポップアップウィンドウの画面編集 from PARADISE BLOG
Movable Typeで画像をアップロードした時に、ポップアップ画面が中途半端... [続きを読む]

Tracked on June 24, 2006 11:32 AM

litebox 写真をカッコよく表示 from Memo for a Moment
lightbox2.0の軽量版にあたるliteboxを導入してみた。 つまづきそうな所は、、、 link,scriptタグのsrcを書き換えl... [続きを読む]

Tracked on January 3, 2007 9:12 PM

画像ポップアップ画面の編集 from PARADISE CLUB
Movable Type にて画像をアップロードした時に、ポップアップ画面のサイ... [続きを読む]

Tracked on March 13, 2007 12:37 AM
コメント

こんにちは、yujiroさん 
記事をチェックしていたら目に、止まったので
今回も、参照させて頂きました。

何時もは、画面サイズを広げて使っているのですが
今回のカスタマイズで使いやすくなりました。
ありがとうございます。

今日は、気温が上がって暑くなりそうですね
日曜日は、海開きですう。(笑)
では、良い週末をお過ごし下さいね。

[1] Posted by mituru : June 24, 2006 11:44 AM

>mituruさん
こんにちは。
記事参照&トラックバックありがとうございました。
なお、1項はアップグレードの度に修正が必要ですのでご注意ください。
ではでは!

[2] Posted by yujiro : June 26, 2006 1:40 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)