Creative Popup is built on standard web technologies like HTML, CSS, and Javascript, and offers a way to extend the capabilities of the module through the Creative Popup API. Please note, this requires programming skills and web development experience, thus we cannot recommend it to users without the necessary knowledge.

Event reference

Event callbacks is a way to receive notifications and run custom code when certain actions occur in popups. The following events can be used under the More settings / Event Callbacks tab.

Init Events Description
popupWillLoad Fires as soon as a Creative Popup instance has been created, but before processing any user data or rendering the UI. This gives you a chance to perform any task before Creative Popup tries to parse the markup and user settings. Since this event occurs in mid-initialization, you must bind this event on the target element before calling .creativePopup().
popupDidLoad Fires when a Creative Popup instance is fully initialized and its UI elements become accessible for DOM manipulation. You should bind this event on the target element before calling .creativePopup() to avoid timing issues.
Popup Events Description
popupWillOpen Fires when the Popup starts its opening transition and becomes visible.
popupDidOpen Fires when the Popup completed its opening transition.
popupWillClose Fires when the Popup stars its closing transition.
popupDidClose Fires when the Popup completed its closing transition and became hidden.
Resize Events Description
popupWillResize Fires before resizing and rendering popups due to a viewport/orientation etc. change. Keep in mind that running slow code in this event can lead to performance issues, as it is called subsequently in multiple times.
popupDidResize Fires after popups have been resized and rendered due to a viewport/orientation etc. change. Keep in mind that running slow code in this event can lead to performance issues, as it is called subsequently in multiple times.
Pageshow Events Description
pageshowStateDidChange A changed pageshow state can occur for various reasons, such as starting media playback, hovering over the popup, manually pausing the pageshow, etc. This event fires at any state change. Since there are multiple states, it's not guaranteed that there is an actual change in playing/pausing the pageshow. Pageshow states can be retrieved from the Event Data object passed to the callback handler.
pageshowDidResume This event fires when the pageshow resumes from a paused state. Please note that page timers and layer transitions are not bound to the pageshow directly. Depending on the pauseLayers option, the page's animation timeline can continue its progress towards the end of the page and wait for page change until the pageshow resumes from its paused state. You can examine the passed Event Data object to identify which settings is applied.
pageshowDidPause Fires when the pageshow pauses from a playing state. As mentioned in the previous event, the pauseLayers option decides which (if any) animations can continue playing in the background. The pageshow paused state only guarantees the prevention of changing pages. You can examine the passed Event Data object to identify which settings is applied.
Page Change Events Description
pageChangeWillStart This event signals whenever the popup wants to change pages, and is your last chance to divert or intervene in any way. The proposed page indexes and other relevant information is in the passed Event Data object.

Return false to prevent page change, or return an integer to switch to that page instead of the proposed one.
pageChangeDidStart This is the last notification before the popup commences a page change. At this point you can no longer divert or intervene, its only purpose is letting you know the next page index and other relevant data in advance.
pageChangeWillComplete Fires before completing the page change. Since at this point the page change is still in progress, the current page's index is still pointing to the previous page. Please note, layers animation may occur earlier in execution depending on the timeShift option. See the Page Timeline Events section if you're looking for an event like that.
pageChangeDidComplete Fires after a page change has completed and the page indexes have been updated. Please note, layers animation may occur earlier in execution depending on the timeShift option. See the Page Timeline Events section if you're looking for an event like that.
Page Timeline Events Description
pageTimelineDidCreate Fires when the current page's animation timeline (e.g layer transitions on the page) has been created. This event lets you know when the GSAP timeline object becomes accessible for interfacing.
pageTimelineDidUpdate Fires rapidly (at each frame) throughout the entire page while the animation timeline (e.g. your layers on the page) is playing. This includes reverse playback as well.
pageTimelineDidStart Fires when the current page's animation timeline (e.g. your layers) has started. This event signals the exact time in execution when the first (earlier) layer becomes visible and transitions are taking place.
pageTimelineDidComplete Fires when the current page's animation timeline has completed (e.g. layer transitions) and the popup is ready to change pages. However, changing pages is not yet guaranteed at this point, as it depends on pageshow states and other factors.

This event only concerns transitions occurring on the page, thus it is possible to divert the popup or intervene in any way before changing pages. The proposed page indexes and other relevant information is in the passed Event Data object.
pageTimelineDidReverseComplete Fires when all animations on a reversed page have reached their starting point and the page is ready to be played from the beginning.
Destroy Events Description
popupDidDestroy Due to technical reasons, destroying a popup may not happen instantaneously. This event lets you know when the popup destructor has finished and it is safe to remove the popup from DOM after calling the destroy API method.
popupDidRemove This event is fired as the last step when destroying a popup and the second parameter true was passed in the destroy API method indicating to remove the popup.

Event Data object

Most event handler functions will have the same 2 pre-defined variables passed. Those are the jQuery Event object and our custom popup data object. You can name these variables by your choice, but we will refer to them as event and popup in our examples.

Every popup data object will contain the same properties, regardless of the used event. However, it's possible that some values are not yet set depending on the current point of execution. The data object contains the most relevant information, but we've also included the entire Creative Popup instance data source, which you can use to access or modify properties on the fly, as well as to add new methods to implement new features.

We encourage everyone to use the browser developer tools and examine the returned data by using console.log() to see potentially undocumented data. Here is an example that you can paste into your browser's JavaScript console. Please make sure to use the right selection when targeting the popup container element on which the Creative Popup instance was created.

1
2
var data = jQuery('#popup').creativePopup('eventData');
console.log( data );


Please note, the popup. prefix in every property name refers to the passed variable to callback functions, which can be named differently.
Popup Properties Type Value
popup.data Object The complete data source object of the current Creative Popup instance. Since this is a reference, you can access and modify any part of the object. You can event add new methods to implement new features this way.
popup.userData Object The parsed (e.g. defaults included) popup options which have been set by the user in the init code.
popup.target DOMNode The popup container element, on which Creative Popup was initialized.
popup.state Object The popup states object, which indicates whether the popup is preloading images, changing or animating pages etc.
popup.isBusy Boolean Returns a boolean value indicating whether the popup is busy to complete background tasks (see popup.state).
popup.api() Function The shortcut to execute API commands. Example: popup.api('next');
First (Starting) Page Properties Type Value
popup.slides.first.index Integer The index of the first (starting) page. The count starts from 1 instead of zero.
popup.slides.first.deeplink String Deeplink of the first (starting) page (if any).
Previous Page Properties Type Value
popup.slides.prev.index Integer The index of the previous page. The count starts from 1 instead of zero. Please note, this value is updated after the pageChangeDidComplete event.
popup.slides.prev.deeplink String Deeplink of the previous page (if any).
Current Page Properties Type Value
popup.slides.current.index Integer The index of the current page. The count starts from 1 instead of zero. Please note, this value is updated after the pageChangeDidComplete event.
popup.slides.current.deeplink String Deeplink of the current page (if any).
popup.slides.current.layersIn jQery Collection A jQuery collection of DOM nodes, which contains layers appearing on the current page, including static layers.
popup.slides.current.layersOut jQuery Collection A jQuery collection of DOM nodes, which contains layers leaving on the current page. This includes static layers, since they aren't bound to their origin page.
popup.slides.current.timeline GSAP TimelineMax The current page's animation timeline, which you use to easily manipulate animations. Slow them down, repeat them, reverse them. You can do GreenSock functions to easily achieve surprising effects.
Next Page Properties Type Value
popup.slides.next.index Integer The index of the proposed next page. The count starts from 1 instead of zero. The next page can change at any time by a user action or API commands.
popup.slides.next.deeplink String Deeplink of the next page (if any).
popup.slides.next.layersIn jQuery Collection The same as popup.slides.current.layersIn for the proposed next page. The next page can change at any time by user action or via API commands.
popup.slides.next.layersOut jQuery Collection The same as popup.slides.current.layersOut for the proposed next page. The next page can change at any time by user action or via API commands.
Miscellaneous Page Properties Type Value
popup.slides.count Integer The number of pages in a popup.
popup.slideChangeTimeline GSAP TimelineMax The page transition animation timeline, which is used when changing pages. You can use GreenSock functions to easily manipulate the transition.
Pageshow Properties Type Value
popup.slideshow.state Object An object of slideshow states, which determines whether the popup is paused or not. There are several states such as media playback, hovering over the popup, manually pausing the pageshow, etc.
popup.slideshow.sequence Array An array containing page indexes, which indicated the pre-determined order of pages. This takes into account of random pageshows, and provides a reliable value without user action.
popup.slideshow.direction String 'prev' or 'next' indicating whether the pageshow is playing forwards of backward depending on the twoWayPageshow option.
popup.slideshow.isPaused Boolean Boolean indicating if the pageshow is paused at the time of execution. Depending on the pauseLayers setting, the page animation timeline may still continue its progress towards the end of the page. This means that layer transitions and progress timers may not be interrupted, but the popup will not commence to the next page until resuming the pageshow.
Cycles Properties Type Value
popup.cycles.max Integer The number of cycles that the user set.
popup.cycles.current Integer The number of cycles that the popup has performed at the time of execution.

API methods

The below API methods can be used to control popups externally, modify their behavior, or wire them up with 3rd party solutions. By using the right combinations of API events and commands, you can implement new features or extended the capabilities of the plugin with custom code. Please note, API events are exposed to the API commands in the same way as anything else. Be aware that most API methods will trigger the appropriate API events as well.

Method name Description Example
(integer) Initiate a page change to the specified page number. The count starts from 1. The example on the right side shows how to switch to the third page. $('#popup').creativePopup(3);
next Skips to the next page in the sequence. $('#popup').creativePopup('next');
prev Changes to the previous page. $('#popup').creativePopup('prev');
replay Restarts the page, replays all layer transitions from the beginning. $('#popup').creativePopup('replay');
reverse Play the page and all transitions backwards, then pause at the beginning of the page. Pass true as a second parameter to continue replaying the popup normally afterward. $('#popup').creativePopup('reverse', true);
reset Immediately sets the current page back to its starting state and pauses it. $('#popup').creativePopup('reset');
stop Stops the pageshow. Depending on the pauseLayers setting, the page animation timeline may still continue its progress towards the end of page. This means that layer transitions and progress timers may not be interrupted, but the popup will not commence to the next page until resuming the pageshow. $('#popup').creativePopup('stop');
start Resumes the pageshow and re-enables the popup to change pages when reaching the end of animation timeline. Since transitions may occur even in a paused state depending on the pauseLayers setting, it possible that the timeline has already reached its end point when calling this command. $('#popup').creativePopup('start');
pausePopup or
pause
Stops the popup by freezing every animation taking place at the time of execution, including page transitions when changing pages. $('#popup').creativePopup('pause');
resumePopup or
resume
Resumes the popup and continues playing frozen animations. $('#popup').creativePopup('resume');
togglePopup or
toggle
Toggles between pausePopup and resumePopup by respecting the current state. $('#popup').creativePopup('toggle');
openPopup Opens initialized Popups waiting in the background to be launched. $('#popup').creativePopup('openPopup');
closePopup Closes the Popup. $('#popup').creativePopup('closePopup');
data Returns the entire data object that the popup uses. var data = $('#popup').creativePopup('data');
eventData Returns the Event Data object filled with the relevant values at the time of execution. var data = $('#popup').creativePopup('eventData');
userInitOptions Returns the popup options provided by the user in the init code. var data = $('#popup').creativePopup('userInitOptions');
defaultInitOptions Returns the full list of the default popup options. var data = $('#popup').creativePopup('defaultInitOptions');
popupInitOptions Returns the parsed popup options (extended by user data) used to initialize the popup. var data = $('#popup').creativePopup('popupInitOptions');
originalMarkup Returns the original HTML markup that the popup was initialized on. var data = $('#popup').creativePopup('originalMarkup');
redrawPopup or
redraw
Recalculates the popup styles and repaints the popup. Useful when you want to manually trigger responsive calculations to update the popup UI. $('#popup').creativePopup('redraw');
destroy or
kill
Destroys the Creative Popup instance by canceling timers, removing events, freeing up allocated memory. Passing a second parameter true will also remove the popup element from the DOM.

Due to technical reasons, destroying a popup may not happen instantaneously. See the popupDidDestroy and popupDidRemove events for more information.
$('#popup').creativePopup('destroy', true);

Examples

  • Switch pages with custom controls:

    1
    <a href="javascript:void(0);" onclick="$('#popup').creativePopup(2);">Change to page 2</a>
  • Combining callbacks and API methods:

    The following example will bring up an alert message after every page change with the current page number. It can be used with the pageChangeDidComplete event callback.

    1
    2
    3
    function(event, popup) {
        alert('The current page is: ' + popup.slides.current.index);
    }
© WebshopWorks - Professional PrestaShop Addons