Stampare con Javascript e i CSS
Stampare una pagina con Javascript è molto semplice: basta mettere un link del genere:
<a href="javascript:window.print();">PRINT</a>
Il problema però è che così ti stampa sempre tutta la pagina!
Nel mio caso invece volevo stampare una cosa precisa: una foto.
Nello specifico la foto che stavo visualizzando in overlay usando la galleria Lightbox.
Usando quel link mi stampava sia l'immagine che tutto ciò che compariva sotto all'overlay.
Come fare?
Usando i CSS.
In pratica dovete creare un CSS da includere usando come media="print".
Quindi nell'head della pagina:
<head>
<link type="text/css" rel="stylesheet" href="template/css/style.css" media="screen" />
<link type="text/css" rel="stylesheet" href="template/css/print.css" media="print" />
</head>
Nel foglio andrete a decidere cosa stampare.
Nel mio caso dovevo nascondere tutto ciò che era in più:
#main, #footer, .galleria-lightbox-info, .galleria-lightbox-close {
display: none;
}
Ho levato il main (div contenitore), il div footer, e alcune parti di Lightbox che apparivano con la foto.
Così facendo stampo solo l'immagine!
javascript print css
Commentami!