Slide-In Ajax/iFrame Panel

Here is a fun way to to display external websites in Ghost (with some limitations). This javascript is an "oldie but goodie" from a freebies site I used to spook around a lot back in the day. But it still works, and its still cool!

These are external websites sliding into view via this Slide-In Panel javascript:

Below is the actual content of the HTML block just above.

<li><a href="" rel="dd" data-loadtype="iframe">Play Cat vs. Ball of Yarn</a></li>
<li><a href="" rel="dd" data-loadtype="iframe">Culture Solutions Group</a></li>
<li><a href="" rel="dd" data-loadtype="iframe">Denver Geeks Website</a></li>
<li><a href="" rel="dd">Ghost Flip-Book Theme Demo Site</a></li>
<li><a href="" rel="dd">Ghost Pub</a></li>

What makes the slide-in work (besides the HTML block, as above, pasted into the post editor here) are 2 snippets of code I copied and pasted into my Ghost site:

one snippet of CSS (pasted into this site's Settings >> Code Injection >> Site Header) and...

one snippet of Javascript (pasted into this site's Settings >> Code Injection >> Site Footer)

You can get the script here: