2009年6月 7日

【 395 】 画像ポップアップ

 更新日  09.06.07. 1.36
ムネイル画像をクリックした時に、ページを移動せずその場で拡大画像を表示させるカスタマイズ。Highslide JS を使った一番簡単な方法のメモです。

MovableTypeを始め、 FC2ブログFC2掲示板など、 HTMLを弄れる所なら何処でも利用できるハズです。

■まず必要な JavaScript をダウンロードします。

Highslide JS - JavaScript thumbnail viewer


Download」をクリック。


デフォルトで一番新しいバージョンになっていますので、そのままクリック。


Yes」をクリック。


お好きな場所に保存して下さい。


ZIPをフォルダ構成を再現したまま解凍すると、上のような構成になります。
一杯あって大変そう!というご心配は無用です。

とにかく、簡単に使いたいと言う方は、まず 「hslide-4.1.4 」フォルダを開き、その中の「 highslide 」フォルダをサーバーにアップロードします。


もし、FC2などフォルダごとアップできない環境の場合は、上のオレンジ色に反転しているファイル「 highslide.js 」だけアップロードしてもOKです。
フォルダ「graphics」には拡大縮小の時に表示するカーソルアイコンが有るだけですので、無くても動作に影響はありません。

■テンプレートHTMLをに記述する。

お使いのブログテンプレート、または掲示板のテンプレートの 「 </head> 」の上に、次を書き込みます。

  • <script type="text/javascript" src="サイトURL/highslide/highslide.js"></script>
  • <script type="text/javascript">
  • hs.graphicsDir = 'サイトURL/highslide/graphics/';
  • hs.outlineType = null;
  • window.onload = function() {
  • hs.preloadImages();
  • }
  • </script>
(1)は「highslide 」フォルダごとアップロードした場合のURLの指定ですので、FC2などの場合は、アップロードしたファイルを管理画面で右クリックし、「ショートカットのコピー」で得られるURLをそのまま貼り付けます。その場合(3)のURLも変わりますが、とりあえず(1)が間違ってなければ動きます。

■スタイルシートの設定。

解凍したオリジナルにはサンプルのスタイルシートなどが入っていますが、一番簡単かつ短い指定は次の通りです。既にお使いのスタイルシートの最後に貼り付けます。

  • .highslide {
  • cursor: url(ブログURL/highslide/graphics/zoomin.cur), pointer;
  • outline: none;
  • }
  • .highslide img {
  • border: 1px solid gray;
  • }
  • .highslide:hover img {
  • border: 1px solid white;
  • }
  • .highslide-image {
  • border: 5px solid white;
  • }
  • .highslide-image-blur {
  • }
  • .highslide-caption {
  • display: none;
  • border: 2px solid white;
  • border-top: none;
  • font-family: Verdana, Helvetica;
  • font-size: 10pt;
  • padding: 5px;
  • background-color: white;
  • }
  • .highslide-loading {
  • display: block;
  • color: white;
  • font-style: 'MS Sans Serif';
  • font-size: 9px;
  • font-weight: bold;
  • text-transform: uppercase;
  • text-decoration: none;
  • padding: 3px;
  • border-top: 1px solid white;
  • border-bottom: 1px solid white;
  • background-color: black;
  • }
  • a.highslide-credits,
  • a.highslide-credits i {
  • padding: 2px;
  • color: silver;
  • text-decoration: none;
  • font-size: 10px;
  • }
  • a.highslide-credits:hover,
  • a.highslide-credits:hover i {
  • color: white;
  • background-color: gray;
  • }
  • .highslide-display-block {
  • display: block;
  • }
  • .highslide-display-none {
  • display: none;
  • }

(2)はカーソルの保存先のURLを指定します。フォルダごとあっぷした場合はこのままですが、「graphics」フォルダをアップロード出来ない場合は、中にある「 zoomout.cur」と「 zoomin.cur」をサイトにアップし、そのファイルを直接URLで指定します。

これで準備は完了です。

ブログで画像をポップアップしたしたい場合、次のように書き込みます。

  • <a href="オリジナル.jpg" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)" rel="nofollow" title="クリックすると拡大します">
  • <IMG src="サムネイル.jpg" width="横幅" height="縦幅" border="0" ></a>

(1)が拡大する画像で、(2)は小さなサムネイルか、文字などを指定します。

これで動けば、後はカーソルの設定やスタイルシートの設定を弄ってみて下さい。

ちなみに highslide.js を開いて、次の行を編集すると拡大された時のメッセージを変えられます。

creditsText : 'Powered by <i>Highslide JS</i>',
restoreTitle : 'Click to close image, click and drag to move. Use arrow keys for next and previous.'

■FC2掲示板に適用させる。

</head>への書き方、スタイルシートは同じですが、ブログと違って掲示板はHTMLを使った記事やコメントが描けませんので、アップロードされた画像は無条件でポップアップするように変更します。

掲示板テンプレートから「 <!--image_area--> 」を探します。

そのすぐ下に「<!--with_thumbnail--> 」変数があり、次のような1行があると思います。

  • <!--with_thumbnail-->
  • <a href="<%fullimage_url>"><img src="<%thumbnail_url>" class="userimage" /></a>
  • <!--/with_thumbnail-->

<a href="<%fullimage_url>"> この部分を書き換えます。

  • <!--with_thumbnail-->
  • <a href="<%fullimage_url>" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)" rel="nofollow" title="拡大">
  • <img src="<%thumbnail_url>" class="userimage" alt="拡大"/></a>
  • <!--/with_thumbnail-->

これで、アップロードした画像をクリックして、ページが切り替わらず、その場で拡大表示されれば完了です。

変数についてはこちらをご覧下さい。【 FC2掲示板テンプレート変数

以上です。
面倒くさそうですが、JavaScriptさえ間違いなく読み込ませれば、極端な話しスタイルシートなんか設定しなくても動きますので簡単です。とりあえず動かしてみたい。という方のために、やっつけ的に書きましたが、詳しく動作をお知りになりたい場合は、ネットで検索して下さい。

私の所では【小粋空間: Highslide JS でサムネイル画像を拡大表示する】を参考にさせていただきました。

Ran Google+on Google+ Google

関連記事:[ 1件]

Tag 関連記事

  この記事のトラックバックURL Trackbacks-URL

この記事のトラックバック URL です  [ボタンクリックでクリップボードへコピーします]
 [http://ran.private.coocan.jp/mt/ran-tb.cgi/383]

  →  Comment Post

お名前は必須です。URLを記入いただくとファビコンを表示します

ご利用のブラウザ、設定ではご利用になれません。