<< 起きて買い物に行ったんだけど… | main | 【改訂5】ソフトバンクで着うたの作り方(主にSHARP用) >>
JUGEMでFancyZoomを使うには
この記事は2010/03/16の記事です。
ちなみに今回は日記ではないので、小難しい話を聞くとあくびが出る方は次回にご期待下さい。


【注意】
あれからいろいろやってみたところ、Amazonへのアフェリエイトリンクが入った記事が間にあると正常に作動しないようです。
他のサイト様を参考に「addonload.js」を入れてみたりしましたが改善せず。


下記の手順で改善しました。



2013年03月05日修正
何もわかってなかった…こういうことか?



2012年10月16日 改訂
bodyからのonloadからwindow.onloadに修正(ようやく意味がわかった理解力ない管理人であった…)






FancyZoomとは。
最近よく見かける画像がスーッっと拡大する機能です。以前から搭載しようと思ってその場の勢いで試行錯誤して搭載したものの、テンプレートを変更したら動かなくなっている事に気がつかなかった。




いかがでしょう?ちゃんと拡大したかな?
以前から「使いたいな〜」って思ってたんですけど、これって欠点があるんですよ。それは、拡大するようにきちんと写真1枚ずつ拡大するオプションを書き込まないといけないんです。だからこの機能を搭載した以前の画像は、日記を1つずつ書きなおさないと拡大してくれません。

でもFancyZoomというヤツは違いました。一度セットしてしまえば、あとは何もしなくても画像なら勝手にスーッってしてくれるんです!スーッって!(ここ強調!)

んで、いろんなサイトを見たんですが、元ネタはGIGAZINEさんのこちら。

スムーズに画像を拡大するかなり導入が簡単なJavaScript「FancyZoom」

ね?簡単そうに書いてあるでしょ?だから「これなら寝る前に出来るか?」と思ってやってみたんだけど…これが大変だった(;´Д`)


前置きはこれぐらいで。
具体的にJUGEMではどういう風に設定すればいいのかを書きます。


1)FancyZoomの本体ファイルをダウンロードする
他のサイトを見たり調べた方は配布元のサイトをすでにごらん頂いたと思いますが、これはJUGEMでは使えません。
では何故ダメなのか?下記の画像を御覧ください。



画像を拡大した時には、画像左上に「×」ボタンが本来表示されるのですが、このボタンアイコンが出てこないのです。
そこで、私の方で一部いじった設定ファイルがあるのでそちらをダウンロードしてください。

ブログ用FancyZoomのダウンロード



解凍すると下記のようなフォルダが展開されるはず。




一番下のオリジナルは必要ありませんので削除してOK。




2)ファイルのURLを自分の環境に書き換える
さて、ダウンロードしたファイルの中にある

FancyZoom.js

のファイルをワードパッド(もしくは一太郎、Wordなど)で開きます。
この時、メモ帳で開くと正しく内容が見られません(改行されずに羅列されてしまう)ので、ワープロソフトやワードパッド(アクセサリの中にあります)で開くと、きちんと見ることができます。

中を見ると、44行目ぐらいのあたりに、赤枠で囲ったような行が見られるはずです。




この2行をご自身の環境に書き換えます。
JUGEMの場合


var zoomImagesURI   = 'http://img-cdn.jg.jugem.jp/a84/40078/'

こちらには、拡大したい画像が配置されている場所となります。JUGEMさんの場合なら、私のアカウントyqg06172を、ご自身のブログで使用しているアドレスに書き換えるだけです。

var zoomWindowsURI = 'http://homepage3.nifty.com/yqg06172/js-global/zoom/'

これは、拡大した時に表示されるボタンアイコンなどが表示されます。先ほどダウンロードしたファイルの中に入っていた「zoom」フォルダをアップロードした場所を指定します。
分からない場合はいじらなくてOKです(私がniftyを退会するまでは使えるはず(大汗;; )

書き換えが終わったら、上書き保存してOKです。




3) ファイルをアップロードする
あとは

zoom(フォルダ、中の25個のアイコンファイルと一緒)
addonload.js
FancyZoom.js
fancyZoomHTML.js

の4つを、ご自分の使用しているサーバーやホームページアカウントなどにアップロードしてください。





4)JUGEMのテンプレートを書き換える


さて、ここまでくればもう一息です。
あとはテンプレートを書き換えれば、過去の記事も含めて拡大機能が使えるはずです。

まず自分が使用しているテンプレートの編集画面を開き、HTML文に呼び出す文章を書き加えます。
※このとき、自信がない方は必ず自分のテンプレートを複製しておいてください。




書き加えるのは

<script type="text/javascript" src="http://homepage3.nifty.com/yqg06172/js-global2/addonload.js"></script>
   
<!-- FancyZoom JS --> 
<script type="text/javascript" src="http://homepage3.nifty.com/yqg06172/js-global2/FancyZoom.js" ></script>
<script type="text/javascript" src="http://homepage3.nifty.com/yqg06172/js-global2/FancyZoomHTML.js" ></script>

<script type="text/javascript"> addOnloadEvent(function() {setupZoom();}); </script>


という感じ。
もちろんURLは、自分が設置したサーバーのURLに書き換えてください。このままではダメですよ?




あとは更新ボタンを押してくれれば作業は完了です。



〜ちなみに〜

すでにテンプレートで何か別のJavascriptが使用されていたりした場合、テンプレートによっては正常に作動しない事があるようです(Javascriptがバッティングするらしい)。例にもれずJUGEMもFancyZoomだけではうまく作動しませんでした。
addonload.jsは、下記の記事を参考にしました。
詳しくはこちらのBlogを御覧下さい。

http://lets-customize.seesaa.net/article/101533572.html


| パソコン関連メモ | 22:22 | comments(10) | trackbacks(0) | -
スポンサーサイト
| - | 22:22 | - | - | -
コメント
はじめまして、seesaaでFancyZoomを導入したくて
こちらを参考にさせて頂いています。
なかなか上手くいかずに、
まだ完全に成功してないのですが、頑張っています。

質問なのですが、44行目あたりの記述で
var zoomImagesURI とURI になっているのですが
これはURLではなくて、URIでいいんですか?

こういうのに詳しくないので、よく分からずに
あれ?と思ってしまったので、書き込みさせていただきました。
このままでいいのだったらすみませんm(_ _)m
| そらまめ | 2011/02/17 6:26 AM |
>>そらまめさん


こんにちは。新しいメガネを手に入れた@ぎゅわんです。

URIで合ってます。
厳密に言えば(これは変数なので)URLでもOKなんです。ただ、このJavaScript内の記述が全部URIという名前なので、それに合わせるためにURIにしています。
URLにする場合は、プログラム内すべてのURIをURLに変更してください(できれば変更しないほうがいいでしょう。)


少し追記しておきます。
FancyZoomを導入する場合、全部で3つの工程があります

1)プログラム本体の中身を書き換える
2)自分のサーバー(契約しているプロバイダ?)に配置する
3)ブログ(JUGEM、SeeSaaなど)のHTML文を書き換える

という3工程です。
そして(1)の書き換える内容には

1)拡大したい画像が配置されているURL
2)拡大した画像に飾るボタン(画像左上の×ボタンなど)を配置したURL

の2種類が必要になります。
本来FancyZoomはブログ用に出来ていませんので、飾りボタンと拡大したい画像を同じサーバーに(ファイル名を変更せずに)配置することを目的としてプログラムが出来ています。

しかし、ブログではそうはいきません。JUGEMなど大抵の場合は、画像をサーバーに上げるとファイル名が変わってしまいますので正常に動作しません。

そこで私は、飾りボタンを別URLとしてプログラム内に記述することで、JUGEMなどのブログでも動作するように一部を改変しました。

ひとまずは、ご自身の画像URLだけを書き換えてサーバーにアップしてみてください。ブログのHTML文が正しければ、それだけで画像の拡大ができると思います。

不明な点などございましたらコメントください。
ではでは(´∀`*)ノシ バイバイ
| 管理人@ぎゅわん | 2011/02/17 1:53 PM |
早速お返事ありがとうございました。
URIでいいんですね。安心しました。

それから、jsの中の記述は、
自分のブログのURLだけ変えてやってみたのですが
出来ませんでした。

fancyzoom.jsとHTMLとzoom画像を私のブログの方にも
アップロードしましたが、seesaaaは
zoomのファイル毎はアップできないので
一つ一つアップロードしました。

カスタマイズの知識も、まだあまりないので、
もう少し調べてやってみようと思います。
ありがとうございました。m(_ _)m
| そらまめ | 2011/02/18 3:51 AM |
>>そらまめさん


管理人@ぎゅわんです。

Seesaaのアカウントはずいぶん前に使っていたのがあったのでテストしてみたのですが、うまく動きませんね…。条件は間違いないハズなのに…。
何か進展がありましたら記事に追記します。

お役に立てず申し訳ございません。
| 管理人@ぎゅわん | 2011/02/18 10:45 PM |
いえいえ、テストまでして頂いてありがとうございました。
また、時々見に来ますね。

まだ未解決ですが、頑張って調べたいと思います。
お騒がせしました。m(_ _)m

| そらまめ | 2011/02/19 12:37 AM |
ぎゅわんさん、こんばんは。
その後、導入に成功しました。

拡大表示は出来ていたのですが、
影やボタンがつかなかったのですが、
調べたら、fancyzoom.jsとHTMLの中の
ズームイメージ(ボタンやスピン)の最初のファイルネームと
seesaaにアップしたディレクトリとファイルネームが違っていました。
fancyzoom.jsとHTMLのファイルネームを全部直したら、動作しました。

やっと設置できてホッとしています。
ありがとうございました。
| そらまめ | 2011/02/22 1:48 AM |
>>そらまめさん

こんにちは。うつ病@ぎゅわんです。
無事動いたんですね!おめでとうございます( ´∀`)

未確認なのですが、どうもSeesaaは外部のサーバーに画像を読みに行くことができないのではないか?と思います。
なので、×ボタンなどをSeesaaのサーバーにアップして、HTML.jsの中にある画像ファイル名を書き換えれば表示できるのではないか?と推察します。

まぁ、なんにしてもこれで画像が「スーッ!」って動くんですね!きもちいですよね。

今回は何のお役にも立てず申し訳ありませんでした。
ではでは(´∀`*)ノシ バイバイ
| 管理人@ぎゅわん | 2011/02/22 1:29 PM |
はじめまして!レナともうします。
他のblogさんで紹介されていた方法ではJUGEMで使用出来なかったもので悲しんでいたところ、たまたまこちらのブログを発見しました。
試行錯誤のすえ...どうにか設置できました!とても嬉しいです!!!
感謝しております♪
わかりやすい解説ありがとうございました。
| れな | 2012/09/23 1:11 PM |
連続投稿すみません。
ひとつ質問してもよろしいでしょうか?分かるようでしたら教えていただきたいのですが、
拡大画像は画面中央に表示されますが、これを少し右に寄せたりということは出来るのでしょうか?
たとえば左から70%、上下はCenter・・・という感じです。
自分で見てみたのですがひとつでもいじるとくずれそうな感じだったので、もしご存知でしたら教えていただけると嬉しいです。
| れな | 2012/09/23 2:32 PM |
>>れなさん


こんにちは。ぎゅわんです。
設置できたようで何よりです。

えーっと、画像の位置ですが、調整するにはJavaScriptの中を書き換えないとダメですね(´・ω・`)私にはできません。

お力になれずもうしわけございません。
| 管理人@ぎゅわん | 2012/09/23 2:58 PM |
コメントする









この記事のトラックバックURL
http://yqg06172.jugem.cc/trackback/1492
トラックバック
Amazon
ネギ、振ってます
SEARCH THIS SITE.

SELECTED ENTRIES
RECENT COMMENT
RECENT TRACKBACK
PROFILE
OTHERS
無料ブログ作成サービス JUGEM
SPONSORED LINKS