Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 111bd189de
Fetching contributors…

Cannot retrieve contributors at this time

file 69 lines (64 sloc) 1.869 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
a img {
    border: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

<script>

function initZoom(a) {
    var img = a.find('img');
    var big_src = a.attr('href');
    img.css('opacity', 0.4);
    a.css({
        display: 'block',
        position: 'relative'
    }).width(img.width()).height(img.height());
    var loading = $('<img src="loading.gif">');
    loading.appendTo(a).css({
        position: 'absolute',
        top: img.height() / 2,
        left: 15
    });
    var big = new Image();
    big.src = big_src;
    $(big).load(function() {
        var big_width = big.width;
        var big_height = big.height;
        var r = big_height / img.width();
        loading.remove();
        var container = $('<div></div>');
        container.width(img.width());
        container.height(img.height());
        container.css({
            'background-image': 'url(' + big_src + ')',
            'background-repeat': 'no-repeat',
            'background-position': '0 0'
        });
        img.remove();
        container.appendTo(a);
        var pos = container.offset();
        container.mousemove(function(ev) {
            var x = ev.pageX - pos.left;
            var y = ev.pageY - pos.top;
            container.css(
                'background-position', -(r * x) + 'px ' + -(r * y) + 'px'
            );
        });
    });
}

jQuery(function($) {
    $('a.zoomer').click(function() {
        initZoom($(this));
        return false;
    });
});
</script>
</head>
<body>

<div><a class="zoomer" href="http://www.sciencemuseum.org.uk/hommedia.ashx?id=11730&amp;size=Large"><img src="http://www.sciencemuseum.org.uk/hommedia.ashx?id=11730&amp;size=Small"></a></div>

</body>
</html>
Something went wrong with that request. Please try again.