Image Selection

Select images and open new window containing only selected Images.

by Lauren Dransfield

HTML

<p>Tickbox automatically added after each img element</p>
<p>Select images and press compare button to open in a new window</p>
<div>
    <img src="http://goo.gl/IUnmYJ" alt="Sample image 1" />
</div>
<div>
    <img src="http://goo.gl/FXG6CW" alt="Sample image 2" />
</div>
<div>
    <img src="http://goo.gl/IjuZG4" alt="Sample image 3" />
</div>
<br>
<button id="compare">Compare</button>

CSS

body {
    font-family: helvetica;
}
img {
    width: 150px;
}
.unselected, .selected {
    height: 9px;
    width: 9px;
    border-radius: 40%;
    border: 2px solid blue;
    display: inline-block;
    vertical-align: top;
    margin: 4px;
}
.selected {
    background-color: red;
}
.unselected {
    background-color: none;
}

JavaScript

var tickBoxHTML = "<div class='tickBox unselected'></div>";
$("img").after(tickBoxHTML);

$(".tickBox").click(function () {
    $(this).toggleClass("tickBox selected", "tickBox unselected");
});

$("#compare").click(function () {

    var compareText = "<p>Selected images for comparison:</p>";

    $(".selected").each(function () {
        var thisSrc = $(this).prev("img").attr("src");
        var thisAlt = $(this).prev("img").attr("alt");
        compareText += "<div><img src='" + thisSrc + "' alt='" + thisAlt + "' /></div>";
    });

    compareText += "<br><button onClick='window.close()'>Close Window</button>"

    var compareWindow = window.open();
    compareWindow.document.body.insertAdjacentHTML("beforeend", compareText);

});