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ブログでの設定方法になります※
その時の記事
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ブログでの設定方法になります※
応援してね 
