Click to pop-up images

by KELVIN LEE

HTML

<span id="pop-up" style="display:none;"><img id="pop-img" width="300px" src=""/></span>

<div id="image" data-file="https://lh4.googleusercontent.com/-O--pOBMXclg/AAAAAAAAAAI/AAAAAAAAABI/2xfLq18RM70/photo.jpg"><a href="#"><span class="btn">Show image</span></a></div>

JavaScript

$(document).ready(function () {
    $("div[id^=image]").mousedown(function () {
        $("#pop-img").attr("src", $(this).data('file'));
        $("#pop-up").show();
    });
    $("div[id^=image").mouseout(function () {
        $("#pop-up").hide();
    });
});