Frontpage Slideshow [Standalone]

JoomlaWorks has developed a non-Joomla! distribution of Frontpage Slideshow to work on every website that supports PHP as a minimum requirement. We call this distribution Frontpage Slideshow "standalone". It's ideal for usage on non Joomla! websites, like for example your corporate php website or your Wordpress blog or Drupal website! You can obviously use this version on any CMS that is based on PHP!

The following instructions apply to the all versions released after Sept. 29th, 2010 (v2.x).

DOWNLOADING

Login to your Member Dashboard and grab the latest release from your "My Subscriptions" page. An active membership is required.

INSTALLATION

Locate (or download from your purchase email) the file FrontpageSlideshow-vX.X.X_STANDALONE.zip (where X.X.X is an incremental version number), extract it and upload its contents (a folder called "fpss" and the example page called example.php) on the root of your website. So if were uploading this to joomlaworks.net, I should see the example.php page by requesting joomlaworks.net/example.php.

Let's quickly setup the demo slideshow included within:

1. After you upload the files to your server, you need to edit the example.php to alter the php snippet which will bring up the slideshow. Use an FTP client to open/edit the file directly from your server (or do it locally and upload again)...

2. Inside the example.php file you will see this PHP code block (snippet):

<?php
  /* Frontpage Slideshow: Setup Steps */
  /* Please refer first to the online documentation here:
http://www.joomlaworks.net/docs/frontpage-slideshow-standalone */

// 1. Enter the name of your slideshow $slideshow = "demo"; // 2. Enter your site's URL (without trailing slash) $siteURL = ""; // e.g. http://www.site.com or http://www.site.com/folder if your site is in a subfolder // 3. Enter the absolute path of your site on the server (without trailing slash) $sitePath = ""; // e.g. /home/user/public_html or /home/user/public_html/folder if your site is located in a subfolder
// Include the slideshow include_once($sitePath."/fpss/fpss.php"); // DO NO EDIT THIS LINE ?>

 

3. You need to fill in the right paths for $siteURL and $sitePath. $siteUrl represents the actual URL of your site. If I were uploading the Frontpage Slideshow package to http://www.mysite.com (at the "root" of the site), the this full URL is what you should write in: $siteUrl = "http://www.mysite.com"

If you were uploading to a subfolder inside your site, you would write something like: $siteUrl = "http://www.mysite.com/somefolder"
You also need to specify the $sitePath value. This is the actual folder path on the server for your site. On servers using the popular cPanel webserver software, this path is usually something like: /home/yourUserName/public_html

If you use mutliple (add-on) domains on your cPanel powered hosting account, then the above path would be something like: /home/yourUserName/public_html/mysite.com

If you use Plesk or any other similar to cPanel software, then configurations are similar. If you ask your hosting company, they will be able to provide you with the "absolute path of your site on the server".

4. Once you fill in those values and provided they are correct, open up your browser and request the example.php page - so you should see something like this: http://www.frontpageslideshow.net/demos/standalone/example.php

Now let's see how to actually create a new slideshow and publish it on your site:

1. Slideshows in the standalone edition of Frontpage Slideshow are basically folders within /fpss/slideshows/ that contain a parameters file, a data file and a folder with the associated slideshow images.

2. Navigate inside the folder "fpss", then "slideshows", copy the folder "demo" (inside the same directory) and rename the copy to something descriptive, e.g. "frontnews". This will act as the folder for your new slideshow. Inside there you will find 2 files and 1 folder as we already mentioned. It is important that you maintain this structure of the slideshow folders. That means you ALWAYS put your slide images inside the "images" folder, your parameters are on the parameters.php file and the slideshow data (contents) are on the data.php file. See a sample structure below:

/fpss
   |-- /slideshows
            |-- /yourSlideshowFolder
                      |-- /images
                      |-- data.php
                      |-- parameters.php

You can obviously change "yourSlideshowFolder" to whatever you want and of course have multiple such folders inside /fpss/slideshows/.

3. Assuming you copied the "demo" folder slideshow and renamed it to "frontnews", let's now edit the contents of the slideshow. First you edit the parameters.php file to adjust the slideshow language (English/French - you can add more languages on your own), the slideshow engine, the template and so on. There are detailed instructions on each parameter specified in the parameters.php file. Then you need to edit the data.php file and replace the existing arrays of data with your own. Again the variables on the left side of the arrays are self-explanatory: title, category, link etc. See how the demo data were used to better understand what each variable represents. Once you finish editing these files, you need to upload your own images inside the /fpss/slideshows/frontnews/images/ folder. Assuming you have added the image filenames properly inside data.php, you can go back to the example.php file and replace the $slideshow variable inside the PHP snippet to "frontnews".

Request again the example.php page and you can see your new slideshow in action.

4. If you want to add this slideshow you created on some actual page on your site (or inside the template of your WordPress, Drupal or other CMS), you only need to copy that PHP snippet as mentioned earlier (when setting up the demo slideshow). The page you will be pasting this PHP snippet must be a PHP page. See some examples below for setting up the slideshow on WordPress and Drupal.

INSTRUCTIONS FOR WORDPRESS, DRUPAL and other CMS users...

When using a CMS like Drupal or WordPress (or any other PHP based CMS), the steps to add Frontpage Slideshow in your template/theme are exactly the same as the above.

  • For Drupal users, add the Frontpage Slideshow PHP snippet inside the page.tpl.php file of your theme, located in /themes/yourtheme/
  • For WordPress users add the Frontpage Slideshow PHP snippet inside the index.php file of your theme, located in /wp-content/themes/yourtheme/
  • In a similar manner you can add Frontpage Slideshow on other popular CMSs like Textpattern, e107, CMS Made Simple, XOOPS, Magento (e-commerce), Zen Cart (e-commerce), osCommerce (e-commerce), Simple Machines Forum (SMF) (forum), phpBB (forum) and many more.

DEMOS

You can see Frontpage Slideshow "Standalone" running in the following demos sites we prepared:

TEMPLATING

From version 2.0 and after, Frontpage Slideshow "standalone" features a cleaner, easier, Joomla!-like way of editing existing slideshow templates or creating your own.

All slideshow templates are represented as folders and located inside /fpss/templates/. For example, the files for the slideshow template called "Movies", which is used on the above demos, are located inside: /fpss/templates/Movies/

There you will generally find:
  • a "css" folder containing the template_css.php dynamic CSS file (and other CSS files for IE) controlling the looks of a slideshow template
  • an "images" folder with the images used to create the specified template
  • a default.php file which is used for the HTML output of the slideshow, containing several PHP variables used to display the elements of slide.
  • other files or folders that compliment the slideshow template (e.g. "psd" provides Photoshop versions of graphics used in a slideshow template).

We generally do not recommend editing the default slideshow templates, which are valuable as a reference for your own. It's best to just duplicate the folder of a slideshow template, then edit its contents to create your own, custom template.

To see your new template, you just have to specify the name of its folder inside the parameters.php file of your slideshow.

LOCALISATION

Frontpage Slideshow "standalone" comes bundled with 2 language files for English and French. The messages contained in those files are used by the slideshow templates to output stuff like "Naviage to...", "Play/Pause slideshow" etc. If you want to add your own language or edit those messages, just duplicate the english.php language file, rename it to your language (e.g. italian.php) and then edit the messages contained in there.

Once you're done, you have to edit the parameters.php file of your slideshow to specify your new language. If the language file was italian.php, we would input "italian" inside the related option in the parameters.php file.