Get comics from comments
Someone linked all the old comics, but I didn't want to open each page individually, so here is JQuery for it.
by MegaScience
HTML
<div id="comic-container">
<div class="row">
<div class="small-12 medium-12 large-12 columns">
<img src="//files.explosm.net/comics/Rob/newyears2016.png" id="main-comic">
</div>
</div>
</div>
<div data-comment-id="18094" class="comment-container loaded" id="comment-18094">
<div class="row">
<div class="small-12 large-12 columns comment-body-container">
<div class="row">
<div class="small-12 large-12 columns">
<a href="#"><img src="//files.explosm.net/avatars/default.jpg" class="avatar left"></a>
<span class="zeta comment-username">Silvercat750</span>
<small class="comment-meta-data">1 day ago</small>
</div>
</div>
<div class="row">
<div class="small-12 large-12 columns">
<p>2006: Guys stand in front of time machine</p>
<span data-comic-src="http://explosm.net/comics/391/"><img src="//files.explosm.net/comics/Rob/newyears.jpg" id="main-comic"></span>
<p>2007: Guys still stand in front of time machine</p>
<span data-comic-src="http://explosm.net/comics/759/"><img src="//files.explosm.net/comics/Rob/newyears07.PNG" id="main-comic"></span>
<p>2008: Guys create an infinite loop of liquor desire</p>
<span data-comic-src="http://explosm.net/comics/1129/"><img src="//files.explosm.net/comics/Rob/newyears08.png" id="main-comic"></span>
<p>2009: Guys visited by prostitute versions of themselves from 2010</p>
<span data-comic-src="http://explosm.net/comics/1513/"><img src="//files.explosm.net/comics/Rob/newyears09.png" id="main-comic"></span>
<p>2010: Guys supposedly travel to 3000 in search of glasses</p>
<span data-comic-src="http://explosm.net/comics/1907/"><img src="//files.explosm.net/comics/Rob/newyears10.png" id="main-comic"></span>
<p>2011: Guys stand in front of time machine discussing survival</p>
<span...
CSS
.left {
float: left;
}
.avatar {
margin-bottom: 1rem;
margin-right: 1rem;
max-width: 96px;
}
.inline-list.left {
list-style: outside none none;
margin: 0 0 1.0625rem -1.375rem;
overflow: hidden;
padding: 0;
float: right;
}
hr, span {
clear: both;
}
JavaScript
// For: http://explosm.net/comics/4166/
if (!document.querySelector('span[data-comic-src]')) {
var crap = document.querySelector('div#comment-18094 .comment-body-container .row:nth-child(2) .columns');
crap.innerHTML = crap.innerHTML.replace(/http:\/\/explosm\.net\/comics\/([0-9]+)\//gm,
'<span data-comic-src="http://explosm.net/comics/$1/">Test</span>');
}
$('span[data-comic-src]').each(function() {
$(this).load($(this).attr('data-comic-src') + ' #main-comic');
});