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:
- Play Cat vs. Ball of Yarn
- Culture Solutions Group
- Denver Geeks Website
- Ghost Flip-Book Theme Demo Site
- Ghost Pub
Below is the actual content of the HTML block just above.
<ul>
<li><a href="https://framer.cc/cat-vs-ball-of-yarn/" rel="dd" data-loadtype="iframe">Play Cat vs. Ball of Yarn</a></li>
<li><a href="https://culturesolutionsgroup.com" rel="dd" data-loadtype="iframe">Culture Solutions Group</a></li>
<li><a href="https://denverit.com" rel="dd" data-loadtype="iframe">Denver Geeks Website</a></li>
<li><a href="https://flip.ghost.pub" rel="dd">Ghost Flip-Book Theme Demo Site</a></li>
<li><a href="https://ghost.pub" rel="dd">Ghost Pub</a></li>
</ul>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:
http://www.dynamicdrive.com/dynamicindex17/ajaxsidepanel.htm