画像のポップアップウィンドウをカスタマイズする
このエントリーでは、ディスプレイより大きなサイズの画像を全部閲覧できるようにするためのカスタマイズを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項をお勧めします。
- ポップアップウィンドウ追加
- ポップアップ画面を用いたコメント投稿(その5:その4の補足)
- ポップアップ画面を用いたコメント投稿(その4:コメントフォームのカスタマイズ)
- ポップアップ画面を用いたコメント投稿(その3:公開テンプレート修正方法)
- ポップアップ画面を用いたコメント投稿(その2:カスタマイズ)
- ポップアップ画面を用いたコメント投稿(その1:基本動作)
≫ 画像ポップアップウィンドウの画面編集 from PARADISE BLOG
Movable Typeで画像をアップロードした時に、ポップアップ画面が中途半端... [続きを読む]
≫ litebox 写真をカッコよく表示 from Memo for a Moment
lightbox2.0の軽量版にあたるliteboxを導入してみた。
つまづきそうな所は、、、
link,scriptタグのsrcを書き換えl... [続きを読む]
≫ 画像ポップアップ画面の編集 from PARADISE CLUB
Movable Type にて画像をアップロードした時に、ポップアップ画面のサイ... [続きを読む]
こんにちは、yujiroさん
記事をチェックしていたら目に、止まったので
今回も、参照させて頂きました。
何時もは、画面サイズを広げて使っているのですが
今回のカスタマイズで使いやすくなりました。
ありがとうございます。
今日は、気温が上がって暑くなりそうですね
日曜日は、海開きですう。(笑)
では、良い週末をお過ごし下さいね。
>mituruさん
こんにちは。
記事参照&トラックバックありがとうございました。
なお、1項はアップグレードの度に修正が必要ですのでご注意ください。
ではでは!