Advanced iFrame Pro Standalone

Overview

This is the standalone version of the Advanced iFrame Pro. It has all main features like the Wordpress version but can be used without a Wordpress installation. The configuration of Wordpress with the administration backend and the use of shortcodes moved into a settings file.

Please read the quick start guide first.
You find also the available settings at: documentation/Advanced iFrame Pro attribute help.htm!

Requirements

JQuery (tested with JQuery 1.11)
The php version depends on the features you want to use. php >= 5.3 does support all features.

Installation

Upload the content of this zip file anywhere to your webserver and keep the current structure of the zip file. The additional files you need for the standalone version are in the folder "standalone":

standalone-advanced-iframe.php - The file you need to include to your php file at the place where the iframe should appear. Do not copy this file somewhere as the paths in there are important.
standalone-advanced-iframe-settings*.php - The setting files. Here you place your settings. Setting files NEEDto the on the standalone folder! The folder 'standalone' does contain the settings for all examples.
standalone-example.php - An example file with many working examples
standalone-ai_external.js - This file is needed for the external workaround. Please see the description below.

Usage

To include the iframe to you page you first have to include the following scripts :

jQuery - if not present already. Has to be included before the ai.js
/js/ai.js - The Javascript file of Advanced iFrame Pro. Can be included at the bottom of your page.

e.g.

Then include the file 'standalone-advanced-iframe.php' at the place you want to include the iframe

include 'standalone-advanced-iframe.php';

This creates an iframe with the settings found in standalone-advanced-iframe-settings.php.

There are the following additional settings you can set:

$ai_settings_file - this defines the file with the settings. Default is 'standalone-advanced-iframe-settings.php' Please see the many examples included in the 'standalone' directory. All settings files need to be in the 'standalone' folder!
$iframeStandaloneOptions - you can also define the settings array directly before you include standalone-advanced-iframe.php. e.g. $iframeStandaloneOptions = array('id' => 'example1', 'src' => 'http://www.tinywebgallery.com', 'width' => '600', 'height' => '300');
$site_url - Defines the root folder of this plugin. The code tries to detect the full absolute url automatically. This is needed for the additional resources like Javascript and images. Check the network tab of a developer plugin and see if all files are loaded. If not please specify this paramter manually. e.g. $site_url = 'http://www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe';

If you used lazy loading you need to include the scripts before you include standalone-advanced-iframe.php because an additional jQuery plugin is loaded dynamically and jQuery has to be loaded before. Also make sure that you only include jQuery once!

e.g.

$site_url = 'http://www.yourdomain.com/path-to-advanced-iframe-parent-folder/advanced-iframe';
$ai_settings_file = 'standalone-advanced-iframe-settings2.php';
include '../../advanced-iframe/standalone/standalone-advanced-iframe.php';

All possible settings are listed at Advanced iFrame Pro attribute help.

You can use any of the examples of the pro demo. Simply use the shortcode attributes without the security_code and the use_shortcode_only. For examples how to use the external workaround please see the next section!

Working examples can be found at standalone-example.php. Please check the source of this page for details.

External workaround

One important difference to the Wordpress version is the usage of the external workaround. In the wordpress version the ai_external is generated with the settings from the database while for the standalone version the file standalone-ai_external.js has to be used and the configuration has to be made before you include the file!
So please check especially "How to configure the workaround to work with different settings for different iframes" -> Show me the parameters. It is important that the variable domain_advanced_iframe which points to the root of the plugin has to be set! The following example enables the auto height and keeps the iframe hidden until fully loaded:

var domain_advanced_iframe = 'http://www.yourdomain.com/advanced/iframe/root';
var updateIframeHeight = 'true';
var hide_page_until_loaded_external = 'true';
<script src="http://www.yourdomain.com/path/standalone/standalone-ai_external.js"></script>

The recommended way to set the variables, is to place them into a seperate config file and include dem before the script. Than you are able to change the settings from your system anytime. This would then e.g. look like this:

Using the alternative way by using standalone-ai_external.js?configid=4 does also work but than the config file has to be in the main directory of the plugin.

Working examples can be found at standalone-example.php. Please check the source of this page for details.

Area selector

Advanced iframe pro also has an included area selector for the "Show only a part of the iframe" feature
includes/advanced-iframe-area-selector.html
Please ignore the warnings that you should open the file in Wordpress. The attributes in the shortcode you see there can be used 1:1 in a settings file!

More help

This file does contain the basic information how to use the plugin standalone. For more information please check the following sources:

FAQ
Advanced iFrame Pro demo
Advanced iFrame Support
Advanced iFrame comparison chart
Install the plugin in Wordpress and do the configuration there. The administration has additional checks and a short code generator.

Have fun using Advanced iFrame Pro
Michael