torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

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

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 6:52 am, edited 3 times in total.
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

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 9:10 am, edited 1 time in total.
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

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>

Return to “Highslide FAQ”