*kirara

指先をこぼれても誰のせいじゃない 胸がうつ音色なら星が聞いてるよ
2008.07 << 12345678910111213141516171819202122232425262728293031 >> 2008.09
weicome Welcome to my blog welcome    はじめましての方は、はじめましてにこ    いつも来てくれてる方は、ありがとぉきらきら    CHAGE and ASKAの事や想いを徒然と更新中です はーと

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

今までブログのサムネイル画像の表示には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ブログでの設定方法になります※
はーといつも応援感謝ですはーと

人気ブログランキングにほんブログ村Fc2ブログランキング

カスタマイズ はくしゅ☆

コメント

だめだ〜〜。頭がついていかない〜。v-9
綾取りがこんがらがった感じです〜ゥ。
千花さんのブログって、とっても可愛いよね。おしゃれな感じ。シンプルだけど、凄く盛り沢山。左右に一杯貼り付けてあっても、下品じゃないし。


[ 2008/05/07 06:13 Wed ] sofia☆@管理人 #3DpfYUu6 [ 編集 ]
もうちょっと前までは、もっとシンプルだったんだけど
今は、かなり賑やかになっちゃって(笑)
褒めてもらって恐縮っす(〃∇〃) てれっ☆

説明ややこしかったかな?
補足をかなり書いちゃったのが裏目に出ちゃったかな(汗)

[ 2008/05/07 15:39 Wed ] 千花@管理人 #BWgGc7Fk [ 編集 ]
初めまして。
fancyzoomの説明で、一番わかりやすかったです〜^^
zoomした時の画像(images-globalの中のもの)が反映しなくて
困っていたのですが、解決しました!
ありがとうございました^^

[ 2008/08/09 04:31 Sat ] さち@管理人 #-
はじめまして!
コメントありがとうございます^^
画像のアドレスは、jsファイルを触らないといけないから
ちょっとややこしい所ですよねっ
解決されて良かったです♪

[ 2008/08/09 16:43 Sat ] 千花@管理人 #BWgGc7Fk [ 編集 ]

コメントの投稿













                Thank you☆

*非公開のコメントをご希望の場合は、記事欄の「はくしゅ☆アイコン」よりお願いします^^
*只今、言及リンクの無いトラックバックは受け付けておりません。
お手数ですが、当ブログのアドレスを追加の上、送信願います。

この記事のトラックバックURL
http://coatofring.blog93.fc2.com/tb.php/728-9b4ebe3c


Profile
千花 *Author : 千花
 *ぷろふ&info は
  ←をクリック
 *びぃびぃえす
 *めーるふぉーむ
 *↓もう1つのブログ
    with*you


 

admin   

*kirara_QRコード    

  

m-cat
Search




☆ マイクロアド ☆



☆★ JoyfulClick ★☆



Fバナー広告

ジュエリーならツツミに決まり!当店なら送料無料
スケルトンウォッチ

香水 香水専門店プリンセス


→マイクロアド←

→楽天ぴたっとアド←

→アフィリエイトのFind-A←

→アドワイアーズ←

→アフィリエイトB←
I Love C&A
My Album
Comment
Thanks Mutual Link
Access Thanks☆
アクセスランキングへのご参加は
随時募集中です♪よろしくです(*´∇`*)

Favorite Link
Recommend
Archive
Trackback
Others
TREview



ログスター


あわせて読みたいブログパーツ

SQ Life 木精占い