featuredzoomer で画像表現を考えてみる 【前編】

1234565482_thyme.gif  「 Free JavaScript 」で Google 検索する_と、検索トップページに表示される「 Dynamic Drive DHTML(dynamic html) & JavaScript code ..._ 」ですが、数ある FREE スクリプトから、今回は「 Dynamic Drive DHTML Scripts- Featured Image Zoomer_ 」を改造して利用してみる。 駄目?(笑)

Featured Image Zoomer
の特徴:

 余計に判り難くしたら済みません。 配布元はデモ画面内臓ですので、実際に利用すれば「百聞は一見にしかず」、機能が解り易いです。 本ブログ記事でも「理論だけの紹介記事」では決してなくて、以下に実際に稼働するデモがあります。 ここをクリック_して実際に見てみましょうか(笑)
  1. 3つの画像を上手に扱い、画像の一部を拡大表示させる
    1. 非常に小さな画像を任意の個数並べる
    2. 非常に小さな画像をクリックすると中サイズの参照用画像を受信して表示する
    3. 参照用画像上にマウスを当てると、その時に初めてオリジナル大容量画像の受信を開始する。 受信後に拡大表示する
       マウスのホイールでより大きく拡大表示可能
  2. 3ステップで通信を担う。
  3. 以上の表現をグループ化して、任意の数のグループを1ページで扱える
birne_e0.gif

【考察】:

※ わたしの場合
  1. 全てのブログ記事で使おうとは思えない
  2. よって、記事内で定義して
  3. 限定記事内で利用する
  4. 複数のグループを関数で簡単に呼び出す

グループ生成関数

以上の関数を配布サイトで入手できる「 multizoom.js 」に独自に埋め込みました。
birne_e0.gif

関数を呼び出す前の配列を定義する

上の例では:
  1. 4つのグループを自動的に準備します。
     4つ全てを使う必要はありません。 あくまでも4つの記憶空間を準備したに過ぎません。 毎度利用するグループの数の上限を決めたなら、上の例の配列を任意に追加し、毎回、同じ配列を呼び出すのも手です。 上の例では4つですので、1つの記事で「最大3つまでのグループ」しか表現できません。 くどいようですが、1つの記事で例えば10グループを扱うなら、配列の行を10行定義すれば良いだけです。 配列数は20になります。 2つの変数がワンセットです。 スタイルシートの最下段に「 description 」の定義があります!
  2. この配列定義は、わたしが毎度利用する文法です。
     配列を積み木のように任意に追加できる配列定義です。
     別の行で、または別の JavaScript ファイルで、1行目の if( から、最後までをコピーして積み木利用します。 注意して見て下さい。 変数名に「_」(アンダースコア文字)があります。 「 .concat 」は配列間の接続です。
配列定義が完了したら以下の関数呼び出しを実行します

birne_e0.gif

実際に利用してみましょう

zoomable
Featured Image Zoomer サンプル
_______

※ この Free JavaScript のメリットの1つは、この記事の例でも確認できます様に、ブログの右側のサイド・コンテンツのレイアウトに関係なく、拡大用の画像を表示するところです!
 左の実例では「1グループ」だけの表現です。 1グループ内に表示させる画像の数は任意です。 たまたま時間の関係で7画像です。(1画像は隠れています 笑;) それにしても「わははは」、かなり端折りました。 これでは、不親切! 時間の関係と、わたし独特の「石橋を叩いて渡る!」と、「加齢による痴呆脳による疲労」によって、今回はここまでとします。 次回は、大中小の画像のURLとコメントを入力して「コピペ」するだけで、誰でも左の様な画像表現が出来るカラクリを解説しようと息巻いて置きます。(笑)


応 用

  • ゲーム解説
     攻略マップの紹介にどうでしょうか?
  • 旅行記
     マップや陶磁器写真の紹介にどうでしょうか?
  • 同窓会
     マップや集合写真の紹介にどうでしょうか?
※ みなさんのアイデア次第で、ページを軽快に表示完了させて、高画質でピントがバッチリの大容量写真の拡大にどうですか?!

birne_e0.gif
以下は
「ブログ記事内に高速表示カラクリ空間を設置するには」
に関するステップ・リンクです。
今回は脱線していますね。(笑) 小休止と言うのか、息継ぎと言うのか、回り道と言いますか、「こんなのもあるんだあ~」的にご紹介しました。 大筋の「素早くページの表示を完了する」と「大容量オリジナル画像も訪問者の判断で扱える」を両立させると言う意味で、外してはいないだろうと考えています。(笑)