Easy PDF Sharing

So everyone has been breaking my back over using SlideShare to distribute my presentations – and for a good reason: It’s not open and it uses a proprietary distribution format. Don’t get me wrong, I love SlideShare, but for what I was using it for (a way to embed presentations into a blog post), I think I can do a little bit better.

So, to quiet the complaining I wrote a little shell script this afternoon which converts a PDF into a set of images then builds a little HTML + JavaScript browser that you can copy-and-paste into your blog posts.

The script can be found here (requires that Image Magick be installed):
https://johnresig.com/files/pdfshare.sh.txt

Example:

Download PDF

Probably the best part of this little script is that it gracefully degrades for RSS readers. If you’re reading this in an RSS feed you should see an image above, linking you to the PDF version of the slideshow. Whereas, before, there would’ve been nothing (as Flash and other embeds are stripped from most RSS feed readers). It should be noted that the JavaScript navigation is also stripped, but at least it’s not completely useless.

If you’re viewing the slideshow on the site itself you’ll see little next/previous links for navigating through the slides. Yes, the JavaScript is really bad – I was going for brevity (so you’re not cluttering up your posts with a couple KB of code).

While building this I realized just how easy it would be to build a very-simple SlideShare competitor which only works with images + HTML + JavaScript.

Just to make it clear: I didn’t want to run off in my own direction to build and host these things, I’d rather have just kept using SlideShare. So I sat down with WireShark and figured out where the indvdual slides for my presentations were being stored, on Amazon S3. However, it completely burst my bubble as they’re storing the individual slides as SWFs, rather than as images. Oh well. If anyone knows if they store raw images anywhere, let me know!

Posted: November 11th, 2007

20 Comments (Show Comments)

1. Ryan (November 11, 2007 at 9:10 pm)

   That’s really cool!

   It is kinda annoying how your links are ‘#’, which causes my browser (Opera) to jump to the top of the page. preventDefault or stopPropagation?

2. John Resig (November 11, 2007 at 9:17 pm)

   @Ryan: Good catch! I forgot to change that before I uploaded it. It’s updated now and works nicely (using preventDefault and returnValue=false).

3. Sean (November 11, 2007 at 9:17 pm)

   Okay, that’s pretty l33t.

   You deserve a cookie (or a katana or something).

4. LinkTiger (November 11, 2007 at 9:58 pm)

   Awesome, awesome solution. Wicked awesome, in fact.

   Anyways, like usual, I have a tiny complaint: when one clicks “Next >>”, it appears nothing happens (the browser is actually loading the next image, as one can see from the status bar). It would be even more totally wicked awesome if a person could blank the current slide while the next is loading. I don’t know DOM scripting, so I don’t know how easy/hard that would be.

5. Hamish M (November 11, 2007 at 10:14 pm)

   That’s awesome John! I didn’t know Image Magick could read PDF’s like that. Good job.

6. John Resig (November 11, 2007 at 11:30 pm)

   @LinkTiger: Yeah, I was thinking the same thing, actually – having a mini loading indicator hovering over the slideshow – or maybe even pre-loading a couple images at a time (like how SlideShare does). I wanted to avoid having this become bloated, but it may be inevitable. If I start rolling in new features, then I’ll want to restructure this into a dedicated service with a single JS file that you can hotlink to.

7. Lalit (November 12, 2007 at 2:33 am)

   John,
   I am a developer at SlideShare. I follow your blog and your slidespace at SlideShare closely.

   That was a really neat hack. Just to let you know the reason why we chose to store SWFs instead of JPGs/PNGs for a slide, was scaling (in dimensions). SWFs scale very neatly and we can have players of different sizes from embeds to full screen.

8. John Resig (November 12, 2007 at 2:37 am)

   @Lalit: Yeah, that makes good sense. When I was messing around with the raw, individual, slides earlier I noticed that they scaled nicely (and, thus, can be imported easily into any size SlideShare widget).

   I still plan on uploading my presentations to SlideShare (it’s great to have them all in one place, categorized, etc.). Let me know if you guys would ever be interested doing a pure-JS + PNGs version of SlideShare – I’d love to see that happen.

9. Greg K Nicholson (November 12, 2007 at 4:29 am)

   SVGs scale nicely too (it’s even in the name), so perhaps SVG would be a better storage format than SWF.

   It’s openly specified, so if Adobe turn evil you’ll still have your data; and there are numerous options for converting to raster, so if ImageMagick gets too bloated you can switch to a better converter (or make your own).

10. John Resig (November 12, 2007 at 4:44 am)

    @Greg: It doesn’t seem like that would be possible with just Free Software. I found this page but it doesn’t sound hopeful. And even then, wouldn’t SlideShare have to build/use an SVG viewer just to show the slides? What they’re doing now is definitely a “path of least resistance”, and probably loads significantly faster, as well.

11. pawel (November 12, 2007 at 5:13 am)

    I would do loading indication this way:

    1. onload event on the image: this.style.visibility=’visible’;

    2. next/prev links onclick event add: elem.getElementsByTagName(‘img’)[0].style.visibility=’hidden’;

    3. background-image for the container like style=”background:url(loading.gif) 50% 50% no-repeat”

12. Vishnu Gopal (November 12, 2007 at 10:43 am)

    It’s pretty easy to convert a SWF to JPG too isn’t it? I guess ImageMagick or Ghostscript should be able to do it.

13. Craig Buchek (November 12, 2007 at 1:05 pm)

    I just write my presentations in HTML (actually, in a wiki these days) and add a class=”slide” around each slide. I throw in an old JavaScript file to hide all the slides except the current one, and to handle navigating through the slides.

    My script is really old, and I wasn’t that great at writing JS at the time. But the code is pretty simple. And it’s really simple to take an HTML or wiki page and turn it into a slide show, while still being completely HTML.

    Here’s my most recent presentation using my slide-show code:
    http://craigbuchek.com/presentations/2007-07-19/hdtv.html

    My method doesn’t really allow embedding like yours though, so it might not be a good fit for your use case.

14. Krus (November 17, 2007 at 6:57 am)

    Good Job

15. MUW (November 21, 2007 at 7:13 am)

    ‘Opera Show’ format is also pretty good….just design your presentations in in normal xhtml/css, this way you have the same content and have one stylesheet for pages and another for presentations. more on opera show over here

    http://www.opera.com/support/tutorials/operashow/

    Based on the above format is the s5 format evangelized by eric meyer. Its basically the same thing. More on s5 over here

    http://meyerweb.com/eric/tools/s5/

    I personally think that designining presentations in the above ways will be much more practical in the future (for web desginers and the like, not normal poeple who are comfortable with ppt), and thats because you could share it easily over the web, and of course you can have much better control over your own presentation by coding in normal xhtml/css/js

16. Walter Vargas (November 26, 2007 at 12:46 am)

    Good work John, and greetings from Venezuela, by the way a question, that distribution of linux you use and as he is your favourite text editor?

17. Alcides (November 27, 2007 at 7:23 pm)

    Just one tip: why don’t you preload the following 5 images? (and everytime you move to the next one, you will be loading one 5 slides ahead?

    It would make the experience much more friendly ;)

18. Stal (December 16, 2007 at 11:27 am)

    Thanks John. It’s great. Much appreciated :)

19. Mike (January 31, 2008 at 8:31 am)

    Nice solution. Unfortunately the images that Magick produce are pretty large (~100kb each for these slides).
    As mentioned pre-loading the next image would be great, and probably make a loading indicator unnecessary.

    Also the ability to link (in the URI) to a specific slide could be handy for long presentations.

20. Gavin S (June 16, 2008 at 4:53 pm)

    This code is now a google code project, so that it can be improved, and more features can be added.

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.