AllMy.Blog.So-net.ne.jp

「必要なのはコピペ！ あなたのブログ用にもあの有名サイトで利用している画像表現を自動生成してみる featuredzoomer【後編】」で「グループ数：１」で１６枚指定で作成しました。　featuredzoomer 開発者の頭脳明晰さには脱帽します。　今回はガイダンス画像の周辺にサムネイル極小画像を配置しました。　HTML標準の「 A 」タグで実現していますので、「 A 」タグ内の情報は画像でなくても良い訳です。　それでも、文字よりは画像の方が数倍、訴求効果が高いですね。　医学の世界で様々な高密度画像を拡大したいページにはうってつけ。　美術・芸術の世界でも一部の画像の拡大表示は有効ですね。　拡大してみると新たなメッセージを発見できます。（微笑）　商品解説ページでも様々な特徴を少ないページ領域で発信できますね。　画像のタイトルをリンク化出来ますから、アフィリエイトなリンクにも飛ばせる。。。（笑）

Apple iOS や Google Android のみなさんは、デザインが崩れますので、ここをタップして、PC版モード選択をお願い致します

---

　今回の画像は、わたしの「SONY製の3Dデジタルカメラ」で撮影しましたが、設定をミスして、画像サイズが小さくて粗いです。　済みません！

---

このブログページは素直に、遠隔 JavaScript ファイルは利用していませんので、ソース閲覧可能です。

---

Featured Image Zoomer サンプル

ここからはリンク文字での運用です。 ※ みなさん訪問ありがとうございます。　周囲に並んだ小さな画像や上のリンク文字をクリックすると、中央の画像が切り替わります。　次に中央の画像にマウスを移動させてみてください。　少し受信に時間が掛かるかも知れませんが、右に拡大された画像を表示します。　マウスのホイールを回転させると・・・・拡大・縮小できます。　お楽しみ下さい。 グループ[ 1 ] ここに記事を書きます。
※ サイド・コンテンツが、右配置の場合に、良さそうですね。
《小技》：　望遠鏡の様に拡大表示される矩形のサイズの初期値は、multizoom-min.js 内の関数「SetUpJqImg2015(){}」で定義されています。　初期値は 400x300 です。　ブログのテンプレート（スキン）によっては、もっと大きくても大丈夫な場合がありますし、縦長ガイダンス画像と横長ガイダンス画像によっても、微妙に表示サイズを変更したい場合もあるでしょう。　２箇所の指定によって大きくも小さくも可能です。

1. 全体を変更する場合：
   埋め込む記事内で、関数「 SetUpJqImg2015() 」呼び出し文が、直上で一箇所 <script> と </script> に囲まれて指定され、一回だけ呼び出している訳ですが、そこにサイズの数字を指定します。　例として 500x350 にしたければ、関数呼び出し時に「 SetUpJqImg2015(500,350) 」に変更します。
2. 画像個別で変更したい場合：
   ａタグの中に「data-magsize=」を指定します。　例として、ある特定の画像を表示させたいサイズを 250x250 にしたければ、 <a data-magsize="250,250" ・・・ の青色文字を ａタグ内に挿入します。

　但し、無闇に大きくすると、マウスを動かした場合に、リアルタイムに動かない可能性があります。　あなたさまのPCが高性能であっても、訪問者の中には処理能力の低いPCがあって、処理性能が高くない場合、滑らかさが犠牲となり、美しくない結果を生み、訪問者から敬遠されるかも知れません。　参照する画像のサイズも大きくて、尚且つレゾリューション(密度)が高い(濃い)場合は、表示サイズを小さ目にするべきです。　適度が求められます！（笑）
　最大拡大倍率を規制できます。カメラによって作成されるオリジナルの密度は高いですが、インターネット用として加工すると密度は一気に落とされます。例えば WinPC用なら 72pix/inch にまで密度を落としてしまいます。　拡大対象の画像密度が粗ければ、最大拡大倍率を無闇に上げると・・・最初の印象に反して拡大すると落胆させる結果となります。　初期値は３倍から２０倍にしています。　記事全体への最大倍率と写真それぞれの最大拡大倍率を規制することが可能です。

• 全体を規制したい場合：
  例として、拡大領域を 300x200 として、最大倍率を１０倍までに規制したい場合：１記事に１度だけ指定する関数呼び出し時に「 SetUpJqImg2015(300,200,10) 」に変更します。
• 個々の写真に対して個別に規制したい場合：
  例として５倍から３０倍迄許可したいのなら（笑）　画像を引用する Ａ タグ内にdata-zoomrange="5,30"の構文を挿入します。

自動生成プロセッサー Ver2.22.8 2014/10/16 3:10 p.m.版