忍者ブログ

GAM-22のメモ

忍者ブログで スムーズに画像を拡大する - FancyZoom

2017.10 ← 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 →

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

忍者ブログで スムーズに画像を拡大する - FancyZoom

はじめに

修学旅行で撮影した、金閣

例えば、上の画像をクリックすると、スムーズに画像が拡大されると思います。これはFancyZoomというJavaScriptを使っているからです。

アニメーションや影があったり良い感じです。しかし、これを使うにはルートフォルダに階層を作って、幾つかファイルをアップロードしなくてはなりません。

しかし、私が使っている忍者ブログもそうですが、階層を作ることはできません。だから、ブログのファイルアップロードだけで使えるように、FancyZoomを勝手に改造しました。(まあ、ちょっとの改造です。)

使うまでの手順

  1. FancyZoom_1.1.blog.zipをダウンロードし、解凍します。(3/19日以前にダウンロードした場合、やり直した方が良いです。)

  2. 解凍した中身、27ファイルを全てアップロードします 1.で解凍した27ファイルを全てアップロードします。

  3. テンプレートの編集などで、<head>の中に、次の太字を書き足します。
  4. <head>
    	<script type="text/javascript">var FileDir = 'http://file.' + '<!--$g_user_id-->' + '/';</script>
    	<script src="http://file.<!--$g_user_id-->/FancyZoom.js" type="text/javascript"></script>
    	<script src="http://file.<!--$g_user_id-->/FancyZoomHTML.js" type="text/javascript"></script>
    </head>
    
  5. <body>も、同様に書き足します。
    <body onload="setupZoom();">
    
  6. これだけで完了です。

仕様の変更点.1

ついでに、私が使いやすいように独断と偏見で仕様を変更しました。

オリジナルでは、<a>のtitle属性が、画像の説明として読み込まれます。

<a href="iamge.jpg" title="説明"><img src="thumbnail.jpg" alt="説明" /></a>

しかし、私はリンクにtitle属性を付ける習慣が無いし、忍者ブログは画像にalt属性を付けてくれるので、alt属性から説明を取得するようにしました。

<a href="iamge.jpg"><img src="thumbnail" alt="説明" /></a>

また、画像が複数ある場合、最初の画像からズームインします。

仕様の変更点.2

オリジナルでは、リンク先が画像という条件でプログラムが実行されました。しかし、改造版では、リンク先が画像で、中に<img>があることを条件にしました。

これは、alt属性を付けられるのが<img>だけだからです。

その他の機能

次の機能は、オリジナルに最初からあります。

[shift] + クリック遅くズームイン(アウト)する

<a>を次のようにすると、ズームが無効になります。

<a href="iamge.jpg" rel="nozoom"><img src="thumbnail" alt="説明" /></a>

FAQ

著作権は?
私が勝手に改変しただけなので、著作権はCabel Sasserさんにあります。こんなことすると、再配布で怒られそうです。まあ、気にしないことにします。
記事のプレビューに時間が掛かる
忍者ブログのプレビューモードでは<!--$g_user_id-->が使えないので、jsファイルを読み込めなくなるからです。上の「使うまでの手順」の.3に戻って、自分のブログのファイルのURL直接を指定してください。次は当ブログの例です。
<head>
	<script type="text/javascript">var FileDir = 'http://file.gmr.blog.shinobi.jp/';</script>
	<script src="http://file.gmr.blog.shinobi.jp/FancyZoom.js" type="text/javascript"></script>
	<script src="http://file.gmr.blog.shinobi.jp/FancyZoomHTML.js" type="text/javascript"></script>
</head>

また、忍者ブログじゃないんですけど、という人もURLを直接指定すれば使えると思います。

余談

実は私も最初、FTPサーバーを別にレンタルして使いました。作業が終わった後、もうちょっと弄ればブログでも使えることに気がついてこうなりました。

JavaScriptの勉強の為に遊んだ感じなので、かなり適当です。何かあったら、ツッコミを入れてください。あと、ソースは丁寧にコメントしてありましたが、英語だったので、そこらへんで苦労しました。

画像まで付属させたのは、アップロード時にリネームされなそうなファイル名にリネームしたからです。

3/19 FileUrlは間違ってる気がするので、FileDirにしました。
3/21 Ctrl+クリック とかはFirefoxの機能でした。

PR
この記事にコメントする
お名前
タイトル
文字色
URL
コメント
パスワード Vodafone絵文字 i-mode絵文字 Ezweb絵文字
「alt属性から説明を取得するようにしました」
この部分、移植してもいいでかね?
ていうか中3なのね。おじさんは完全に負けてるじゃないか。
名無しサンさん / 2008/03/18(Tue) / 編集
もちろん
移植していいですよ!
なんと、使っていただけるとは嬉しいです。
ありがとうございます。
いやぁ、記事にした甲斐がありました。

そういえば、デフォルトで「名無しサン」だと「名無しサンさん」になっちゃいますね(笑)。
 (2008/03/19)
ありがとう。GAM-22さん。
たぶん移植完了。

それにしても「いいでかね?」ってなんだよ。
完成したらURL張りにくるかも・・・
hajimeさん / 2008/03/19(Wed) / 編集
Re:感謝!
移植作業、お疲れ様です。
>完成したらURL張りにくるかも・・・
マジですか、ぜひ見たいところです。
 (2008/03/19)
面白くはないHPですが、FancyZoomの一例です。
永遠に未完成なHPだが・・・

レイアウトIE6でも崩れなくなりましたよ。
↑のコメント消してください。
hajimeさんのページhajimeさん / 2008/03/19(Wed) / 編集
これが
噂の、ubuntuですか。
最近では安定して使えて、導入も簡単になったみたいですね(よく知りませんが)。
hajimeさんのHPを見て思ったんですが、3Dデスクトップとか、滅茶苦茶カッコイイじゃないですか! なんか凄いですねぇ。
画像もたくさんでわかりやすいので、ubuntuを使う機会があったら、ぜひ参考にしたいです。

FancyZoomも巧く改造されてますね。原寸大表示とか、しかもShiftで標準表示することもできるんですか。あと、title属性からも説明を取得できるんですか。
後で真似するかもしれません。
 (2008/03/20)
文字列に画像がリンクされてたら、文字列をCaptionにして、ズーム表示ですね。
hajimeさん / 2008/03/20(Thu) / 編集
試してみたら
innerHTML で成功しました。
innerText だとFirefoxでダメでした。
それにしても、良いアイデアなので、使わせてもらいます。

http://gmr.blog.shinobi.jp/Entry/474/
FancyZoom.js、190行目あたりに注目です。
 (2008/03/20)
もう出来てるじゃないですか。
これで仕様は決まったね。
hajimeさん / 2008/03/20(Thu) / 編集
いえいえ
よく考えたら、文字列のとき、ちゃんと幅が取得できないなかったので直しました。HTMLの仕様ですが、文字列のスタイルが、Captionに反映されます。

共同作業(?)で、仕様を練ったので、だいぶ使いやすくなった気がします。感謝です。それにしても、JavaScriptのスキルが上がった気がします。っていうか、JavaScriptって、こんなに高機能だったんですか。驚きました。
 (2008/03/29)
文字列からの拡大開始の幅に対応したのですか、センスいいですね。
自力では出来そうにもないので諦めてましたが、移植させてもらいましたよ。

ご苦労さん、本当にありがとうね。

本家のコメント欄に、
http://www.infernochicago.com/zoomtest.htm
「拡大時にシュリンクされるのは、どうにかならんのか?」と投稿されてますが、怪しすぎる店なんで、知らんふり。
hajimeさん / 2008/03/21(Fri) / 編集
こちらこそ
>「拡大時にシュリンクされるのは、どうにかならんのか?」
ウィンドウのサイズが小さいとなりますけど、画像が読み込めなくて(?)なることが、時々あります。どっちのことなんですかね?

そのですね。今まで付き合っていただき、ありがとうございます。おかげで仕様も、なかなか良いものになった気がします。
かなり仕様が変わったので、FancyZoom第2弾の記事を書こうと思います。
hajimeさんのページの改造方法を取り入れて、原寸大表示や、title属性からも指定できるよう、(最終?)調整してみました。キーの機能は、
ctrl + クリック : スロー再生
shift + クリック : ウィンドウに合わせた拡大
って、感じです。
実は、原寸大表示を標準にするか、まだ迷ってるんですけどね・・・
 (2008/03/22)
FancyZoomを改造していた頃、FancyZoomの作者さんは日本に居たそうです。
Blogに、日本の電車に乗ったときの広告に関する話題を取り上げてます。
コメントが大量に寄せられて、面白かったです。
hajimeさん / 2008/04/14(Mon) / 編集
おぉ!
久しぶりですねぇ。
ほとんとだ。電車の広告がなにやら。
私の英語力は低いので、なんとなくしか話が読めないんですが、コメントの数が凄まじいですね。やっぱり英語は勉強しないとダメですね。hajimeさん、ちょっと羨ましいです。
 (2008/04/14)
こんにちは。
わたしも忍者ブログを使っていて画像をよくのせるのですが、画像が小さく表示されるのでなんとか大きく表示したいと思って、いろいろ検索していたらこちらのサイトにたどりつきました。
ブログにのっていたとおりためしてみたのですが、できません。。。
FancyZoom_1.1.blog.zipをダウンロードして27のファイルをアップロードとありますが、「FancyZoom.js」と「FancyZoomHTML.js」の2つのファイルは画像ファイルじゃないのでアップロードできないとなります。
どうすればアップロードできるのでしょうか?
教えてください。
Hichi7さんのページHichi7さん / 2008/07/24(Thu) / 編集
はじめまして
画像以外のファイルをアップロードする方法ですね。Hichi7さんは、高性能エディタからアップロードしているのだと思いますが、
そうではなく、管理者ページトップ、左のメニューから「ファイルアップロード 」を探してください。ファイルアップロードなら、拡張子に関係なく、500KB以下のファイルなら、どんな種類でもアップロードできます。

何か分らないことがあれば、また気軽に質問してください。
 (2008/07/24)
お返事いただけてありがとうございます。
早速やってみたらアップロードはできましたが画像が大きくなりません。。。

コメントしたFancyZoom.js」と「FancyZoomHTML.js」の2つのファイルはファイルのアップロードからしましたが、それ以外のファイルは高性能エディタでアップロードしました。
その後テンプレートの編集から<head>の次に太字を書き足し、その後<body>は<body onload="setupZoom();">このように加えました。

何か間違っているところはあるのでしょうか?
何度もすみません。教えてください。よろしくお願いします。

Hichi7さんのページHichi7さん / 2008/07/24(Thu) / 編集
何も間違っていないです。
問題なのは、記事の書き方です。

例えば、この記事ではちゃんとズームできています。
http://hichi7.blog.shinobi.jp/Entry/14/

しかし、この記事ではズームできません。
http://hichi7.blog.shinobi.jp/Entry/22/

画像を埋め込む時、元の画像へのリンクを貼らないといけない仕様なんです。
お手数だと思いますが、画像の埋め込みをやり直していただけませんか?
 (2008/07/24)
ありがとうございました!!
できました!
感激です☆
いきなりコメントしたにもかかわらず丁寧に教えていただけて本当にありがとうございました。
とても勉強になる記事を書いていらっしゃるのでまた遊びにきます。
Hichi7さん / 2008/07/25(Fri) / 編集
良かったですね
いえいえ、お役に立てたようで嬉しいです。

>とても勉強になる記事を書いていらっしゃるのでまた遊びにきます。
いやぁ、私なんかまだまだですね。これだって、JavaSprictの勉強の為に弄った感じですからね。いつでも遊びに来てください。
 (2008/07/25)
初めまして。
忍者BLOGにFancy Zoomを導入する方法を検索していましたら、こちらのサイトに辿り着きました。
突然の質問で恐縮ですが、
私のBLOGにもこちらのサイトの記事を参考にしましたら、画像の拡大はできるのですが、
GAM-22さんのようにサムネイル画像から拡大していくのではなく、
画像クリック後、拡大画像が下のほうからでてくる感じになります><;
結果BLOGの下部にどんどん余白できてしまう現象が起きています;s;

何卒ご教授いただければと思います。
よろしくお願いいたします。
Liz (おほう)さんのページLiz (おほう)さん / 2009/04/07(Tue) / 編集
初めまして。
忍者BLOGにFancy Zoomを導入する方法を検索していましたら、こちらのサイトに辿り着きました。
突然の質問で恐縮ですが、
私のBLOGにもこちらのサイトの記事を参考にしましたら、画像の拡大はできるのですが、
GAM-22さんのようにサムネイル画像から拡大していくのではなく、
画像クリック後、拡大画像が下のほうからでてくる感じになります><;
結果BLOGの下部にどんどん余白できてしまう現象が起きています;s;

何卒ご教授いただければと思います。
よろしくお願いいたします。
Liz (おほう)さんのページLiz (おほう)さん / 2009/04/07(Tue) / 編集
Re:初めまして。
コメントありがとうございます。
記事の部分をスクロールした時のみにズレが発生するようなので、画像の座標を上手く取得できてないのが原因のようです。
プログラム側の対応でも、解決は不可能でも無い気がしますが、最も簡単な解決策は、記事が独立してスクロールしないタイプのテンプレートに変更することだと思われます。しかし、テンプレに思い入れがある場合はそうもいきませんね。
…というか、最近プログラム弄りをしていない為に、JavaScriptの文法が怪しくなっています。私の能力的にも、他人が作ったプログラムを思い通りに書き直せるか微妙です。お役に立てなくて、申し訳ないです。
 (2009/04/07)
返信ありがとうございます。
記事部分のブロックをスクロールしないよう、
レイアウトを変えてみる事にします。

Liz (おほう)さん / 2009/04/08(Wed) / 編集
Highslide.js
Highslide.jsを導入されたようですね。
こちらの方が、高機能でズレも発生しないようなので、良さそうですね。
とにかく、解決したようなので、何よりです。

 (2009/04/08)
fancyzoomは以前から使っているのですが、原寸大に拡大できないので、不満がありました。
こちらを参考にしてみたのですが、拡大はされますが、原寸大にはなりません。
どこかをどうにかいじればいいのでしょうか。
無理なのでしょうか。
教えていただければ幸いです。
当方ほぼ素人です。
ぼぶさんのページぼぶさん / 2010/04/30(Fri) / 編集
Re:質問です
コメントありがとうございます。
未検証なので、本当に成功するかは保証できませんが、

http://bob3.up.seesaa.net/media/FancyZoom.js


sizeRatio = endW / endH;
if (endW > myWidth - minBorder) {
endW = myWidth - minBorder;
endH = endW / sizeRatio;
}
if (endH > myHeight - minBorder) {
endH = myHeight - minBorder;
endW = endH * sizeRatio;
}

をコメントアウトしてください。
/* コメントアウトしたい部分 */
のように、/* と */ でコメントアウトしたい部分を囲みます。

私の2年前の記憶が正しければ、上手く行くハズ。成功を祈ります(笑)。
 (2010/04/30)
ありがとうございました!
うまく原寸拡大でるようになりました。

その際なんですが、マウスオンしても×画像が現れないし、拡大しても隅の画像が現れません。
また、影がつかないのですが、この設定はどうなのでしょう。。。
ぼぶさんのページぼぶさん / 2010/05/01(Sat) / 編集
Re:質問2
影がでないのは不思議ですね。
マウスオーバーの(×)は自作改造で作ったものなので、設定のような簡単な手順では無理ですね。
 (2010/05/02)
実はseesaaでもう一つ書いているのですが、こちらでは拡大ができません。
同じようにやっているのですが、なぜだかわかりますでしょうか。
http://bob2nd..seesaa.net
ぼぶさんのページぼぶさん / 2010/05/03(Mon) / 編集
Re:何度もすみません
ソースの書き方は全く問題のないように見えます。
JavaScriptをデバックしたところ、
http://bob2nd.up.seesaa.net/image/FancyZoom.js
を読み込むところでアクセス権エラーになっているので、

<script src="http://bob3.up.seesaa.net/media/FancyZoom.js" type="text/javascript"></script>
<script src="http://bob3.up.seesaa.net/media/FancyZoomHTML.js" type="text/javascript"></script>

のように、一番目のブログから読み込んでみたらどうでしょう?
また、影が出ない理由ですが、画像をアップロードしていないからだと思われます。seesaaブログの仕様を知らないので、たしかなことは言えないですが…
 (2010/05/03)
実はseesaaでもう一つ書いているのですが、こちらでは拡大ができません。
同じようにやっているのですが、なぜだかわかりますでしょうか。
http://bob2nd..seesaa.net
ぼぶさんのページぼぶさん / 2010/05/03(Mon) / 編集
おかげさまで2ndの方でも拡大できました。
ありがとうございました。
ぼぶさんのページぼぶさん / 2010/05/17(Mon) / 編集
Re:ありがとうございました。
いえいえ、どういたしまして。
なぜ
http://bob2nd.up.seesaa.net/image/FancyZoom.js
が読み込めないのか、私もよく分からないのですが、解決して何よりです。
 (2010/05/18)
古い記事のようなのでコメントするの恐縮ですが
この記事のおかげで簡単に導入することができました。
ありがとうございました。
つるてんさんのページつるてんさん / 2011/03/02(Wed) / 編集
Re:簡単にできました
コメントありがとうございます!!
 (2011/03/02)
ふと検索で忍者ブログの画像のことを調べてみたらたどり着いたので。

便利そうだなと思いこちらのブログを見て導入させて頂きました。ありがとうございます!

とおりすがりさん / 2011/10/07(Fri) / 編集
まだ有効なのかな?
忍者ブログ、HPスペース使ってます。
HPでテストしているのですが、同じページに複数の画像があり、縦と横の比率が違います。
すると別の画像をズームしたときに縦横比率が狂って拡大されてしまう感じなのですが、どこか設定がおかしいのでしょうか。その画像をクライアントで保存すると正しいです。お手数かけます。
スコレーさん / 2011/10/14(Fri) / 編集
このページの拡大処理。一回目の動作で、どうも挙動不審なんです。スムーズ処理されなくて、別タブに表示される。
WindowsXP,firefox7.0.1
別のブラウザでも微妙な反応。
拡大されるけど、縦横の比率が違うとか。
拡大されて戻るときにカクカクしたり。
拡大されるとき、ひとつ前の画像が出て、止まる直前に正しい画像になったり。
意味不明の、挙動不審状態。
画面のリロードしてからクリックで拡大すると正しくなる。みたいな感じです。
忍者のHPスペースに置くこと自体が違法なのかも。ですかね。
スコレーさん / 2011/10/19(Wed) / 編集
Check out this crazy service that sends thousands of visitors to your web page automatically!

Hey gmr.blog.shinobi.jp admin

I wanted to tell you about this website I used with great results, that drives thousands of targeted visitors to your site who are dying to spend money!

You’ve probably already know that creating great content is only half the battle when it comes to running a successful website. The second half of the equation is DRIVING TRAFFIC!

With this service, you can forget about the tedious process of posting backlinks because they do everything for you so you can focus on more important things, like dealing with the flood of traffic to your site!

And that’s not all! this service is SUPER AFFORDABLE and will direct thousands of new visitors to your site in just hours, GUARANTEED!

This is the only service that can skyrocket your page to the top of the search engines!

You can check it out here:

<a href=http://xrumerservice.org>backlink service</a>

Best,

Jason
Backlinksさん / 2012/05/13(Sun) / 編集
この記事にトラックバックする
トラックバックURL:
スクリプト導入
忍者ブログ用のスクリプトを見つけたから、導入してみた。 http://gmr.blog.shinobi.jp/Entry/476/ こちらを参考にさせていただきました! で、そのスクリプト。 画像をクリックすると、フラッシュのように拡大されるというもの。 見やすいし、画像拡大に新規ウインドウを開かなくていいのが気に入った! PCから閲覧の際は、画像クリックしてみてくださいねー。...
URL / 2010/04/01(Thu)
カテゴリー
カウンター
最新記事
最新コメント
Twitter
人気記事
Amazon お買い得情報
Amazon お買い得情報
プロフィール
自画像
HN :
GAM-22
性別:
男性
職業:
大学1年生
HSP暦:
6年
好きなもの :
ゲーム, アニメ, マヨネーズ
嫌いなもの :
運動, 注射, ホラー映画, 英語
好きなバンド :
Muse, Radiohead
その他 :
文章能力が欠如している
バナー
Copyright © GAM-22のメモ All Rights Reserved
Powered by ニンジャブログ Designed by ピンキー・ローン・ピッグ 忍者ブログ / [PR]