Skip to Content
Documentation
Product Dev
AIOS PluginsAIOS Initial SetupLibraries

AIOS JavaScript Libraries

List of internal javascript libraries.

Intro

Enqueue the following

php
wp_enqueue_script( 'aios-default-functions', 'https://resources.agentimage.com/libraries/js/aios-default-libraries.js' );
Note

For AIOS Initial Setup version 4.5.7 and higher this is already enqueue.

Mobile double Tap

On mobile devices, the users need to double tap the links.

Usage

This script is a self-initializing, just add “mobile-hover” as a className.

html
<a href="//www.agentimage.com" className="primary-button mobile-hover">Open tab self</a>
<a href="//www.agentimage.com" className="primary-button mobile-hover" target="_blank">Open new tab</a>

Sample

This sample will only work with touch enable and emulator.

Open tab self
Open new tab

Video Player

Plyr.js was used for the player, enqeueu the libraries from initial setup.

Usage

html
<div className="aios-video-player" data-plyr-provider="youtube" data-plyr-embed-id="NLnkBpT3Cu8"></div>

Responsive background-image

With srcset and sizes it is possible to offer multiple sizes of the same image. The script does the calculation and chooses the best size to display to the user.

Usage

This script is a self-initializing, this means you just need to add the following:

Required attributes

  • class - lazyload
  • data-bgset - list of images spaces before width and comma as separator
javascript
<canvas
  width="500"
  height="300"
  className="lazyload"
  data-bgset="
    http://placehold.it/400x267 [(max-width: 400px)] | 
    http://placehold.it/768x513 [(max-width: 768px)] | 
    http://placehold.it/1024x800 [(max-width: 1024px)] | 
    http://placehold.it/1600x800"
  style={{
    display: "block",
    width: "100%",
    backgroundPosition: "center",
    backgroundSize: "cover"
  }}
></canvas>

Sample

Both will work on DIV and CANVAS tag

javascript
<canvas
  width="500"
  height="300"
  className="lazyload"
  data-bgset="
    http://placehold.it/400x267 [(max-width: 400px)] | 
    http://placehold.it/768x513 [(max-width: 768px)] | 
    http://placehold.it/1024x800 [(max-width: 1024px)] | 
    http://placehold.it/1600x800"
  style={{
    display: "block",
    width: "100%",
    backgroundPosition: "center",
    backgroundSize: "cover"
  }}
></canvas>

Lazyframe

You can enqueue it under initial setup -> enqueue libraries -> lazy frame.

Why?

Because embedded content takes time to load.

  • Youtube – 11 requests ≈ 580kb
  • Google maps – 52 requests ≈ 580kb
  • Vimeo – 8 requests ≈ 145kb

Lazyframe creates a responsive placeholder for embedded content and requests it when the user interacts with it. This decreases the page load and idle time.

Lazyframe comes with brand-like themes for Youtube and Vimeo.

Element-specific options

html
<div
  className="lazyframe"
  data-vendor=""
  data-title=""
  data-thumbnail=""
  data-src=""
  data-ratio="1:1"
  data-initinview="false"
  data-autoplay="false"
></div>

data-vendor

Attribute for theming lazyframe. Currently supported values are youtube, youtube_nocookie and vimeo.

data-title

Attribute for custom title. Leave empty to get value from noembed.com.

data-thumbnail

Attribute for custom thumbnail. Leave empty to get value from noembed.com.

data-src

The source of what you want to lazyload.

data-ratio

The ratio of the lazyframe. Possible values: 16:9, 4:3, 1:1

data-initinview

Set this to true if you want the resource to execute (for example video to play) when the element is in view.

Sample HTML

Youtube video with thumbnail and title from API

html
<div className="lazyframe" data-src="https://www.youtube.com/embed/ara1uUvajoU" data-vendor="youtube"></div>

Youtube video with custom thumbnail and title

html
<div className="lazyframe" data-src="https://www.youtube.com/embed/ara1uUvajoU" data-vendor="youtube"
  data-title="Custom title" data-thumbnail="https://placekitten.com/500/281">
</div>

Vimeo video with thumbnail and title from API

html
<div className="lazyframe" data-src="https://vimeo.com/45915667" data-vendor="vimeo"></div>

Vimeo video with custom thumbnail and title

html
<div className="lazyframe" data-src="https://vimeo.com/183524061" data-vendor="vimeo" data-title="Custom title"
  data-thumbnail="https://placekitten.com/500/281">
</div>

Iframe with custom theme and title

html
<div className="lazyframe lazyframe--custom"
  data-src="https://www.surveymonkey.com/r/?sm=%2bd%2bdWobuoz7irMV%2fpzKPcJmrKosuGWSraJtIrFQ4wBQ%3d"
  data-title="Something completely different">
</div>

Google maps iframe with custom thumbnail and title that gets executed when in view

html
<div className="lazyframe lazyframe--custom"
  data-src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ8fA1bTmyXEYRYm-tjaLruCI&key=AIzaSyDQxRfx3HQrE0_oTFI2WHzoiGL_CM0JJfQ"
  data-title="Something completely different" data-initinview="true">
</div>

Scroll to element

This options will allow smooth scrolling to any div with id declared on href.

Usage

html
<a href="#ihf-map-canvas" className="aios-scroll-to"> View Properties </a>

Element-specific options

  • data-offset - Amount of height that diminishes or balances the effect of a contrary one. Default: 0.
  • data-speed - Speed to scroll to target object. Default: 1500.

Magnific Popup

Magnific Popup is used as the default popup plugin but you need to change. jQuery(”).magnificPopup() to jQuery(”).aiosPopup();

You can also use pre-loaded scripts using this following className.

Video

html
<a href="Video Popup Link Here" className="aios-video-popup"></a>

iFrame

html
<a href="Frame Link" className="aios-frame-popup"></a>

Image

html
<a href="Image Link" className="aios-image-popup"></a>

Content PopUp including

html
<a href="#popupBody" className="aios-content-popup"></a>

Vanilla JS lazyloading

To activate library go to Initial Setup > Enqueue Libraries > Activate Vanilla LazyLoad

Usage

Image
html
 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" data-aios-lazy-src="[image_source]" width="" height="740" alt="[ai_client_name]" className="img-responsive aios-lazyload">
Note: the src should be a placeholder image to avoid html5 validation error Background Image
html
<div className="aios-lazyload" data-aios-lazy-bg="[image_source]"></div>
Video
html
<video className="aios-lazyload" controls width="620" data-aios-lazy-src="lazy.mp4" data-poster="lazy.jpg">
  <source type="video/mp4" data-src="lazy.mp4" />
  <source type="video/ogg" data-src="lazy.ogg" />
  <source type="video/avi" data-src="lazy.avi" />
</video>
Iframe
html
<iframe className="aios-lazyload" data-aios-lazy-src="lazyFrame.html"></iframe>
html
Forked from <a href="https://github.com/verlok/vanilla-lazyload/tree/master" target="_blank">https://github.com/verlok/vanilla-lazyload/tree/master</a>
Last updated on
FAQsChangelog