examples       downloads       skins       docs       support       buy
 
     
 

Install & Setup

1. Download Pickle package.

  If you haven't done so already, click here to download Pickle.

2. Unzip the package.

When unzipping the package, be sure to keep the directory structure in-tact.

 

3. Install (upload)

Create a new folder named "pickle" on your web site. You can use any name for this new folder, but be sure to use only alpha-numeric characters, spaces and punctuation should not be used.

Example

http://www.yoursite.com/pickle

 

Upload all of the Pickle files and folders to the newly created "pickle" folder.

Here is an example of what Pickle should look like on your site:

 

 

4. Setup

Using a web browser, navigate to the "_SETUP.html" file located within the newly created Pickle Installation Folder.

Example

http://www.yoursite.com/pickle/_SETUP.html

 

Click on a skin image you would like to use, then enter the URL to a media file in the "Media File" field.

Copy and paste the resulting HTML code into a new or existing HTML page,

- The first two lines of code anywhere between the opening <HEAD> and closing </HEAD> tags.

- The third line goes anywhere between the opening <BODY> and closing </BODY> tags.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>My Page</TITLE>
<script src="/path/to/pickle.js" language="JavaScript"></script>
<link href="/path/to/_stylesheet.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY>
<div data-media="/path/to/mySong.mp3" ></div>
</BODY>
</HTML>

 

The "<script ..." and "<link ..." lines only need to be included within the <HEAD> one time.

These two lines must appear on every HTML page you wish to use Pickle on.

We recommend using the "from the root" absolute URL within these lines. This will allow you to quickly copy and paste these two lines of code on any page throughout your site.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>My Page</TITLE>
<script src="/pickle/pickle.js" language="JavaScript"></script>
<link href="/pickle/skins/slick/_stylesheet.css" rel="stylesheet" type="text/css">
</HEAD>

 

IMPORTANT NOTE: We highly recommend including the <!DOCTYPE html... line in your page in order to ensure Pickle renders properly across all browsers.

 

 

 

 

  
 
© 2012 Plaino LLC. All Rights Reserved.