Nedan följer en demo på en bildzoomningsfunktion jag gjort åt Ewa i Walla vilken skall användas vid produktbeskrivningarna i deras nya webshop.

Bredd på Zoomfönster LitenMellanStor Höjd på Zoomfönster LitenMellanStor

 

 

Och här kommer källkoden

Event.observe(window, 'load', function() {
    var imagelist = new Array();
    if ($('imagezoomcontent'))
        $('imagezoomcontent').oldSrc = $('imagezoomcontent').src;
    $$('.zoomtm').each(function(el) {

        var i = new Image();
        i.src = el.getAttribute("alt");
        imagelist.push(i);
        el.offset = {
        left : 0,
        top : 0
        };
        el.xratio = 0;
        el.yratio = 0;
        el.zoomAreaXRatio = 0;
        el.zoomAreaYRatio = 0;
        el.imageZoomContentWidth = 0;
        el.imageZoomContentHeight = 0;
        el.tmWidth = el.getWidth();
        el.tmHeight = el.getHeight();
        el.offset = $(el.parentNode).cumulativeOffset();
        if (window.getComputedStyle)
            var parentNodeBorder = parseInt($(el.parentNode.parentNode).getStyle("border-top-width"));
        else

            var parentNodeBorder = parseInt($(el.parentNode.parentNode).getStyle("borderWidth"));
        parentNodeBorder = parentNodeBorder ? parentNodeBorder * 2 : 0;
        $(el.parentNode).setStyle( {
        width : el.tmWidth + 'px',
        height : el.tmHeight + 'px',
        top : (($(el.parentNode.parentNode).getHeight() - parentNodeBorder) - $(el.parentNode).getHeight()) / 2 + 'px'

        });
        el.parentNode.onmouseover = function() {
            var x = el.offset.left + el.tmWidth;
            var y = el.offset.top;
            $('imagezoom').setStyle( {
            left : x + 20 + 'px',
            top : y + 'px'

            });
            el.parentNode.appendChild($('zoomarea'));
            $('zoomarea').setStyle( {
                display : 'block'
            });
            $('imagezoomcontent').src = el.getAttribute("alt");
            el.imageZoomWidth = $('zoomview').getWidth();
            el.imageZoomHeight = $('zoomview').getHeight();
        }
        el.parentNode.onmouseout = function() {

            el.xratio = 0;
            el.yratio = 0;
            el.zoomAreaXRatio = 0;
            el.zoomAreaYRatio = 0;
            el.imageZoomContentWidth = 0;
            el.imageZoomContentHeight = 0;
            el.posx = 0;
            el.posy = 0;
            $('imagezoomcontent').src = $('imagezoomcontent').oldSrc;
            $('imagezoomcontent').setStyle( {
            top : 0,
            left : 0

            });
            $('zoomarea').setStyle( {
                display : 'none'
            });
        }
        el.parentNode.onmousemove = function(e) {
            if (el.imageZoomContentWidth < 30) {
                if ($('imagezoomcontent').getWidth() < 30) {
                    return false;
                } else {
                    el.imageZoomContentWidth = $('imagezoomcontent').getWidth();
                    el.imageZoomContentHeight = $('imagezoomcontent').getHeight();
                }
            }
            if (el.xratio == 0) {
                el.xratio = el.imageZoomContentWidth / el.tmWidth;
                el.yratio = el.imageZoomContentHeight / el.tmHeight;
                el.zoomAreaXRatio = el.imageZoomContentWidth / el.imageZoomWidth;
                el.zoomAreaYRatio = el.imageZoomContentHeight / el.imageZoomHeight;
                $('zoomarea').setStyle( {
                width : Math.round(el.tmWidth / el.zoomAreaXRatio) + 'px',
                height : Math.round(el.tmHeight / el.zoomAreaYRatio) + 'px'

                });
                el.zoomAreaHeight = $('zoomarea').getHeight();
                el.zoomAreaWidth = $('zoomarea').getWidth();
            }
            el.posx = (window.event ? window.event.clientX + document.documentElement.scrollLeft : e.pageX);
            el.posy = (window.event ? window.event.clientY + document.documentElement.scrollTop : e.pageY);
            var zx = el.posx - el.cumulativeOffset().left - Math.round((el.tmWidth / el.zoomAreaXRatio) / 2);
            var zy = el.posy - el.cumulativeOffset().top - Math.round((el.tmHeight / el.zoomAreaYRatio) / 2);
            if (zx < 0)
                zx = 0;
            if (zy < 0)
                zy = 0;
            var imzx = (zx * el.xratio);
            var imzy = (zy * el.yratio);
            if (zx > (el.tmWidth - el.zoomAreaWidth))
                zx = el.tmWidth - el.zoomAreaWidth;
            if (zy > (el.tmHeight - el.zoomAreaHeight))
                zy = el.tmHeight - el.zoomAreaHeight;
            if (imzx > el.imageZoomContentWidth - el.imageZoomWidth)
                imzx = el.imageZoomContentWidth - el.imageZoomWidth;
            if (imzy > el.imageZoomContentHeight - el.imageZoomHeight)
                imzy = el.imageZoomContentHeight - el.imageZoomHeight;
            $('imagezoomcontent').setStyle( {
            left : -(imzx) + 'px',
            top : -(imzy) + 'px'

            });
            $('zoomarea').setStyle( {
            left : zx + 'px',
            top : zy + 'px'
            });
        }
    });
});

Till detta behöver man lite CSS

div.thumb {
    height: 110px;

    width: 110px;
    float: left;
    margin-right: 6px;

    border: 1px solid #999;
    background: #fff;
}

.zoomThumb {
    position: relative;
    margin: auto auto;

    width: 0;
    line-height: 0px;
    font-size: 0px;

    border: 1px solid black;
}

#zoomarea {
    width: 30px;

    height: 30px;
    position: absolute;
    display: none;

    background: #fff;
    opacity: 0.4;
    filter: alpha(opacity =   40);

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}

#imagezoom {
    border: 1px solid #999;

    width: 200px;
    height: 200px;
    z-index: 10;

    margin-right: 10px;
    float: left;
    background: white;

}

#imagezoomcontent {
    position: absolute;
}

#zoomview {
    position: relative;

    width: 200px;
    height: 200px;
    line-height: 1px;

    font-size: 1px;
    overflow: hidden;
}

Och slutligen lite HTML

<div id="zoomarea"> </div>
<div id="imagezoom">

    <div id="zoomview">
        <img id="imagezoomcontent" src="/images/blank.gif" />

    </div>
</div>
<div class="thumb">
    <div class="zoomThumb">

        <img alt="/images/test1.jpg" class="zoomtm" src="/images/test1_t.jpg" />

    </div>
</div>
<div class="thumb">
    <div class="zoomThumb">

        <img alt="/images/test5.jpg" class="zoomtm" src="/images/test5_t.jpg" />

    </div>
</div>

Want rounded corners but hate the idea of making a zillion gif-images?
There are several scripts to achieve this but there's one that caught my interest, Transcorners. Besides having different styles of corners it also incorporates CSS-borders. Check out the showcase.

The only drawback as I see is that the script depends on mootools, libraries that I personally don't like. But still, Transcorners seems really easy and usable.

In these days of Ajax and Web 2.0 Dion Almaer at Ajaxian has written an article worth thinking about. The article is mainly about the how we use terms as Ajax, claiming that every little cool effect we do with is Ajax even though we doesn't use the XMLHttpRequest object.

My blog uses a fair amount of Ajax but still, most of my Javascript code do other stuff like updating sections, placing elements, handling behaviours and edit posts.

Javascript != Ajax

Stripped away about 200 lines of Javascript code today. Mostly obsolete stuff that wasn't in use but also some effects like the sortable "modules" in the right column. No need for it really.

The size of the file shrunk to 12Kb. But there's still about 96Kb of Javascript being loaded, Trimpath and Prototype being the largest. I can probably shrink that a lot by using the light version of Prototype but that mean I have to change a lot of the Ajax stuff so we'll se about that one...

This is for you lazy guys out there. The Microsoft DOM extension swapNode() is a quite handy feature when dealing with Ajax and stuff, however Firefox lacks this method and I figured I'd share the solution I'm using.

This solution doesn't require you to update your behaviours if you are using them. The functions references to the two nodes you want to swap.

function swapNodes(item1,item2)
{
    var itemtmp = item1.cloneNode(1);
    var parent = item1.parentNode;
    item2 = parent.replaceChild(itemtmp,item2);
    parent.replaceChild(item2,item1);
    parent.replaceChild(item1,itemtmp);
    itemtmp = null;
}