This examples show the “Show only a part of an iframe zoom” feature which only available in the pro version of the advanced iframe.
This feature enables you to zoom a selected viewport with a fixed size. If you select an area on a different page it has a fixed width and height and this does normally look good on the Desktop version of your page. But when you go to a tablet or a mobile device the space available is normally much less. Before version 7.0 the selected area was static and did not change the size depending on the available space. Now you can enable that this eara is zoomed to the available space. In most cases this means if you are e.g. on a smart phone the area is now displayed smaller. Depending on your needs the content is than too small! So please check if the zoom option is the right solution for you. The zoom is by default set that the selected area is not getting larger. But this can also be changes like you see in example 40. The zoom does even work together with “Hide a part of the iframe”.
- Example 39: Zoom a view port (new 7.0)
- Example 40: Zoom a view port which also enlarges (new 7.0)
- Example 41: Zoom a view port and “Hide a part of the iframe” (new 7.0)
- Example 43: Zoom a view port with loading indicator, scrollbars and ios scrolling support (new 7.0.4)
Example 39: Zoom a view port
This example shows the additional zoom when you set show_part_of_iframe_zoom = “true”. Below an iframe with a size of 480×200 is shown. Please make your browser smaller to see how it does shrink on smaller devices.
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com" id="advanced_iframe" height="600" width="1000" show_part_of_iframe="true" show_part_of_iframe_x="241" id="example39" show_part_of_iframe_y="200" show_part_of_iframe_width="480" show_part_of_iframe_height="141" show_part_of_iframe_zoom = "true"]
Example 40: Zoom a view port which also enlarges
This example shows the additional zoom when you set show_part_of_iframe_zoom = “full”. Below an iframe has a size of 480×200 But is adopted to the available space of the template.
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com" id="advanced_iframe" height="600" width="1000" show_part_of_iframe="true" show_part_of_iframe_x="241" id="example40" show_part_of_iframe_y="200" show_part_of_iframe_width="480" show_part_of_iframe_height="141" show_part_of_iframe_zoom = "full"]
Example 41: Zoom a view port and “Hide a part of the iframe”
This example is like example 39 with the additional support of “Hide a part of the iframe”. So the viewport and also the divs are zoomed.
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com" id="example41" height="600" width="1000" show_part_of_iframe="true" show_part_of_iframe_x="241" show_part_of_iframe_y="200" show_part_of_iframe_width="480" show_part_of_iframe_height="141" show_part_of_iframe_zoom = "true" hide_part_of_iframe="34,9,91,85,#ffff00,10,//www.tinywebgallery.com,_blank|234,9,91,85,#ffff00,10,//www.tinywebgallery.com,_blank"]
Example 43: Zoom a view port with loading indicator, scrollbars and ios scrolling support
This example is like example 5 with the additional support of zoom and a loading indicator. This feature is available since version 7.0.4!
And the shortcode which is used is:
[advanced_iframe securitykey="your key" use_shortcode_attributes_only="true" src="//www.tinywebgallery.com/en/features.php" id="example43" height="2200" width="940" show_part_of_iframe="true" show_part_of_iframe_x="165" show_part_of_iframe_y="170" show_part_of_iframe_width="650" show_part_of_iframe_height="375" show_part_of_iframe_allow_scrollbar_vertical="true" enable_ios_mobile_scolling="true" show_part_of_iframe_zoom="true" hide_page_until_loaded="true" show_iframe_loader="true"]