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
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.
Use the extendable button extension to put a title and description for each image within the AJAX-ZOOM viewer. For testing:
<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>
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.
jQuery.axZmEbextension is implemented
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!