It is currently Mon Sep 01, 2014 11:01 pm Advanced search

Can I put a print link/button in the caption or overlay?

Frequently asked questions.

Can I put a print link/button in the caption or overlay?

Postby torstein.honsi » Thu Jul 26, 2007 12:03 pm

This method is copied and modified from http://www.boutell.com , the same Boutell that created the GD library for PHP. So here comes a two-step recipy for how to enable printing of one single image in Highslide.

1) Put these two JavaScript functions in a script tag in the top of your HTML page or in a separate .js file:
Code: Select all
/**
* Modified for Highslide from http://www.boutell.com/newfaq/creating/printpart.html
*/
hs.printImage = function (el) {
   var exp = hs.expanders[hs.getWrapperKey(el)];
   link = "about:blank";
   var pw = window.open(link, "_new");
   pw.document.open();
   pw.document.write(exp.getPrintPage());
   pw.document.close();
   return false;
};
hs.Expander.prototype.getPrintPage = function() {
   // We break the closing script tag in half to prevent
   // the HTML parser from seeing it as a part of
   // the *main* page.

   return "<html>\n" +
      "<head>\n" +
      "<title>Temporary Printing Window</title>\n" +
      "<script>\n" +"function step1() {\n" +
      "  setTimeout('step2()', 10);\n" +
      "}\n" +
      "function step2() {\n" +
      "  window.print();\n" +
      "  window.close();\n" +
      "}\n" +
      "</scr" + "ipt>\n" +
      "</head>\n" +
      "<body onLoad='step1()'>\n" +
      "<img src='" + this.content.src + "'/>\n" +
      "<div>" + this.caption.innerHTML + "</div>\n" + // remove this line if you don't want to print the caption
      "</body>\n" +
      "</html>\n";
};


2) Create a link to the printImage() function either in a custom overlay (i.e. controlbar) or in the caption:
Code: Select all
<a href="#" onclick="return hs.printImage(this)">Print</a>

See also How do I add a button to the gallery controls.
Last edited by torstein.honsi on Tue Dec 09, 2008 8:52 am, edited 3 times in total.
User avatar
torstein.honsi
Site Admin
 
Posts: 9198
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Postby torstein.honsi » Thu Dec 13, 2007 1:18 am

Printing the contents of an iframe is also possible in a similar way.

1) Put this JavaScript function in a script tag in the top of your HTML page or in a separate .js file:
Code: Select all
hs.Expander.prototype.printIframe = function () {
   var name = this.iframe.name;
   frames[name].focus();
   frames[name].print();
   return false;
}


2) Create a link to the function somewhere in the contentId wrapper for the iframe, or include the following in hs.skin.contentWrapper:
Code: Select all
<a class="control" onclick="return hs.getExpander(this).printIframe()" href="#">Print</a>
Last edited by torstein.honsi on Mon Sep 15, 2008 11:10 am, edited 1 time in total.
User avatar
torstein.honsi
Site Admin
 
Posts: 9198
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Postby torstein.honsi » Fri Feb 08, 2008 2:49 pm

Printing the contents of an AJAX or inline HTML content expander can be done with these functions:

1) Put this JavaScript function in a script tag in the top of your HTML page or in a separate .js file:
Code: Select all
hs.Expander.prototype.printHtml = function ()
{
    var pw = window.open("about:blank", "_new");
    pw.document.open();
    pw.document.write(this.getHtmlPrintPage());
    pw.document.close();
    return false;
};
hs.Expander.prototype.getHtmlPrintPage = function()
{
    // We break the closing script tag in half to prevent
    // the HTML parser from seeing it as a part of
    // the *main* page.
    var body = hs.getElementByClass(this.innerContent, 'DIV', 'highslide-body')
        || this.innerContent;

    return "<html>\n" +
        "<head>\n" +
        "<title>Temporary Printing Window</title>\n" +
        "<script>\n" +"function step1() {\n" +
        "  setTimeout('step2()', 10);\n" +
        "}\n" +
        "function step2() {\n" +
        "  window.print();\n" +
        "  window.close();\n" +
        "}\n" +
        "</scr" + "ipt>\n" +
        "</head>\n" +
        "<body onLoad='step1()'>\n" +
        body.innerHTML +
        "</body>\n" +
        "</html>\n";
};

2) Create a link to the function somewhere in the contentId wrapper for the iframe:
Code: Select all
<a class="control" onclick="return hs.getExpander(this).printHtml()" href="#">Print</a>
User avatar
torstein.honsi
Site Admin
 
Posts: 9198
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway


Return to Highslide FAQ

Who is online

Users browsing this forum: No registered users and 1 guest