Fancy Zoomを使ってみるd(゜ー゜*) *kirara

Entry list

Shop News☆

11月18日～11月26日ポイント5倍キャンペーン
      SM2 ALL ITEMS      Te chichi ALL ITEMS
      SM2 New Collection      Te chichi New Collection
11月22日～12月1日ポイント10倍
      Beautiful Sunday（楽天）

Pagetop

Fancy Zoomを使ってみるd(゜ー゜*)

2008-05-06 (Tue) 20:52

今までブログのサムネイル画像の表示にはThickBoxを使ってました！
その時の記事

ThickBoxを使ってみる。

ただね、ページの読込み中に画像をクリックすると
IE7だとページエラーになってたのね
なもんで、ページを全部読込んでからクリックしてね！
なんて書いてたんだけど・・・

んが、この度サムネイル画像の表示をFancy Zoomに変更しました

いろいろとね、時折いろんなスクリプトを試してはいたんだけど
やっぱりページエラーになったり、設定が複雑だったりしたんだけど
このFancy Zoomだと
読込み中に画像をクリックしても、別ウィンドウで開くし
もちろん、ページを読込んでからはちゃんと同ページで
大きな画像が表示されます

の上、フラッシュとの兼ね合いも考えなくて済むし
設定も複雑じゃなくって、とっても便利でございます

見本画像です

<a hrefのアドレスに title="見本だよん" って感じでタイトル属性を持たせると
画像の下に、タイトルが表示されます＾＾

もちろん、うちと違ってページ表示が軽いブログさんは
すぐに大きな画像が表示されると思い

カスタマイズをしてみようと思う人は

を参考にどうぞ＾＾

まず、こちらのページ

Fancy Zoom
の中程にあるFancyZoom 1.1.zipをダウンロードして下さい！

ダウンロードしたFancyZoom 1.1.zipを解凍するとフォルダの中に

FancyZoom 1.1フォルダがあります！
このフォルダの中身を使います。このフォルダの中には

images-globalフォルダ
js-globalフォルダ

この2つのフォルダがあります

まずは「images-globalフォルダ」の中の画像を
全てファイルアップロードして下さい
そして、アップロードした画像のプロパティで画像のアドレスを確認します
（ファイルアップロードした画像を右クリックしてプロパティで確認）

（例）http://blog-imgs-41.fc2.com/c/o/a/coatofring/zoom-spin-12.png
うちのブログだとこんな↑になってます

これの確認が必要な所は画像名の前までのアドレス
（例）http://blog-imgs-41.fc2.com/c/o/a/coatofring/
↑の部分になります

このアドレスを、テキストエディタ等にコピペしておいて下さい
テキストエディタはTeraPadが使いやすいです

TeraPad

次に「js-globalフォルダ」の中の「FancyZoom.js」を触ります
必ずテキストエディタ等を使って作業して下さい

FancyZoom.jsの中の↓の部分を変更します

var zoomImagesURI = '/images-global/zoom/'; // Location of the zoom and shadow images
↓
var zoomImagesURI = 'http://blog-imgs-41.fc2.com/c/o/a/coatofring/'; // Location of the zoom and shadow images

画像のある場所を自分のブログで使用する画像のアドレスに変更します
（上のアドレスは、うちのブログのアドレスになるので各自確認したアドレスにして下さい）

この変更が終わったら、上書き保存します
そして「js-globalフォルダ」の中の2つのファイル
FancyZoom.js
FancyZoomHTML.js
を、画像をアップするのと同じようにファイルアップロードします
この2つのファイルをアップした後に、画像のアドレスを確認した時と同じように
ファイルのアドレスを確認して、エディタ等にコピペしておいて下さい

（例）http://blog-imgs-41.fc2.com/c/o/a/coatofring/FancyZoom.js
↑うちのブログだとこんな感じです

ちょこっとややこしい設定はここまでです！
あとは、ブログのテンプレートHTMLの記述を変更しますっ
必ず、テンプレートのコピーを取ってから設定して下さいね

まず、さっきのFancyZoom.jsとFancyZoomHTML.jsのアドレスを使って
テンプレートの<head>～</head>の間に

<script type="text/javascript" src="FancyZoom.jsファイルのアドレス"></script>
<script type="text/javascript" src="FancyZoomHTML.jsファイルのアドレス"></script>

を追加します
jsファイルのアドレスはファイルアップロードした時のアドレスにして下さい

そして、テンプレート内の
<body>
↓
<body id="whatever" onload="setupZoom()">

に変更したら完了です
テンプレートの設定更新をして下さい

なるべく丁寧に書いたつもりですが
やってみたけど、出来ないって方はコメントでお願いしまっす＾＾

※この方法は、FC2ブログでの設定方法になります※