You can enable embedding and redirecting through the 'More' menu for your ZloImage from within a Gallery.
Embedding allows a ZloImage to be served through another website as an iframe without the standard user interface. The appearance is similar to when you choose a background from a background source.
Depending on the type of embedding and whether you display our logo there may be associated ZloCredit charges. Please see How ZloCredits Work for more information.
There are two forms of embedding that can be applied:
1. Within an iframe a user interacts with the ZloImage and media is displayed within the confines of that iframe. The URL will look like this:
https://zloviewer.com/u/{user}/{zloimage}?embed=1
2. Within an iframe when a user interacts with the ZloImage no media is displayed and a data object is posted back to the parent window with the user's selection which can be handled however the origin likes. The URL will look like this:
https://zloviewer.com/u/{user}/{zloimage}?embed={originurl}
If you simply enable embedding, either method can be used from any origin.
If you restrict to a specific origin, any value that is put in the embed parameter will be replaced with the specified origin. (It functions as a simple boolean, if any value is found, redirect post messages to the predetermined website.)
When restricting the origin, you simply add the following to your javascript:
window.addEventListener("message", zMsg, false);
function zMsg(e) {
if (e.origin !== "https://zloviewer.com")
return;
let data = JSON.parse(e.data);
// Do something amazing with the data.
}{
caption: "String", // If no caption ""
link: "String", // If no media link ""
media_id: "String", // ZloViewer Media ID
media_num: "0", // String of int, position in ZloImage
// Could change if ZloImage modified
resolution: [1024, 768] // Natural resolution of media
tags: "String" // If no tags ""
url: "String" // Direct URL to the media
// --User permissions/access remain in effect
}Redirecting allows you to direct a user to a ZloImage without an iframe, and when the user clicks on any media their browser is redirected to a specified URL with get parameters specifying all of the same data above with the exception of caption and tags. The reason for their exclusion is that they could theoretically exceed the maximum length permitted for a URL.
A redirected ZloImage can be restricted to a specific address in the same manner as an embed.
A redirected ZloImage can be combined with an embed causing the ZloViewer interface to not be shown.
It doesn't matter to ZloViewer if it is actually embedded in an iFrame or not, but it will still try to post the data to a parent window if one is specified before redirecting.
Redirecting uses ZloCredits as specified in How ZloCredits Work
| Enabled | Restricted | ||||||
|---|---|---|---|---|---|---|---|
| Embed | Redirect | Embed | Redirect | Acceptable Suffix | UI | Media | CB |
| Y | N | N | N | ?embed=1 | N | Y | N |
| Y | N | N | N | ?embed=https://anysite.com | N | N | Y |
| Y | N | Y | N | ?embed={value irrelevant} | N | N | Y |
| N | Y | N | N | ?redirect=https://anysite/page | Y | N | N |
| N | Y | N | Y | ?redirect={value irrelevant} | Y | N | N |
| Y | Y | N | N | ?embed=1 &redirect=https://anysite/page | N | N | N |
| Y | Y | Y | N | ?embed={value irrelevant} &redirect=https://anysite/page | N | N | Y |
| Y | Y | Y | Y | ?embed={value irrelevant} &redirect={value irrelevant} | N | N | Y |
UI: ZloViewer User Interface (Userbar)
Media: When a user interacts with the ZloImage media is displayed
CB: The JavaScript callback is executed