I have some small images and each has a "print larger image" link.
For example:
<img src="thumb.jpg">
<a href="#">Print Larger Image</a>
When the user clicks the "print larger image" link, my goal is to trigger the printing of "big.jpg".
How can this be done?
EDIT: ANTHONY HAD THE RIGHT SOLUTION FOR ME. I MODIFIED HIS CODE A BIT TO GET IT WORKING. HERE'S THE FULL, WORKING CODE
<style>
@media screen {
.printimage {
display: none;
}
}
@media print {
body * {
display: none;
}
.printimage {
display: block;
}
}
</style>
<a id="bigimage" href="#">Print Big Image</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bigimage").click(function() {
$("body").append("<img src='http://sstatic.net/so/img/logo.png' class='printimage' >");
window.print();
});
});
</script>
This would be really weird and awesome, but one thing you could do is:
Have the print large image link trigger a javascript function that inserts the larger image into the DOM with a class of "printable_image".
Then have your CSS rules set up with an @screen and @print rules that hide the image in the browser but hide everything but the image for the printout.
Then call the already mentioned window.print() function. The only catch is that users wouldn't see anything if they just wanted to print the screen, so you'd have to add the @print rule with the js to avoid this.
The HTML:
<img src="thumb.jpg">
<a href="#" id="bigimage">Print Larger Image</a>
The JS (in jquery):
$function() {
$("#bigimage").click(function() {
$(body).amend("<img src='bigimage.png' class="printimage" />");
});
});
The CSS:
@media screen {
.printimage {
display: none;
}
}
@media print {
body * {
display: none;
}
.printimage {
display: block;
}
}
<img src="thumb.jpg" alt="Alternative text" />
<a href="big.jpg">Print Larger Image</a>
That's really basic HTML, no JS/PHP or whatsoever needed.
window.print() will do it in javascript, but that will only print the current page. If you're trying to launch the img into a new tab and run the print command, you'll have to combine a few commands.
<a href="javascript:window.Print(); return false;">Print Larger Image</a>
This will print the current page, but to add to JoostK's answer, redirect to the image:
<a href="page.php?image=big.jpg">Print Larger Image</a>
Then in page.php, load your image, and then in body onload event, call window.print();
EDIT:
To allow the user to stay on the same page, I don't believe is possible, but what you could do is:
<a href="page.php?image=big.jpg" target="_blank">Print Larger Image</a>
Then after calling window.print(); you can call window.close(); (this might pop a dialog box stating that the browser wants to close the current window is that ok, or something along those lines)
You can create a link like this to print the current page...
<a href="JavaScript:window.print();">Print this page</a>
or to auto print a page as soon as it loads, you can do something like this...
<body onload="window.print();">