2011年11月9日 更新日：2016/01/10

bloggerでhighslideを利用して画像をポップアップさせる

やっと出来た。



こちらの記事

にわかりやすく説明されています。備忘録として、記述します。

サムネイルをクリックすると、bloggerではlightboxプラグインでムニョ～っと、ポップアップされます。

しかし、有名なこのプラグインも画像を閉じる時に、画像の周囲をクリックする必要があり、ポップアップした時にマウスカーソルがある場所から移動しなければならず、無駄な動きが必要となってしまう。

ところが、今回のhighslideは、画像をクリックした場所でクリックすれば、そのまま画像を閉じることができるのが特徴。

ここが僕が気に入っているところなのです。

やり方は

１　highslideのソースをココからダウンロード

します。

２　上記のファイルを解凍して、highslideのなかのhighslide.jsファイルを以下のように編集します 　

(1)クレジットの表示を消す showCredits : true, // you can set this to false if you want 上記の　true　を　false　に変更します。 　

(2)不要な参照を削除 var src = hs.graphicsDir + (hs.outlinesDir || "outlines/") + this.outlineType +".png"; 上記の　+ (hs.outlinesDir || "outlines/")　は必要ないので削除します。

３　CSSファイルを作成します。以下をテキスト編集ソフトにペーストして　highslide.cssというファイル名で保存します。ファイルを保存する時は文字コードは　UTF-8　にしておきます。

@charset "UTF-8";

.highslide {

cursor: url(http://(Uploaded Folder Name of Your Page Address)/zoomin.cur), pointer;

outline: none;

}

/* 拡大したときにこれでサムネイルを隠す*/

.highslide-active-anchor img {

visibility: hidden;

}

.highslide-wrapper {

background: white;

}

.highslide-caption {

display: none;

border-top: 1px solid white;

border-bottom: 1px solid white;

padding: 0 1em;

line-height: 1.5em;

background-color: silver;

font-size: 10pt;

}

.highslide-loading {

display: block;

color: black;

font-size: 12px;

font-style: italic;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-weight: bold;

text-decoration: none;

padding: 2px;

border: 1px solid black;

background-color: white;

padding-left: 22px;

background-image: url('http://(Uploaded Folder Name of Your Page Address)/loader.white.gif');

background-repeat: no-repeat;

background-position: 3px 1px;

}

a.highslide-full-expand {

background: url('http://(Uploaded Folder Name of Your Page Address)/fullexpand.gif') no-repeat;

display: block;

margin: 0 10px 10px 0;

width: 34px;

height: 34px;

}

/* These must always be last */

.highslide-display-block {

display: block;

}

.highslide-display-none {

display: none;

}

上記の(Uploaded Folder Name of Your Page Address)の部分は自分のサーバーにアップする場所のアドレスにすること。

４　必要なファイルをアップロードする次のファイルを自分のサーバーにアップロードします。

・highslide.js … 必須

・highslide.css … 3で作成したCSS

・drop-shadow.png … 拡大表示したときの画像の影

・fullexpand.gif … 大きな画像を表示するとき必要

・loader.white.gif … 画像のロード中に表示する

・zoomin.cur … ズームインカーソル

・zoomout.cur … ズームアウトカーソル

ファイルは全て同じフォルダーにアップします。

５　Bloggerのテンプレートの編集画面で/headの直前に以下のようにコードを追加する。

<link charset='UTF-8' href='http://(Uploaded Folder Name of Your Page Address)/highslide.css' rel='stylesheet' type='text/css'/>

<script src='http://(Uploaded Folder Name of Your Page Address)/highslide.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

hs.graphicsDir = 'http://(Uploaded Folder Name of Your Page Address)/';

//]]>

</script>

</head>

上記の(Uploaded Folder Name of Your Page Address)の部分は自分のサーバーにアップする場所のアドレスにすること。 以上で終わり。 それでは、記事内に画像を貼った後、修正します

?

1	<a href="http://www.XXXXXX/YYYY/ZZZZ.jpg" target="blank"><img alt="" src=""http://www.XXXXXX/YYYY/ZZZZ.jpg" width="200" /></a>

こんな記述になっていると思いますが、『target="blank"』の所に、次の文字列を記入します。・class="highslide" ・onclick="return hs.expand(this)" こういうふうになります。

<a href="http://www.XXXXXX/YYYY/ZZZZ.jpg" class="highslide" onclick="return hs.expand(this)"><img alt="" src=""http://www.XXXXXX/YYYY/ZZZZ.jpg" width="200" /></a>

さぁ、やってみましょう。

アメブロでもできるように探しているところですが、トライしてもポップアップまでたどり着きません。