Happy Programming

上から落ちてきてバウンドして止まる写真

beanz (2009年7月10日 10:39) | コメント(0) | トラックバック(0)

サムネイルをクリックしたら拡大画像が表示されるというJavascriptライブラリには有名な所で'Lightbox'や'highslide'がある。
それぞれのサイトではデモも見られるし、ダウンロードして自分で使う事も出来る。
http://highslide.com/
http://www.huddletogether.com/projects/lightbox2/#download
いろんなサイトでも紹介されている。

もっと簡単なのをちょっと自分でも書いてみた。（例によってPrototype.jsを使用）

var DropPhoto = Class.create({
    initialize: function(elem) {
        this.elem = elem;
        var that = this;
        this.timeId
        this.elem.observe('click', function(event) {
            if ($('shadowWrapper')) that.fadeOut($('shadowWrapper'));
            var largeSrc = event.element().src.gsub('small', 'large');
            var largeImage = new Image();
            largeImage.src = largeSrc;
            Element.addClassName(largeImage, 'large');
            largeImage.setStyle({display: 'none'});
            $$('body')[0].insert(largeImage);
            var f = function() {
                var container = new ShadowApply(largeImage);
                container = container.shadowWrapper;
                largeImage.setStyle({display: 'block'});
                if (that.timeId) clearInterval(that.timeId);
                var centerX = document.viewport.getWidth() / 2 - parseInt(container.getWidth()) / 2;
                var centerY = document.viewport.getHeight() / 2 + document.viewport.getScrollOffsets()[1] - container.getHeight() / 2;
                var vy = 10;
                var gravitation = 3;
                var bounce = -0.6;
                var currentTop = -parseInt(container.getHeight()) + document.viewport.getScrollOffsets()[1];
                var prevTop;
                var counter;
                container.setStyle({
                    top: currentTop + 'px',
                    left: centerX + 'px',
                    cursor: 'move'
                });
                that.timeId = setInterval(function() {
                    prevTop = currentTop;
                    vy += gravitation;
                    currentTop += vy;
                    if (currentTop > centerY) {
                        currentTop = centerY;
                        vy *= bounce;
                    }
                    if (prevTop == currentTop) counter++;
                    else counter = 0;
                    if (counter > 10) clearInterval(that.timeId);
                    container.setStyle({top: currentTop + 'px'});
                }, 15);
                that.dragDrop(container);
            };
            if (largeImage.complete) f();
            else largeImage.observe('load', function(event) {f()});
        });
    },
    fadeOut: function(elem) {
        var opa = 100;
        var timeId = setInterval(function() {
            elem.setOpacity(opa / 100);
            opa -= 10;
            if (opa < 0) {
                elem.remove();
                clearInterval(timeId);
            } 
        }, 15);
    },
    dragDrop: function(elem) {
        var that = this;
        elem.observe('mousedown', function(event) {
            if (that.timeId) clearInterval(that.timeId);
            event.stop();
            var dx = parseInt(elem.getStyle('left')) - event.pointerX();
            var dy = parseInt(elem.getStyle('top')) - event.pointerY();
            elem.setOpacity(0.7);
            document.observe('mousemove', function(event) {
                event.stop();
                elem.setStyle({
                    left: (event.pointerX() + dx) + 'px',
                    top: (event.pointerY() + dy) + 'px'
                });
            });
            document.observe('mouseup', function(event) {
                document.stopObserving('mousemove');
                elem.setOpacity(1);
            })
        });
    }
});

下のサムネイルをクリックして確認が出来る（ただし、現時点では『閉じる』機能が無い）