• かちびと.net

    タイル状に並べられたイメージギャラリーごとドラッグ可能にするmootoolsプラグイン・The Wallのご紹介。動作もわりと軽量でクロスブラウザで動作します。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

タイル状に並べられたイメージギャラリーごとドラッグ可能にするmootoolsプラグイン・The Wall

スポンサーリンク

3連休をいかがお過ごしでしょうか。僕は
全く関係ないので普通に記事を書いて
まいります。タイル状に並べられた画像
ギャラリーをそのままドラッグで動かせる
というmootoolsのプラグイン・The Wall
が結構クールで素敵でした。

なかなか素敵なライブラリですよ。mootoolsのプラグインでIE6や7でも動作してくれました。スマフォのフリックでも動かせましたよ。個人的にはjQueryで欲しかったですけど・・

The Wall


かっこいいですな。名前の通り、画像を並べて壁のようにしてあります。ロゴ部分もドラッグできますよ。


ロゴに使用されているのは「THE MASK」です。透過したロゴの背景にThe Wallを配置し、ドラッグ出来るようにしています。スマフォには対応していません。


デモも結構揃えてくれています。それぞれ実装方法が書いてあるので参考にしてみてください。

IE6や7でも動作


IE6でも動きました。

コード

<script src="mootools-core-1.3.2.js" type="text/javascript" charset="utf-8"></script>
<script src="mootools-more-1.3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript" src="wall.js"></script> 

mootoolsやプラグインを読み込み。

<div id="viewport">
    <div id="wall"></div>
</div>

マークアップはシンプル。
画像は以下の方法で表示させてるみたいです。

window.addEvent("domready", function(){
    var maxLength    = 185;
    var counterFluid = 1;
    var wallFluid = new Wall("wall", {
                    "draggable":true,
                    "invert":true,
                    "width":60,
                    "height":60,
                    "rangex":[-130,130],
                    "rangey":[-130,130],
                    callOnUpdate: function(items){
                        items.each(function(e, i){
                            var a = new Element("img[src=/public/images/small/"+counterFluid+".jpg]");
                                a.inject(e.node);
                            counterFluid++;
                            // Azzera counter
                            if( counterFluid > maxLength ) counterFluid = 1;
                        })
                    }
                });
    // Init Fluid Wall
    wallFluid.initWall();
});

で、画像のファイル名を数字で統一させればいいのかな。(例:/public/images/small/23.jpg)

うーん、どこかで使ってみたい。以下でデモを確認出来ます。

The Wall

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services