My problem is I'm designing a site for a friend. What I have done is set a list of thumbnails with a button under each one that open the respective image in a new window, prints it, and closed the window. Now he's decided that he wants checkboxes next to the thumbnails that when selected, a button click will print all selected images. Is this possible? If so, can someone please explain it to me? Thanks for your time.

My problem is I'm designing a site for a friend. What I have done is set a list of thumbnails with a button under each one that open the respective image in a new window, prints it, and closed the window. Now he's decided that he wants checkboxes next to the thumbnails that when selected, a button click will print all selected images. Is this possible? If so, can someone please explain it to me? Thanks for your time.

• javascript
• image
• printing
• web

• 1 of course this is possible -- anything you can imagine is. But this question is very general and without seeing the code you already have, it will be hard for anyone to help you. – hackartist Commented Jun 14, 2012 at 7:09
• I thought so :D To put it simply, I've got a button under each of image in a grid of 160x160 images, and in the button onClick it simply loads an html page with a larger version of the image. On this page theres a window.print(); and window.close(); function in the body tag. This works exactly the way he wanted it too. But now he wants it to have a checkbox next to every image and one central print button that loads a new page with the selected large images side by side and prints them all on that page. – Brandon L. Collins Commented Jun 14, 2012 at 7:29

1 Answer 1

Here is one way that you could do this of many possible ways:

step one: make a form surrounding everything and inside the form, next to or below each image put a check box with a unique id which we can use to identify which one it is so for example

<input type="checkbox" id="imageNumber3"/>

just so that later you could use the id to tell which image was meant. Read up on forms and check boxes.

step two: make a javascript function to get which check boxes are currently selected like so

function getChecked(form) {
    var names;
    var c = document.getElementById(form).getElementsByTagName('input');
    for (var i = 0; i < c.length; i++) {
        if (c[i].type == 'checkbox' && c[i].checked) {
             names.append(c[i].id);
        }
    }
    return names;
}

This function should when you give it the id of the form the checkboxes are in, walk through and check each box to see if it is checked. It will build an array of the ids which have been choosen and return that array.

step three: make a new print function to be called when the button gets clicked like so

function printBunch(ids) {
    var windowUrl = 'about:blank';
    var uniqueName = new Date();
    var windowName = 'Print' + uniqueName.getTime();

    var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');

    for(id in ids) {
        //assuming the image will be the next sibling of the checkbox
        var currentImage = document.getElementById(id).nextSibling.innerHTML;
        printWindow.document.write(currentImage);
    }
    printWindow.document.close();
    printWindow.focus();
    printWindow.print();
    printWindow.close();
 }

Then for the onclick of the button put "printBunch(getChecked());" to pass in the ids for the checked images. You may have to change some of the code depending on how you set up the images in relation to the check boxes but this should get you started.