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.
There are a few options for the plugin, accesible from the menu Settings\PDFBox 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.
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
“Display PDF using Thickbox in a WordPress plugin” received 55 comments! Add yours.
Leave a comment
Stock Files for sale on GraphicRiver
really great article, thanks
That’s a very cool feature! I might make the box a little larger, though, to prevent so much scrolling. Great info!
[...] De zoektocht bleek lastiger te zijn dan ik had gedacht, maar na even doorzetten kwam ik de plugin ILC-PDFBox – heerlijke naam ook – tegen die precies doet wat ik nodig had. Het gebruik van de [...]
This plugin doesn’t work on wp 2.9. All that happens is that the file dialog box pops up and a blank window appears, presumably where the PDF file should be.
I’ve tested it in WP 2.9 and 2.9.1
Could you ellaborate on the issues you’re experiencing?
Thanks
It’d be cool if you could optionally include a link to download the file without opening the lightbox.
would also be great to have options for formatting the displayed pdf, ie: no sidebar, etc.
Justin, you could add the option to download the original pdf by doing the following:
1) open pdfbox.php in a text editor like SciTE
2) search for </iframe></div>
3) add this after the div
<a href=”$3.$4″ rel=”nofollow”>Download PDF</a>
Done, now you have a direct link to the pdf. You can see it on the example in the post, I’ve updated the plugin I’m using (not the download).
Brilliant fix!
thank you very much!!
I do have one other question, should this work when you use more than one link to a pdf on a page? it seems what I’m finding is any other links just link to the first file in the list. Is this common?
Ermm ¬¬ yeah, don’t know why I thought no one would be embedding more than one pdf in a post. My bad. I will fix this later and I’ll send it an email when it’s done.
Drat, Ok so I thought at first it worked fine but I’m noticing that somehow the $3 is giving me part of the web address twice. (eg: http://yoursite.com/%EF%BF%BDhttp://yoursite.com…etc)
any idea why this would happen?
I’d like to add this plugin is the only one that does what you’re doing so elegantly so I thank you 100 times for having created and also for the direct support!
Weird, that shouldn’t be happening. Could you post the exact url you’re attempting to use here?
sure, can I email you? the website is still in development…
Thanks
however, I should’ve used a shortcode to insert the pdf.
Yes, you can email it, I’m sending you an email.
Your code Download PDF
was not displaying correctly.
You should change the quotation marks, so that they are like this:
Download PDF
I tested it and it works now… Thanks for this plugin.
Delete last post and make it plain txt so it displays properly…
I’m having the same issue MateMedia was having. I’ve embedded a PDF (multi-page) into a page, and when the thickbox loads. Just the thickbox frame and the close button appear. No content is loaded with it.
The thickbox on this site also doesn’t work, but it loads a page sized empty box inside the thickbox where the pdf should probably go.
It seems like every time I load one of the thickboxes a new download of the pdf being served is initiated. I’m not sure if that’s due to the plugin or due to my browser settings.
Matthaus, could you please give me an online link where you are using it? I cansee the pdf in this page correctly so I’m very interested about any issues that you might be running into.
good and nice to code
Can’t get this to work on this site or on mine? It brings up a download box and a blank white box, but no pdf in it. Any ideas?
Love the plugin. Thanks. Did you ever come up with a fix to address multiple .pdfs on a page and loading only the first file? I could really really use it if you did.
Rany, I guess this could be done using jQuery, but I don’t really have the time to update the plugin right now. You remove them maybe just by using removeClass() on the pdf you don’t want to launch.
Thanks for such a quick response! Unfortunately, for me I hear you speaking a foreign language. I researched your suggestion a bit and am lost at the insertion point. My problem isn’t necessarily with multiple pdfs in one post, it’s when it list the posts in the archive pages. You can see here http://www.operationlookout.org/Missing_Kids/Directory/ — Any suggestions?
Humm I see. Try using the following jQuery code
$j(document).ready(
function() {
$j(‘.post:not(:first) .pdfbox’).removeClass(‘pdfbox’).removeClass(‘thickbox’);
});
I’m assuming that each of your posts is wrapped with a .post class. If that’s not the
case just replace the .post class with your own class. This code will remove .thickbox and .pdfbox classes from every link but the first one.
Assuming I placed the suggested code correctly and entered the proper post class, the only thing that seemed affected by it was the “X” in the upper corner shrank to a grey 3px wide box.
Elio, I know you said you didn’t have much time to work on this and as much as I wish this could be a quick fix, I don’t think it will be. Until you can come up with an update, I’m gonna have to go old school with it. Thanks for taking the time to try to help me out. As a little gratitude for your generosity, please check your PayPal account. I look forward to making a larger donation once an update has been made..hint hint
Thank you very much!! I really appreciate it
and thank you very much again!
Now that I look at the code I wrote I notice that I typed “$j” instead of “jQuery”. The thing is that I tested this on a local site I was working and I was using an alias to avoid typing “jQuery” all the time. Try changing “$j” to “jQuery” and let’s see what happens. I hope it works
You are more than welcome. I wish it could have been more. I tried the adjustment and it was the same outcome. If it’s working on your side, I must be doing something wrong on mine.
Rany,
Just so you know, your site is still showing the same pdf in all of your links! I wish Elio had time to fix the multiple pdf’s on one page issue!
Thanks Justin. I know. That’s why I’ve been communicating back and forth with Elio. I’m hoping an update will happen soon. I hate the old school look. This plugin makes dealing with pdfs so much more streamline and modern.
Hi, I’m having the same problem as Matthaus and Ross. The second the page loads, an empty white box pops up and a file begins to download. When I close the thickbox, it launches another download. Ideas?
Buenísimo el Codigo lo voy a usar para esta pagina http://www.publicistasenred.es/
Gracias
Estupendo Gera! I’m glad it’s useful to you.
Tierra, maybe your server is not serving the pdf files correctly?
I have the same error as Tierra, Matthaus and Ross. It seems to only be in IE on a PC. Can anyone confirm?
The plugin works perfect on my site, I’m using WordPress 3.01
I use it to show visitors my film scripts.
I’ve also widened it a lot, so the customisation is great too.
Works on all browsers, the only problem I have with it is when I use Google Translator for my international visitors (I have a plugin for this)- It will not work then.
Here’s a page where it’s being used:
http://kriskoster.com/2010/08/spending-3000-usd-on-48-frames/
It’s a shame I can’t change the wording from ‘Launch PDF’ It seems to revert to that phrase wherever I change the woding.
However, I can live with those niggles… The plugin is great thank you!
Actually, I went to have a proper look across all browsers. It does work for me on latest versions of Firefox and Google Chrome. It doesn’t work on IE8 (empty white box)…
Many thanks!
wow Kris, those images on your articles are shocking, Primal Scream did a great job on bringing your striking vision to life!
I will be checking this issue on IE8 (maybe it’s just due to the Thickbox script) and will let you know later.
[...] Visit Source. 0 Comments [...]
i have install ilc-pdfbox plugin in wordpress 3.0.1 then i put class=”thickbox pdfbox” in anchor. when i click link it open popup but pdf not load. ex. Launch PDF file.
please help me.
This plugin is outstanding! Thank you and well done!
How to view multiple. Pdf file in a single post with this plugin
Does this plugin work when NGGallery is activated? I can’t seem to get the plugin to work….
Also, has the Colorbox fix been applied as mentioned up the top?
Sorry, got the plugin to work finally. When I was uploading my PDF I wasn’t clicking ‘file URL’ before inserting the link into the post. This was making the PDF launch on a new wordpress page and not allowing the plugin to work.
Could someone PLEASSSSEEE work out how to allow multiple PDFs in the one page. This plugin is great and so close to being perfect. Have tried inserting the JQuery code as mentioned above into my header file but still can’t get it to work. Even if we cant have multiple PDFs it would be great to just be able to have it display just one PDF and allow links for the others without the thickbox appearing….
To display multiple pdf’s in a single page use this function instead of the existing one.
function ilc_pdfbox_thecontent ($content){ global $post; global $pdfbox_width; global $pdfbox_height; $pdfbox_height_plus = $pdfbox_height + 15; $pdfbox_height += 35; $pattern = "/<a>]*).(pdf)('|\")(.*?)>(.*?)/i"; $replacement = '<a href="#TB_inline?height='.$pdfbox_height.'&width='.$pdfbox_width.'&inlineId=ilc_pdfbox_##" rel="nofollow">Launch PDF file.</a> '; 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; }Darn Blog stripped half the code out of my above post.
Beany, thanks for sharing this. I’ve updated your comment to prevent tag stripping.
I’ll try to check it out during the weekend to see how it works.
love the plugin
thanks for sharing
Help I can’t make this work. I need to post a large PDF Archive on one page please help?
Hi !
It doesn’t work with the last version of Firefox. Firefox try to open the pdf file when i load the page (like this one).
Can anyone help me ?
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.
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.
It`s working
thanks a lot
[...] plugin comes from the I Love Colors site and is slightly different to the above, whereby it does not display the PDF within the document, [...]
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!!!