v0.1.0 Home

For v0.1.0

Showpony is a multimedia engine currently under development. This wiki may be out of date or missing vital information right now. Please check the date and if it's too far back, be wary!

Let me know if you'd like to contribute and help make it better!

Setting up Showpony

1. Download Showpony

Go to releases and download the latest release. Click the link "Source code (zip)".

2. Place the Showpony files

You only need to keep the showpony folder and the parts-folder-files folder. Put the showpony folder in the same folder as your story will be; for example, if your still will be located at example.com, put the showpony into that folder. Keep all of the files in this folder.

In parts-folder-files, you'll see an .htaccess file. This allows you to keep files hidden from the public before they go live (you'll still be able to access them on the backend and using the admin panel). Put it into each folder you will use for your showpony story files (or just rename parts-folder-files to whatever you want).

3. Place your story files

Plop the files into the folder! The only requirement here is that your files must be in alphabetical order to show correctly on the website; alphabetically, your first file must come before your second file, and so on.

One trick here is that Windows will order files a little differently than the code will: "1" will show up before "2", but "1" will not show up before "02"- leading zeroes are important if you start your filenames with numbers!!!!

If you want to learn about more advanced settings, go to Story File Names.

5. Link to the files in your HTML file

If Showpony will be on the home page, this will likely be index.html. Load the JavaScript and CSS files from Showpony. You can copy-paste the code below into your file if you want:

<link rel="stylesheet" href="showpony/showpony.css">
<script src="showpony/showpony.js"></script>

6. Create a window for the Showpony object

The window is what your story will display in. I recommend using a div. You can copy-paste the following line of code into your website:

<div id="showpony"></div>

And then styling it similarly to this. You can copy-paste the following code into your website:

<style>
    #showpony{
        width:640px;
        height:480px;
        margin:auto;
    }
</style>

NOTE: don't use classes that start with "showpony-". These are reserved by the engine. You can go into showpony.css to adjust the display of engine pieces if you like.

6. Create a Showpony Object in JavaScript

A basic Showpony object takes 4 lines of JS. You can paste the following code below the code above in your .html file:

<script>
    new Showpony({
        window:document.getElementById("showpony")
        ,path:"files/"
    });
</script>

Just set the text after path: to "your-folder-name/". The quotes and the slash are important!!!!

You should now have a functional Showpony in your webpage! For more advanced features, check out JavaScript Object, Admin Access, and Story File Names!