Advanced iframe pro standalone examples

This are some examples how to use the advanced iframe pro plugin standalone without wordpress. The examples below start from a simple include but also show many of the examples you already find in the pro demo. See the setting files below as examples. standalone-advanced-iframe-settings.php is the default if nothing is specified.

All settings have to be defined in an array $iframeStandaloneOptions where you can use ANY shortcode attribute! Simply use the shortcode attributes without the security_code and the use_shortcode_only.

Please read the readme.html first as there you find very important information about the setup there.

This page does load several settings files and includes the standalone-advanced-iframe.php several times. So please check the source code of this page and the setting files of each example.
You see that the settings file do match a standalone shortcode exept that no security key is needed.

Simple iframe example

This simple example shows the TinyWebGallery homepage with the following features:

Simply include of www.tinywebgallery.com
Lazy load
Show iframe loader

The settings file is: standalone-advanced-iframe-settings.php

$iframeStandaloneOptions = array(
    'id' => 'example1',
    'name' => 'example1',
    'src' => 'http://www.tinywebgallery.com',
    'width' => '600',
    'height' => '300',
    'enable_lazy_load' => 'true',
    'show_iframe_loader' => 'true'
);

Show only a part of the iframe

If you are not on the same domain and you are not able to modify the external page you want to include than the only option you have is to use the pro version and include only a part of the iframe. For this solution you need to specify the size if the iframe and also a "viewport" that defines which area you want to show. This example can also be found for Wordpress here.

The settings file is: standalone-advanced-iframe-settings2.php

$iframeStandaloneOptions = array(
    'id' => 'example2',
    'name' => 'example2',
    'src' => 'http://examples.tinywebgallery.com/example1u2/screenshot.html',
    'width' => '1000',
    'height' => '2000',
    'show_part_of_iframe' => 'true',
    'show_part_of_iframe_x' => '290',
    'show_part_of_iframe_y' => '670',
    'show_part_of_iframe_width' => '570',
    'show_part_of_iframe_height' => '320',
    'enable_lazy_load' => 'true',
    'show_iframe_loader' => 'true'
);

Auto height on the same domain

This example shows how auto heigth and css modifications are used with the standalone version.
The following features are shown:

The following page is included: ../example/example_detail1.html
Auto height on the same domain
Modification of the css on the same domain. Header and footer was removed and the textcolor was changed

The settings file is: standalone-advanced-iframe-settings3.php

$iframeStandaloneOptions = array(
    'id' => 'example3',
    'name' => 'example3',
    'src' => '../example/example_detail1.html',
    'width' => '700',
    'height' => '100',
    'onload_resize' => 'true',
    'iframe_hide_elements' => '#iframe-header,#iframe-footer,#iframe-navigation a',
    'iframe_content_id' => '#iframe-navigation',
    'iframe_content_styles' => 'color:#f00'
);

Auto height using the external workaround

This example shows how the external workaround is used with the standalone version. 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! Examples of the external workaround can also be found for Wordpress here. The following features are shown:

The following page is included: ../example/example_standalone.html
Auto height on a different domain
Modification of the css on a different domain. Only #iframe-right is shown and the text color was changed.
Resize on element resize on a different domain

The settings file is: standalone-advanced-iframe-settings4.php

$iframeStandaloneOptions = array(
    'id' => 'advanced_iframe',
    'name' => 'advanced_iframe',
    'scrolling' => 'no',
    'width' => '950',
    'height' => '200px',
    'src' => '../example/example_standalone.html',
);

The settings for the external workaround are stored in a file called: standalone-ai_external_config_4.js

    var iframe_id="advanced_iframe";
    var updateIframeHeight = "true";
    var keepOverflowHidden = "false";
    var hide_page_until_loaded_external = "true";
    var onload_show_element_only = "#iframe-right";
    var iframe_content_id = "#iframe-right";
    var iframe_content_styles = "float:none;height:auto;color:#ff0000;";
    var resize_on_element_resize = "#iframe-right";
    var resize_on_element_resize_delay = "50";
    var domain_advanced_iframe = '../';

This is the code you need to include into your external file:

More examples

As you most likely have found out, you can simply 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 that use the external workaround you have to use the provided standalone version standalone-ai_external.js instead the ai_external.js AND you need to set domain_advanced_iframe before you include the Javascript (see the "Auto height using the external workaround" example above).

Have fun using Advanced iFrame Pro
Michael