Image preview

by infous

HTML

<div class="c">
    <a href="#">
        <img src="https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcR7d-JEdfvr-IPQcJdVbEYwBh_JxtGspfIqyPadZq2p3cF1bw3fNw">
    </a>
</div>
<div class="c">
    <a href="#">
        <img src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTCIUVQlxhK3HQji6LloPBOA7PesnO2doOBMc9Nef5_8p5Iqj2c2w">
    </a>
</div>
<div class="c">
    <a href="#">
        <img src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcTVZD_7DCmV3Ro9N64x5VolvZye9Gb8H2TuK6RFqfAfdTDhjTGQ-g">
    </a>
</div>
<div class="c">
    <a href="#">
        <img src="https://encrypted-tbn0.google.com/images?q=tbn:ANd9GcQFk4KMNMbqRP-Rx3A_1AZhjX3ET_b-xCRpDMH7xNKQBTa8c9LnKA">
    </a>
</div>

CSS

.c {
    position: relative;
    float: left;
}
.c .preview {
    position: absolute;
    display: none;
    z-index: 10;
    padding: 5px;
    background: #2A3333;
    font-size: 0;
}
.c .preview-r {
    top: 10px;
    left: 100%;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
}
.c .preview-l {
    top: 10px;
    right: 100%;
    box-shadow: -2px 2px 3px rgba(0,0,0,0.5);
}
a {
    display: inline-block;
    font-size: 0;
    max-width: 100px;
    margin: 10px;
}
a img {
    position: relative;
    width: 100%;
}

JavaScript

$(".c a").hover(function() {
    var l = $(this);
    var img = l.children("img");
    var p = l.parent();
    var preview = p.children(".preview");
    if (preview.length == 0) {
        preview = $("<div class=\"preview\"></div>").appendTo(p);
        $(img).clone().appendTo(preview);
    }
    var previewWidth = preview.width();
    var pLeft = p.offset().left;
    var pWidth = p.width();
    var docWidth = $(document.body).width();
    if (pLeft + pWidth + previewWidth > docWidth)
        preview.addClass("preview-l");
    else
        preview.addClass("preview-r");
    preview.show();
}, function() {
    var l = $(this);
    var p = l.parent();
    var preview = p.children(".preview");
    preview.removeClass("preview-l").removeClass("preview-r");
    preview.hide();
});