JS snippets

Mouse over gallery

Frontend.galleryRel = '';
Frontend.galleryPos = [0, 0];
Frontend.galleryTime = 0;
Frontend.galleryRegister = {};
Frontend.galleryBindImgView = function () {
    var This = this;

    var getContainer = function () {
        var $out = $('<div class="b-gallery_container ui-widget-content"><div class="l-zero"></div></div>');
        $("body").append($out);
        return $out;
    };

    var closeContainers = function () {
        $(".b-gallery_container").remove();
        $(".b-gallery .b-wait").removeClass("b-wait");
    };

    var setImage = function (img, alt) {
        closeContainers();
        var $container = getContainer();
        var $target = $(".l-zero", $container);
        $target.html(img);
        if (alt) {
            $target.append('<div class="b-alt">' + alt + '</div>');
        }
        var pos = [This.galleryPos[0] - 50, This.galleryPos[1] + 50];
        $container.position({
            at: "left top",
            of: $("body"),
            my: "left+" + pos[0] + " top+" + pos[1],
            collision: "fit none"
        });
        $container.fadeIn();
    };

    $("body").mousemove(function (event) {
        var now = (new Date()).getTime();
        if (now - Frontend.galleryTime > 50) {
            Frontend.galleryTime = now;

            var $img = $(event.target);
            if ($img.hasClass("s-gallery_item")) {
                var rel = $img.attr("rel");
                var alt = $img.attr("alt");

                This.galleryRel = rel;
                if (This.galleryRegister[rel] === undefined) {
                    $img.addClass("b-wait");
                    var $large = $('<img src="' + rel + '"/>');
                    $large.on('load', function () {
                        This.galleryRegister[rel] = $large;
                        if (Frontend.galleryRel == rel) {
                            setImage($large, alt);
                        }
                    });
                } else {
                    setImage(This.galleryRegister[rel], alt);
                }

                This.galleryPos = [event.pageX, event.pageY];
            } else {
                closeContainers();
            }
        }
    });
};