Display PDF using Thickbox in a WordPress plugin

The ILC-PDFBox plugin for WordPress will allow you to display a PDF document that you embed in the post writing area using Thickbox, the jQuery modal window. In this way you don’t have to open a separate page to display it, you can speed up loading times by loading it only if it’s going to be read and you don’t waste excessive bandwidth.

All you have to do in order to use it, is uploading and installing it like any other plugin. Then, in the post writing area, just upload your pdf using the “Add Media” button, the one with the asterisc, and insert the link to the file. That’s it. Publish your post and when you now click the link, a Thickbox displaying your pdf will be launched.

pb

There are a few options for the plugin, accesible from the menu SettingsPDFBox Options. Here you can set the width and height of the Thickbox and add a custom CSS style. In addition to the .thickbox class added to the anchor, a .pdfbox class is added, in case you want to stylize it differently.
Finally, here’s a demo of the plugin in action. The first link displays the pdf using Thickbox and the second one is a feature requested by one of the readers on the comments, a direct link to download the pdf file.

Launch PDF file in Thickbox

So, without further ado, here’s the ILC-PDFBox plugin for WordPress, download it, play with it, and let me know what you think about it.

This plugin was tested using WordPress 3.0.1, 2.9.2, 2.8, so it should be fine.

Update 5-09-10

Due to some glitches regarding pdf embedding on the fly in IE, this won’t correctly display the pdf file within a Thickbox in IE. However, your users will still be able to view the pdf by clicking on the Download PDF link.

There is a solution to this issue: integrating it with ColorBox, a IE6-8 compatible solution for dialogs. The plugin will be updated in the next days to support ColorBox.

End Update 5-09-10

65 thoughts on “Display PDF using Thickbox in a WordPress plugin”

  1. Great plugin, but still having the empty white box problem.

    This is not a WordPress problem.

    Practically, the jQuery simply doesn’t work consistantly because every OS and browser is going to open PDFs differently.

    My Mac Firefox displays the “Open or Download” screen, and will open the pdf in the Mac previewer, not the browser at all.

    My test PC IE shows the white box, while in FF it works correctly.

    So you see, it’s all about the OS, the browser, and default settings for PDF handling.

  2. That’s correct Steve. Although almost a 0.001% jQuery still behaves differently according to the browser+OS combo. I’ll be releasing an update of this plugin soon. It will take a while since I’m working in a full solution to open anything in a modal dialog.

  3. Hey! this works GRET! BUUUUTT somehow, FireFox tries to download the PDF when i access the page. how do i prevent firefox from downloading the PDF?? thanks!!!

  4. When i want to display tree pdf on one page i cant i get this error – Warning: preg_replace() [function.preg-replace]: Compilation failed: unmatched parentheses at offset 5 in C:wampwwwmpwp-contentpluginsilc-pdfboxpdfbox.php on line 54

    function ilc_pdfbox_thecontent ($content){
    global $post;
    global $pdfbox_width;
    global $pdfbox_height;

    $pdfbox_height_plus = $pdfbox_height + 15;
    $pdfbox_height += 35;

    $pattern = “/]*).(pdf)(‘|”)(.*?)>(.*?)/i”;
    $replacement = ‘
    Launch PDF file.
    ‘;
    preg_match_all($pattern,$content,$matches);
    foreach($matches[0] as $k=>$v){
    $new_v = preg_replace($pattern, $replacement, $v);
    $new_v = preg_replace(“!##!”, $k, $new_v);
    $content = preg_replace(“!”.preg_quote($v).”!”, $new_v, $content);
    }
    return $content;
    }

  5. Hi Elio, thank you for the plugin! I installed it but when I tried to deactivate it I realized that it messes up with the menu of the site: The submenus cannot be clicked anymore, since when I try to click on them after hovering their parent menu, they just disappear. When I activate the plugin, the menu works again normally. So in order to have the website running I must have the plugin active. Any ideas what part of the plugin s causing this and the way to fix it? Thank you in advance for your time and help

  6. Hola. El plugin funciona perfectamente en chrome. Pero en iexplorer, cuando abres el pdf, va muy bien. Pero al cerrar el thickbox la pagina principal, que estaba de fondo, se queda en blanco, y hay que volver a cargarla. ¬ŅPodr√≠a darme una soluci√≥n, por favor?

  7. Hello. The plugin works perfectly in chrome. But iexplorer, when you open the pdf, is going well. But to close the thickbox main page, which was background goes blank, and you have to reload. Could you give me a solution, please?

  8. I am having the same problem as Paco I want to redirect back to the page the user was on but when I click the x I get a blank page.

  9. I am trying to display multiple pdf’s on a single page and used the following code provided by ‘Beany’ in May, 2012

    Unfortunately the pdfs now open in a new page instead of a preview iframe/box.

    Any suggestions on how to fix this issue?

    Thanks

    function ilc_pdfbox_thecontent ($content){
    global $post;
    global $pdfbox_width;
    global $pdfbox_height;

    $pdfbox_height_plus = $pdfbox_height + 15;
    $pdfbox_height += 35;

    $pattern = “/]*).(pdf)(‘|”)(.*?)>(.*?)/i”;
    $replacement = ‘
    Launch PDF file.
    ‘;
    preg_match_all($pattern,$content,$matches);
    foreach($matches[0] as $k=>$v){
    $new_v = preg_replace($pattern, $replacement, $v);
    $new_v = preg_replace(“!##!”, $k, $new_v);
    $content = preg_replace(“!”.preg_quote($v).”!”, $new_v, $content);
    }
    return $content;
    }

  10. Hi, I’m trying to use this plugin on my client’s website but when it opens the overlay with the PDF file, my menu shows up on top of the overlay. I’ve added a z-index to the CSS but still my menu sits on top of the overlay, any ideas why this happens?

Leave a Reply