Shadowbox

Little help required to add print function to shadowbox

Classic

List

Threaded

8 messages Options

Ash360

Little help required to add print function to shadowbox

Hi,

I have shadowbox working nicely on my domain/site. http;//www.workflows.co.uk
I have a requirement to empower people to print the contents of a shadowbox.
I have read the "Example of adding a print function to shadowbox images": http://shadowbox.1309102.n2.nabble.com/Example-of-adding-print-function-to-shadowbox-images-td4783762.html

1) I have added the onFinish function to the Shadow.init function on the webpage: http://www.workflows.co.uk/clientforms/demo3.htm
2) I tried adding the custom onFinish function to the bottom of my shadowbox-js.php file (I made an educated guess that this was correct.)

/**
* Custom function to add print icon
*/

function mySbOpen(){
var c = Shadowbox.getCurrent();
var pageLink = c.link.ownerDocument.URL;
if(pageLink.indexOf('?')>1){
pageLink = pageLink.split('?')[0]
}
var link2image = pageLink+"?the_item="+c.link.shadowboxCacheKey;
var newDiv = $('<div id="sb-mylink">'+
'Print This Page</div>');
if($('div#sb-mylink')!=null){
$('div#sb-mylink').remove();
}
newDiv.insertAfter($('div#sb-counter'));
$('a#printMe').click(function(){
var theWork = window.open('','PrintWindow');
var html = "<html><head><title>Print An Image</title>";
html = html + "<link rel='stylesheet' href='http://www.workflows.co.uk/wp-content/plugins/shadowbox-js/shadowbox/shadowbox.css' type='text/css' /><style>#sb-info{display:none;}div#sb-wrapper{left:20px !important;top:40px !important}</style></head>";
html = html + "<body><div>http://www.workflows.co.uk/</div><div id='myprint'>"+$('#sb-container').clone().html()+"</div></body></html>";

theWork.document.open();
theWork.document.write(html);
theWork.document.close();
theWork.print();
theWork.close()
return false;

});
}

3) I modified the shadowbox.css file as per adding #sb-mylink element

#sb-mylink {width:40%;float:left;text-align: center;}

However, my home page packed in working complaining about parsing with this line .... var c = Shadowbox.getCurrent(); and the shadowbox functionality is not working on the page ... with only the function added ... whereas it worked fine before

So, I've removed the function. Once i can get some kind of life - shadowbox working with an unstyled piece of text saying 'Print This Page' I'll be good to go and nail it.

I would be very grateful if anyone can see a rookie error here. I'm no JS expert and feel that perhaps my interpretation of the function and its placement in the shadowbox-js.php file are perhaps the cause.

Any help on this would make me punch the sky.

Many thanks folks

Regards Mark

arttronics

Re: Little help required to add print function to shadowbox

You are not using Shadowbox v3.0.3 as provided from the Download Page, but a WordPress Plugin that operates differently.

When it comes to creating modifications to Shadowbox's JavaScript and CSS files, I do not recommend the WordPress version.

Download Shadowbox with the Base Adapter and all default players along with CSS Selectors and use that version for your webpage.

Currently, Shadowbox on your webpage is not initialized correctly, as Shadowbox.init needs to be in the Head Section of your webpage. Also, the shadowbox.js file should be installed in the Head Section too, and only needs to be called once.

In reference to the MOD POST link you provided, the shadowbox.js, shadowbox.css, and the doit.js files can easily be reviewed to show correct installation procedure. Granted the JavaScript files are not minified, but you can un-minify yours at www.jsfiddle.net by pasting it into the JavaScript pane, select Pure JavaScript Option on the left menu, and press the TidyUp Button.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Ash360

Re: Little help required to add print function to shadowbox

This post was updated on .

Many thanks for taking the time to advise me on my shortcomings. In accordance with your advice ... I'll bullet for clarity ...
1) Have removed wordpress plugin
2) Have installed Shadowbox v3.03 - got it working on main site .... http://www.workflows.co.uk
3) Shadowbox.init now in head ... a few options applied
4) Shadowbox.js in head too ... as it should be
5) Have tried to mimic the doit.js file and have referenced it in the head section of the page
6) Have checked paths (used absolute ones) - they all seem correct

The page I am trying to apply this too to get a proof of concept going is: http://www.workflows.co.uk/clientforms/demo.htm
The shadowbox is working fine but there is no print button as seen here: http://www.amylinart.com/Kinetics/Kinetics_port.htm

I note the following error with the doit.js file .....

-----------------

Uncaught TypeError: Cannot call method 'insertAfter' of null

This references the following line of code:

newDiv.insertAfter($('div#sb-counter'));

That line is in the doit.js file on line 31.

-----------------------------

Excuse me, I'm a rooky and can't quite fathom out what my next move is

The doit.js file is similar to that used by the originator ...

I would be most grateful if anyone could shed light on my next move. Many thanks for your valued help.

Regards Mark

arttronics

Re: Little help required to add print function to shadowbox

This post was updated on .

When using Shadowbox.init with Options, do not use parenthesis for numbers. When using numbers with decimal point less than 1 specify 0 then the decimal point first (e.g., 0.35).

Side note: On this page I landed on you have left-over WordPress Shadowbox still installed along with official Shadowbox installation:

http://www.workflows.co.uk/wf-pages/home-tour-popup-slideshow.htm

EDIT: I noticed in the Body Section in your web page that you have installed the Prototype framework. Since that framework and jQuery are both required, the jQuery no conflict rules must be in place. Your Head Section already contains that markup, but your doit.js file needs attention as follows:

Change:

To:

jQuery

Normally you should place scripts and styles in the Head Section.

Ash360

Re: Little help required to add print function to shadowbox

Hi and many thanks for your help

Have corrected shadowbox.init syntax and removed leftover Wordpress shadowbox ;)

Your explanation flagged in my mind that my requirement for a print function on the shadowbox is only for a gallery and not a single object - so the fact that the print function doesn't show on single objects is to my requirement.

The link 'Graphs' at the top of the page is now a fully working shadowbox gallery: http://www.workflows.co.uk/clientforms/demo.htm

Unfortunately, the print function is still not showing. I've combed through the doit.js file to see if I've missed replacing something like the image links .. etc.

I feel close but it is slightly beyond my technical capability. I recognise that it might be moving into the javascript side of things rather than a native shadowbox problem but hope that this string will provide value to others trying to acheive the same solution.

I'm mindful and very grateful of the good help you've provided me so far. I greatly appreciate it

Regards Mark

arttronics

Re: Little help required to add print function to shadowbox

I updated my previous post since that answer was not what you were looking for. Another solution has been found.

Ash360

Re: Little help required to add print function to shadowbox

Hi,

Have the whole thing working apart from one dealbreaker ....

- Click this: http://www.workflows.co.uk/clientforms/demo.htm
- Try the graphs link at the top
- Marvel at the genius of the print button concept that's now working thanks to the patient help of arttronics
- Click the print button as you punch the air with delight ;)
- Crumple into a sobbing mess on the floor as you see that the wonderful graphs are absent from your print console preview

It is working for printing a straight image ... try the introduction button ... but the all important graphs for my clients are not printable ..... and my instincts tell me that a solution is unlikely

Thanks for your help (if there is a solution to this I'll buy you a new house ;)

arttronics

Re: Little help required to add print function to shadowbox

The Print Mod is meant to print locally hosted images and not dynamically created iframe script content.

As a matter of fact, when having an iframe embed into a standard webpage, the iframe contents are not printable usually but if so will lack any CSS styling.

You might consider just making a hi-resolution screen-grab of the report and using that for your requirements.

Besides server-side tools that can perform screen captures, there are many online generators such as THIS one that can do it for you as well.

An easy way is just to enable the Print Button that your Form provider, http://www.jotform.com, allows you to have on your forms. That said, use Shadowbox.setup to only show the Print Button Mod on the objects (single objects work great too!) you require.