JavaScript/画像のある部分をクリックすると他の画像にチェンジするライブラリ http://www.ark-web.jp/sandbox/wiki/9554.html

[edit]

概要

とてもお久しぶりです。竹村です。

2007年の話ですが、当時「つくるぶ ガイドブログ」というブログのJavaScript担当をしていました。
現在は閉鎖してしまっていますが、記事は直リンクで見ることが可能です。

その際に、第1回目に書いた記事 「Zooomr」の「写真の上に別の写真のレイヤーを配置する」部分をクラスライブラリ化してみました
のサンプルが消えてしまっているのを確認しまして^^; 当時は prototype.js を利用した実装を書いていたのですが、
ちょっと jQuery で実装しなおしてみました!

[edit]

Zooomrについての補足

※記事中のZooomrのリンクが切れているっぽいのですが、Zooomr自体はまだ存在しているようです。
ただ、現在では普通のフォトストレージ的なサービスになっているようです。

写真上に別の写真を配置して、クリックでそれを表示するようなUIは↓この記事のビデオで当時の挙動が確認できると思います。
Zooomr、写真にズーム可能な機能スタート

[edit]

動作説明

基本的に実装方針は記事に書いてあった通りです。
『1.背景画像レイヤー』の上に『2.穴レイヤー』があって、そこから『3.穴レイヤー内の画像レイヤー』がのぞいている形です。

とりあえず、動くサンプルをどうぞ。

http://okra.ark-web.jp/~takemura/public/js/crosslayer/index2.html
sample.png

  1. 写真の上に赤枠のがあり、マウスホバーで中の写真レイヤーがグリグリ動きます。
  2. クリックで別の写真に画面遷移…は、しないで該当写真を前面に表示するUIにしてあります。
  3. 表示したら、次のデータに基いて『2.穴レイヤー』と『3.穴レイヤー内の画像レイヤー』を更新します。
[edit]

使い方

サンプル内に書いたように最低限↓コレだけで動きます。

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/crosslayer.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#crosslayer').crosslayer({
		layerDataFile : "jsonLayerData.txt"
	});
});
</script>

:中略

<ul id="crosslayer">
<li>
<div style="position: relative; width: 320px; height: 320px;" class="back-image">
<img src="samples/img01.jpg" height="320" width="320">
<!-- #back-image --></div>

<h3>画像の詳細説明</h3>
<div class="description"></div>
</li>
<li>
<div style="position: relative; width: 320px; height: 320px;" class="back-image">
<img src="samples/img02.jpg" height="320" width="320">
<!-- #back-image --></div>

<h3>画像の詳細説明</h3>
<div class="description"></div>
</li>
<li>
略
</li>
<li>
略
</li>
<li>
略
</li>
<li>
略
</li>
<li>
略
</li>
<!-- #back-image --></div>

あとは、layerDataFileオプションに渡している jsonLayerData.txt というファイルにデータを用意するだけです。
json形式は、サンプルに書いてある内容をご覧ください。

上記のHTML部分を見ていただくと分かるように、JavaScriptがオフになっている場合でも
画像一覧自体は見られるようにしておくようにしました。JavaScript的には一番初めの<li>の
内容があれば動くようにはなってます。

[edit]

コード配布

ソースは、githubで公開しました。
ライセンスは、MIT License です。

画像のある部分をクリックすると他の画像にチェンジするJavaScriptのjQuery用ライブラリ
https://github.com/tiadeen2/crosslayer

[edit]

利用シーン

このUIを使う例としては、アクセスマップで行き方の説明をするときにメイン写真の先に次の写真が見えてて、クリックするとそこまで進む。
クリックし続けることで会社につく…という使い方があります。

そこにもう少し機能を追加して、↓こんな提案も面白そうです。

Googleのストリートビュー+αみたいな使い方もできそうですね。

[edit]

最後に

つくるぶで書いたその他の記事一覧は↓こちらから見られます。
JavaScript/つくるぶ記事一覧

2007年〜2008年のネタですが、よろしければご覧ください m(_ _)m

投稿者竹村 | パーマリンク

| append.gif

tag:JavaScript, jQuery


添付ファイル: filesample.png 360件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-09-04 (火) 14:27:26 (1844d)

アークウェブのサービスやソリューションはこちら