Latest version: 5.4.0 (Change Log)
Release date: June 1st, 2019
Download AJAX-ZOOM Software

AJAX-ZOOM «expandable button» extension

Posted on 2019-04-02
Last reviewed on 2019-04-12

Besides the core files of the AJAX-ZOOM viewer, the AJAX-ZOOM package contains several extensions, which were written to enhance the functionality in specific use cases and examples. The one extension that has not been thoroughly documented yet is the "expandable button". It is used only indirectly, and therefore there are no examples that solely address that extension. This article provides the documentation of the extension in full.

Extension version: 3.1
Extension date: 2019-04-12

Within the many AJAX-ZOOM features, we use this extension only indirectly. Specifically, it applies only within the "product tours" and "hotspots" examples as a suboption.

The extendable button extension creates a button with a title in a definable parent container. The position or gravity of the button can be set via an option as well. When the user clicks on it, the button expands to the size of its parent container and adds farther content to the overlay. The content may contain HTML. Additionally, there is a "shortcode" for iframe source and content to retrieve via an AJAX request.

Depending on the settings, you can also use this extension without a button, which needs to be clicked to expand. Thus it can just create a semi-transparent overlay over the body or inside any other definable container.

In case the content in the expanded state is larger than the viewport, the extension can use the AJAX-ZOOM thumbnails slider extension switched to "content mode" to produce an excellent cross-browser and device scrolling functionality.

Additionally, you can set the size of the text relative to the size of the parent container. If the parent container is not the body (full page or full-screen view), the latter is not easily possible by using only CSS.

When the expandable button appends to the AJAX-ZOOM viewer, and the user opens it, all UI elements of the viewer temporary hide automatically.

Demo extendable button

Use the extendable button extension to put a title and description for each image within the AJAX-ZOOM viewer. For testing:

  • The description of the first image in the gallery contains some HTML.
  • The description of the second image uses the iframe shortcode to display a YouTube video.
  • The third description has just some text in it.
  • The fourth description loads the 360 view of the image in the gallery.
  • The fifth image does not have any description but only a title.
  • The the last image has neither title nor description.
Loading, please wait...

Code demo (for developers)

Create a HTML container for the viewer


		<div class="embed-responsive" style="padding-bottom: 60%; clear: both;">
			<!-- Placeholder for AJAX-ZOOM player -->
			<div id="axZmPlayerContainer" class="embed-responsive-item" style="max-height: 70vh; max-height: calc(100vh - 100px); ">
				Loading, please wait...
			</div>
		</div>
		

Initiate the viewer

The code below initiates the AJAX-ZOOM viewer and uses AJAX-ZOOM callbacks to place the extendable button with title and description depending on the particular image that displays now.

Documentation

OptionDefaultDescription
title null The title of the button. If you skip the title and only provide the descr option, the button expands (the overlay opens) instantly.
descr null The HTML content inside the overlay. If you omit the descr option and define the title option, the script creates a button without any action attached to it. There are a few shortcuts that you can use instead of HTML description:
  • iframe:scr
  • ajax:url
The iframe shortcode creates an iframe with the src (link) you provide, e.g.

			jQuery.axZmEb({
				par: "body",
				parO: "body",
				descr: "iframe:https://www.ajax-zoom.com/examples/"
			});
			
The ajax shortcode gets the content via an AJAX request.
lnk null The script creates a simple link that triggers on click instead of an overlay containing description. This option requires a title for the button and is there for the convenience of using this script for various purposes.
fnc null The script creates a button and triggers a JavaScript function associated with this option when the user clicks on the button.
par "#axZm_zoomLayer" This option is the selector for the parent element to which the script appends the button.
parO "#axZm_zoomLayer" The selector for parent element in which the script opens the overlay. Use "body" for the full browser window.
iframeHeader false Enable this option if you use the "iframe:scr" shortcode in the descr option and want to leave a space for a title at the top of the overlay. In this case, the parent container of the iframe receives the axZmEb_DescrIframe CSS class, which has a 60px top margin.
gravity "top" The position of a button inside its parent container. Possible values are: "topLeft", "top", "topRight", "bottomLeft", "bottom", "bottomRight", "center".
marginX 5 The horizontal margin of the button to the edge of its parent container.
marginY 5 The vertical margin of the button to the edge of its parent container.
openSpeed 300 Duration of the opening animation in ms.
closeSpeed 300 Duration of the closing animation in ms.
fadeInSpeed 200 The buttons fade in animation duration in ms.
closeIcon Icon for close button. You can also use the i HTML element.
autoOpen false Instantly open the overlay as soon as the button creates. If there is no title but a description, the "autoOpen" option enables automatically.
removeOnClose false If you enable this option, the button is removed when the extended state (overlay) closes. If there is no title but a description, the "removeOnClose" option enables automatically.
zoomSpinPanRemove false If this option is enabled by setting it to true, the button is removed when the view within the AJAX-ZOOM viewer changes. Additionally, if this option is a string, it is interpreted as a selector to remove "selected" class from the child li elements of the selector.
classPref "axZmEb_" The prefix for the all CSS classes, see /extensions/jquery.axZm.buttonDescr.css
arrow true Show an arrow icon inside the button, which indicates that it is expandable.
arrowIcon Icon for the arrow. You can also use the i HTML element.
single true Closeses / removes other instances instantly.
thumbSlider true Use jQuery.axZmThumbSlider in "content mode" to overflow text. Requires axZmThumbSlider JavaScript and CSS files. You can read more about the slider here.
thumbSliderOpt {...} Slider options, when thumbSlider option is enabled. The default values are:

{
	contentMode: true,
	centerNoScroll: false,
	outerWrapPosition: 'absolute',
	contentStyle: {background: 'none', padding: 0, paddingRight: 25},
	scrollbarTrackStyle: {background: 'none'},
	wrapStyle: {borderWidth: 0},
	btn: false,
	orientation: 'vertical',
	scrollbar: true
}
			
tapHide true Temporary disable all other UI elements inside AJAX-ZOOM viewer.
dblClickClose true Closes expanded state (the overlay) on double click.
dynText true General switch that sets the font size for the elements of this script relative to the size of the parent container.
dynTextBtn [...] Button title in not expanded state, default:

[
	{'base': 0.016, 'min': 12, 'max': 24, 'important': true}
]
			
dynTextTitle [...] Title in expanded view. The default value is:

[
	{'base': 0.016, 'min': 18, 'max': 36, 'important': true}
]
			
dynTextDescr [...] Description in expanded view. The default value is:

[
	['*', {'base': 0.012, 'min': 12, 'max': 24, 'important': true}],
	['h3', {'base': 0.016, 'min': 16, 'max': 32, 'important': true}]
]
			
You can differentiate the settings by tags or CSS class selectors.
hideScrlBar true Hide the window scrollbar if parO options value is body.
onCloseEnd null A possilbe callback funnction that triggers when the button closes.
onOpenEnd null A possilbe callback funnction that triggers when the button openes / expands.
onAjaxLoad null A possible callback function that triggers on success when descr content is retrieved via an AJAX request.
onIframeLoad null A possible callback function that triggers when iframe:src in the descr content loads.
Last updated: 2019-04-12

AJAX-ZOOM Examples

Some of the many AJAX-ZOOM examples where the jQuery.axZmEb extension is implemented

example33
example33_clean
example35
example35_adaptive
example32_axZmMode
example32

Comments (0)

Leave a Comment

Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, your personal image will be attached every time you comment.

To use live-support-chat, you need to have Skype installed on your device. In case live support over Skype is not available immediately, please leave us a message or send an email by using the contact form.

We answer every inquiry or question that relates to the AJAX-ZOOM software!

Live-Support-Chat