Home/ Questions/Q 7574969
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T16:34:07+00:00

Hy Guys… i have some lightbox script where i can build custom buttons. I’ve

  • 0

Hy Guys…

i have some lightbox script where i can build custom buttons. I’ve maked one buttom to print an image showed in the lightbox.. but the image don’t apear on print window (tested in Google Chrome, Firefox an IE8)… here my

my code:

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#getdropdown").change(function() {
        var trial=jQuery("#getdropdown option:selected").val();
        
        jQuery.lightbox(trial,{
              buttons: [
                {
                  'class'     : 'botao-imprimir',
                  'html'      : 'IMPRIMIR',
                  'callback'  : function(url) {
                    title = window.open(trial);
                    //title.document.write(trial);
                    title.print();
                  }
                }
              ]
            });     
        
    });
});
</script>

and Here is my HTML:

<select name="getdropdown" class="drop-receitas" id="getdropdown">
    <option value="">Escolha aqui a receita desejada</option>
    <option value="receitas/image.jpg">Image</option>
    <option value="receitas/image2.jpg">Image 2</option>    
</select>

on var trial i have the image, and when i select some option on my list, it’s shows the image with the button "IMPRIMIR" (Print).. What i’m doing wrong?

Ty for help!

EDIT: Here is the link with the problem. Click in some item on DropDown

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should open a window object to an HTML page which contains the image in an tag.
    Something like this:

    jQuery.lightbox(trial, {
  buttons: [
    {
      'class'     : 'botao-imprimir',
      'html'      : 'IMPRIMIR',
      'callback'  : function(url) {
        var imgWindow = window.open('', 'popup', 'toolbar=no,menubar=no,width=imageWidth,height=imageheight');
        imgWindow.document.open();
        imgWindow.document.write("<html><head></head><body onload='window.print()'><img src='"+url+"' /></body></html>");
        imgWindow.document.close();
       }
     }
   ]
 });

    Another way of doing it is using a print stylesheet, which hides everyting else, than the image. Take a look here: http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml (First Google hit).

    • 0