KOMPOOS.NL

zoom thumbnail

home » javascripts » image-effects » zoom-thumbnail.html

voorbeeld thumb zoom

uitleg zoom procedure

Plaats de stylesheet in de head-sectie, en de rest (html en het javascript) in de body-sectie van jouw pagina. Probeer het javascript zo "laag" als mogelijk op de pagina te plaatsen. De procedure is volgens JSLint foutloos en de pagina valideert verder op alle mogelijk manieren,

stylesheet zoom procedure


<style type="text/css">
        .zoom_thumbnail{position:absolute;white-space:nowrap}
        img.zoom{vertical-align:top}
        .spacer{height:75px}
</style>

html voor zooming thumbs


<div class="spacer">
        <p class="zoom_thumbnail">
                <img class="zoom" alt="zoom plaatje 1" src="http://static.dns5.nl/zoom-thumbnail-1.jpg" width="80" height="75">
                <img class="zoom" alt="zoom plaatje 2" src="http://static.dns5.nl/zoom-thumbnail-2.jpg" width="80" height="75">
                <img class="zoom" alt="zoom plaatje 3" src="http://static.dns5.nl/zoom-thumbnail-3.jpg" width="80" height="75">
        </p>
</div>

javascript voor zoom thumbnail procedure


<script>
/*global window: false */
if (document.images) { (function() {
        var i,
        zoom_nummer,
        de_cosinus,
        de_tijd = 30,
        de_snelheid = 30;
        var deze_zoom = function(afbeelding) {
            afbeelding = afbeelding || window.event;
            if (!deze_zoom.expressie.test(afbeelding.className)) {
                afbeelding = afbeelding.target || afbeelding.srcElement || null;
            }
            if (!afbeelding || !deze_zoom.expressie.test(afbeelding.className)) {
                return;
            }
            var e = deze_zoom,
            breedte_hoogte = function(dim) {
                return dim[0] * de_cosinus + dim[1] + 'px';
            },
            fix_zoom_size = function() {
                de_cosinus = (1 - Math.cos((e.zoom_array[i].jump / de_tijd) * Math.PI)) / 2;
                afbeelding.style.width = breedte_hoogte(e.zoom_array[i].w);
                afbeelding.style.height = breedte_hoogte(e.zoom_array[i].h);
                if (e.zoom_array[i].d && de_tijd > e.zoom_array[i].jump) {++e.zoom_array[i].jump;
                    e.zoom_array[i].timer = setTimeout(fix_zoom_size, de_snelheid);
                } else if (!e.zoom_array[i].d && e.zoom_array[i].jump > 0) {--e.zoom_array[i].jump;
                    e.zoom_array[i].timer = setTimeout(fix_zoom_size, de_snelheid);
                }
            },
            d = document.images,
            i = d.length - 1;
            for (i; i > -1; --i) {
                if (d[i] == afbeelding) {
                    break;
                }
            }
            zoom_nummer = i + 1;
            i = i + afbeelding.src;
            if (!e.zoom_array[i]) {
                afbeelding.title = 'zoom thumbnail ' + zoom_nummer;
                e.zoom_array[i] = {
                    afbeelding: new Image(),
                    jump: 0
                };
                e.zoom_array[i].afbeelding.onload = function() {
                    e.zoom_array[i].w = [e.zoom_array[i].afbeelding.width - afbeelding.width, afbeelding.width];
                    e.zoom_array[i].h = [e.zoom_array[i].afbeelding.height - afbeelding.height, afbeelding.height];
                    e(afbeelding);
                };
                e.zoom_array[i].afbeelding.src = afbeelding.src;
                return;
            }
            if (e.zoom_array[i].timer) {
                clearTimeout(e.zoom_array[i].timer);
            }
            e.zoom_array[i].d = !e.zoom_array[i].d;
            fix_zoom_size();
        };
        deze_zoom.zoom_array = {};
        deze_zoom.expressie = new RegExp('\\bzoom\\b');
        if (document.addEventListener) {
            document.addEventListener('mouseover', deze_zoom, false);
            document.addEventListener('mouseout', deze_zoom, false);
        } else if (document.attachEvent) {
            document.attachEvent('onmouseover', deze_zoom);
            document.attachEvent('onmouseout', deze_zoom);
        }
    })();
}
</script>