画像を部分的に拡大表示「Cloud Zoom」(jQuery)

2015年7月 追記
「Cloud Zoom」は現在有料化されており、ここで紹介しているものは無料では使えなくなっています。


jQueryを使った画像の表示でお気に入りを見つけたので、備忘録として。


画像にカーソルを合わせるだけで、その部分がズームして表示されます。
画像の上にマウスを置いてみてください。
(scriptの読み込みに時間がかかる場合があります。読み込んでいない場合はうまく表示されませんのでしばらく時間をおいてからマウスを置いて下さい。)

ダウンロード先→「Proffesor Cloud "Cloud Zoom"」

ダウンロードした「cloud-zoom.css」をアップロードする。

ダウンロードした「cloud-zoom.1.0.2.js」を開き、下記を付け加えてアップロード。
*FC2では「.(ドット)」のついた名前のファイルはアップロードできないので適宜名前を変更しておく。

var cs = document.createElement("link");
cs.rel="stylesheet";
cs.href="http://blog-imgs-47.fc2.com/cloud-zoom.css";
cs.type="text/css";
document.getElementsByTagName('head')[0].appendChild(cs);
http://blog-imgs-47.fc2.com/cloud-zoom.css部分は「cloud-zoom.css」をアップロードしたURL。

head内にダウンロードした「jquery.js」と「cloud-zoom.1.0.2.js」を記入。
*すでに「jquery.js」本体が使える状態の場合は記入不要。

<script type="text/javascript" src="http://blog-imgs-48.fc2.com/jquery.js"></script>
<script type="text/javascript" src="http://blog-imgs-48.fc2.com/cloud-zoom.js"></script>




Standard

<a href='http://blog-imgs-32-origin.fc2.com/s/a/k/sakuraxren/09071201-800.jpg'  class = 'cloud-zoom' rel="adjustX: 10, adjustY:-4"><img src="http://blog-imgs-32-origin.fc2.com/s/a/k/sakuraxren/09071201-800s.jpg" alt='' width="300" height="225" title="[Cloud Zoom] standard 「白鳥城」" /></a>

赤字→ズーム側で表示される画像のURL
青字→ズーム表示するために必要な表示
緑字→ズームが表示されるウィンドウの位置(X横方向、Y縦方向)
ピンク字→縮小画像側で表示される画像のURL
茶色字→ズーム側画像のタイトル(説明文)

Tint 1 
     (縮小側とズーム側のウィンドウの大きさが同じ場合)
<a href='http://blog-imgs-32-origin.fc2.com/s/a/k/sakuraxren/09071201-800.jpg' class = 'cloud-zoom' rel="tint: '#ff0000',tintOpacity:0.3 ,smoothMove:5, adjustY:-4, adjustX:10"><img src="http://blog-imgs-32-origin.fc2.com/s/a/k/sakuraxren/09071201-800s.jpg" alt='' title="[Cloud Zoom] tint  「白鳥城」" /></a>

赤字→ズーム側で表示される画像のURL
青字→ズーム表示するために必要な表示
緑字→ズームが表示されるウィンドウの詳細
  「tint」→透明の色をのせる場合
  「#ff0000」→透明の色のカラーコード(ここでは赤)
  「tintOpacity」→透明の色の透明度
  「smoothMove」→ズーム時の移動距離
  「adjustX:10」「adjustY:-4」→ズームが表示されるウィンドウの位置(X横方向、Y縦方向)
ピンク字→縮小画像側で表示される画像のURL
茶色字→ズーム側画像のタイトル(説明文)

Tint 2 
     (ズーム側の幅を任意で決める場合)
<a href='http://blog-imgs-32-origin.fc2.com/s/a/k/sakuraxren/09071201-800.jpg' class = 'cloud-zoom' rel="tint: '#000000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10"><img src="http://blog-imgs-32-origin.fc2.com/s/a/k/sakuraxren/09071201-800s.jpg" alt='' title="[Cloud Zoom] tint 「白鳥城」" /></a>

赤字→ズーム側で表示される画像のURL
青字→ズーム表示するために必要な表示
緑字→ズームが表示されるウィンドウの詳細
  「tint」→透明の色をのせる場合
  「#000000」→透明の色のカラーコード(ここでは黒)
  「tintOpacity」→透明の色の透明度
  「smoothMove」→ズーム時の移動距離
  「zoomWidth」→ズームが表示されるウィンドウの幅
  「adjustX:10」「adjustY:-4」→ズームが表示されるウィンドウの位置(X横方向、Y縦方向)
ピンク字→縮小画像側で表示される画像のURL
茶色字→ズーム側画像のタイトル(説明文)

Soft Focus
    (ズーム側のウィンドウを任意の場所に設置する場合)
<a href='http://blog-imgs-32-origin.fc2.com/s/a/k/sakuraxren/09071201-800.jpg' class = 'cloud-zoom' title="[Cloud Zoom] soft focus 「白鳥城」" rel="softFocus: true, position:'anypos', smoothMove:2"><img src="http://blog-imgs-32-origin.fc2.com/s/a/k/sakuraxren/09071201-800s.jpg" alt='' /></a>
<div class="zoom-desc" style="position:relative">
<div id="anypos" style="position:absolute;top:-300px; left:400px; width:256px; height:256px;"></div></div>

赤字→ズーム側で表示される画像のURL
青字→ズーム表示するために必要な表示
緑字→ズームが表示されるウィンドウの詳細
  「softFocus」→ソフトフォーカスにする場合
  「position:'anypos'」→ズーム側のウィンドウを任意の場所に設置する場合の表示
  「smoothMove」→ズーム時の移動距離
ピンク字→縮小画像側で表示される画像のURL
茶色字→ズーム側画像のタイトル(説明文)
太字→任意の場所の数値

Inside
     (元のウィンドウにズーム側の表示させる場合)
<a href='http://blog-imgs-32-origin.fc2.com/s/a/k/sakuraxren/09071201-800.jpg' class = 'cloud-zoom' rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4"><img src="http://blog-imgs-32-origin.fc2.com/s/a/k/sakuraxren/09071201-800.jpg" alt='' width="400" height="300"title="[Cloud Zoom] inside 「白鳥城」" /></a>

赤字→ズーム側で表示される画像のURL
青字→ズーム表示するために必要な表示
緑字→ズームが表示されるウィンドウの詳細
  「position: 'inside'」→同じウィンドウ内に表示させる場合
  「showTitle: false」→タイトルがあっても表示させない場合
ピンク字→縮小画像側で表示される画像のURL


関連記事

コメントの投稿

うはは~、これ面白いですね!
私には難しそうですが…。(^_^;)
れんさんは、いつも何でも挑戦してらして、感心しています。
私はヘタに触ると、とんでもない事になりそうで、あまり手が出せません。 
結果一向に上達しないのでありました。(笑)

すごいとしかいいようがないです!
ただただ驚きっぱなし Σ( ̄□ ̄;)

kojika様

こんにちは。

jQueryを使うと楽しいものが比較的簡単に作れるので、現在興味津々です!

しばらく時間が開いてしまうと、どうやって使うのか自分自身が忘れてしまうのでこうやって書き留めています。
で、自分がよく分かるようになるべく詳しく書いているつもりですが、書いているとややこしくなってしまって……(^^ゞ

kojikaさん、ブログ始められたら、ぜひ招待してくださいね!

かりん様

わ~い♪
かりんさんだぁ~♪
すっかりご無沙汰してしまい申し訳ありませんm(__)m

うれしいお言葉ありがとうございます♪
最近jQuery見てると楽しくって(#^.^#)
理解できるものと理解できないものがあって、まだまだなんですけど、興味があってわかるものはこうやって備忘録として書き留めていくようにしています。

これからもお付き合いくださいね~。
コメントありがとうございましたm(__)m

jQuery

れんさん こんにちは。
親切丁寧でわかりやすく、楽しく嬉しいサイト~♪
また参考にさせていただきました、ありがとうございます。


▽よかったら見てやってくださいな。
http://soyokaze1947.blog23.fc2.com/blog-entry-306.html


ふーこ様

わーい♪ ふーこさんだぁ~(*^^*)

早速拝見してきました!
さすがはふーこさん!
拡大側の画像にも一手間かけられてて、いい感じ♪

私はFlashが使えません。
だけどFlashのようななめらかな動きが好きです。
Flashを使ったようなjQueryはとても興味津々!

新記事で、別のjQueryのスライドショーを上げておきました。
またご覧いただけるとううれしく思います。

コメントありがとうございましたm(_ _)m
**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

-

管理人の承認後に表示されます
プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 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
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ