No New Messages
author avatar
Syed Reza
1450806594815 | PROJECT

XKCD Embedder

This is a very silly little project. Everyone loves XKCD, and I wanted to embed a few of my favorites into a blog or whatever. For any other comic-strip it might make sense to simply take the image and put it in an image tag. But as any avid reader of XKCD is aware, each comic has a fun hover-text.

And so what does this mean? It means that the comic image alone is not a complete representation of the comic. And so you lose some information in only displaying the image. Of course, you can add the alt-text as well. But unfortunately, alt-texts are not good on mobile screens - hover effects in general are not good on mobile. So you want an on-click display of the alt-text. With the addition of a little "Add to favorites" feature, it eventually became a full widget.

No one actually uses this as far as I know, but it exists.

View on Github


A small bit of JS for embedding XKCDs. Embed the latest XKCD, a particular XKCD, or a random XKCD.

For sample usage see xkcd-embedder.fahmidur.us

Usage

The usage is quite simple.

Setup

In your header place add the stylesheet:

<link rel='stylesheet' href='http://xkcd-embedder.fahmidur.us/css/xkcd-embedder.css'/>

At the end of your body place:

<script src='http://xkcd-embedder.fahmidur.us/js/xkcd-embedder.js'></script>

Normal Usage

For the latest XKCD:

<div class='xkcd-embed' data-id='latest'></div>

For an XKCD with a particular ID:

<div class='xkcd-embed' data-id='1'></div>

For a random XKCD:

<div class='xkcd-embed' data-id='random'></div>

You can also set the maxWidth if you need it.

<div class='xkcd-embed' data-id='random' data-maxWidth='400px'></div>