スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログにHighslideを導入してみた

サムネイルを画面遷移せずにズームアップしたりできるJavaScriptライブラリ、HighslideをFC2ブログに導入してみました。
verは4.1.13。


やり方は結構面倒でした。

0.highslideをダウンロード。

1.graphicsディレクトリ内のイメージを全部アップロードする。
(アップロードされたフォルダを覚えておく)
psdファイルはいらないと思います。
loader.white.gifは、ファイル名の問題でFC2にはアップロードできないのでリネームしてアップロード。

2.highslide.css内のurl指定されている箇所を、上記アップロードしたURLに置き換える。

3.highslide.js内も同様に置き換える。例えば、
 restoreCursor : 'zoomout.cur'
 ↓
 restoreCursor : 'アップロードしたURL/zoomout.cur'

 var cur = hs.createElement('img', { src: hs.graphicsDir + hs.restoreCursor });
 ↓
 var cur = hs.createElement('img', { src: hs.restoreCursor });

みたいなやつで全部で5箇所ほど。
詳しくはここのソースを右クリックしてjsファイルを覗いてdiffでもかけてもらえば。


4.highslide.js内を"loader.white.gif"で検索して、アップロード時にリネームしたファイル名へ書き換える。

5.highslide.cssとhighslide.jsをアップロード。

6.ブログの"テンプレートの設定"で
<script type="text/javascript" src="アップロードしたURL/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = "アップロードしたURL";
</script>
をどこかに追加しておく。


あとは画像のリンクを貼るときに、
<a href="画像のURL" class="highslide" onclick="return hs.expand(this)">
<img src="サムネイル画像のURL" >
</a>
みたいにすればできる。


wow20120312_08s.jpg


ハマったのは、編集中にプレビューで見る場合、Chromeだと動作しないところ。
(Firefox11やIE8では動く)
デバッグしてみたところ、FC2ブログではプレビューで開くとフレーム経由で表示されるため、ChromeがXSSの可能性ありと判断して、
Unsafe JavaScript attempt to access frame with URL
というエラーを吐いていた。
なのでonload時にJavaScriptが停止してしまい、onclickイベントが発生してなかった。

そういうわけでChromeの場合、下書き状態でHighslideの動作確認ができない。ということなのかな?
"公開"にして記事を保存すればChromeでもきちんと動作する。気づくまでハマった。

comment

Secret

Google Ad
検索
ブログ内検索
カテゴリー
最近の記事
月別アーカイブ
RSSフィード
リンク
!-- google_ad_section_end -->
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。