Thank you for purchase of this plugin. If you have any questions that are beyond the scope of this help file, please feel free to send a detailed message on the following link.
Make sure you extract downloaded plugin file from Envato, inside you will find file named: 'elementor_media_hovers.zip'. This is the plugin file you upload in WordPress panel when you want to install the plugin!
1. In WordPress panel go to Plugins menu
2. Under Plugins menu click "Add New"
3. Select "Upload", choose the archive elementor_media_hovers.zip that you downloaded and click "Install Now"
4. After the plugin is installed click "Activate Plugin"
After you install plugin you will have to activate your license to start using the plugin.
To activate license you need to create account on the following link, where you will provide your PURCHASE CODE, and get TOKEN in return which you will then enter in plugin section to activate the plugin.
This is made to make sure customers use the license on a single project (as per Envato rules) and to help customers owning many licenses to easily track on which server licenses are being used.
With this plugin you can add images in the page, that can play audio or video on hover or a click.
You can also add title and description to images, attach link which will open in lightbox, or attach url link to images.
To play video on hover, recommended usage would be having short videos, encoded for the small filesize (so the can load quickly on hover).
Each video will not be loaded and start playing until mouse enters image area. Then if you want to display high resolution video, you can set to open this video in lightbox.
Best use is to have images the same size (or resolution) as videos what will play on hover. Alternative is to use image mode option. Note that image mode background image might not work well with some skins.
First upload some images in Media tab. Then you can assing video url which will play on hover (when mouse is over the image).
You can specify additional video quality which will be used on mobile. This enables to have higher quality video for desktop browsers and lower quality for mobile.
You can add any video url that is public and plays when opened directly in the browser (for example Dropbox, Amazon etc). If your video comes from such source, just paste video url inside the field instead of using upload button.
Player support Youtube single videos. Enter only video ID part when adding Youtube video!
Example video: https://www.youtube.com/watch?v=tb935IxGBt4
Gallery supports Vimeo single videos. Enter only video ID part when adding Vimeo video!
Example video: https://vimeo.com/279267531
If you want to hide video controls for Vimeo videos, this is only possible for Vimeo videos hosted by a Plus account or higher! Other option to hide controls with Vimeo videos, if you are Vimeo Pro member, you can get direct link to video on their servers, than you can use this url as hover type video.
Upload audio url (mp3, wav, aac, flac...) Mp3 is recommended cross-browser format.
You can test audio format support here for browsers: https://caniuse.com/?search=audio%20format
Note that for audio to play on hover, this requires some kind of user intraction with the page beforehand (like a mouse click or keypress). If the user hasnt interacted with the page after page load, browser will most likely prevent audio autoplay resulting in no audio when hovering images in the gallery. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Gallery can show another image when hovering original thumbnail (as alternative to video). Choose hover action image and add image url.
Tiles is a default type grid in which images are sorted left to right. Best to use with images that are equal dimensions.
Masonry is mixed type grid, can be used with images of different dimensions.
Apply masonry to grid with following settings:
Justify is mixed type grid in which images have equal height per row, can be used with images of different dimensions.
Apply justify layout to the grid with following settings:
Carousel is a single line grid in which images slide from left to right, can be used with images of different dimensions (but it works best with images of same width)
Apply carousel layout to the grid with following settings:
2 types of carousel exist, fixed image size (all images in carousel have same size) and carousel with variable image sizes.
Choose carousel and optionally adjust grid breakpoints:
Choose carousel and select Variable width carousel option:
With Variable width carousel grid breakpoints are not available, but you can choose maximum carousel image height. Default is 300px.
Note that this option also exist in CSS, so if you change this value, you should also change CSS rule:
.mpp-carousel-variable .mpp-playlist-item .mpp-thumb {
width: auto;
max-height: 300px!important;
}
If you want to enlarge active image in carousel, specify Hover class option (add mpp-effect-scale into the field)
This option also applies for other types of grid.
Choose image skin in Skin tab:
Note that some skins might not work well if image mode background cover is chosen instead of default image mode.
To attach lightbox url to image, in Media tab (when adding images), add lightbox url:
Different sources can be used for lightbox url, examples below:
Add video (mp4)
Add or upload video url (mp4 format advised)
Add youtube
https://www.youtube.com/watch?v=CnW_AlnIfBM
Add vimeo
https://vimeo.com/191947042
Add wistia (iframe)
https://fast.wistia.net/embed/iframe/lyci2n3zo6
Add google maps (iframe)
https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387142.85004765174!2d-74.25887720257019!3d40.70582992708322!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York!5e0!3m2!1sit!2sus!4v1488175057980
Add audio (mp3)
Add or upload audio url (mp3 format advised)
Add PDF document (iframe)
Add or upload url to pdf file
Add inline (load inline HTML content. Specify ID attribute or classname of your element which you want to show in lightbox, example '#my-div' which needs to be present in the page)
#my-div
'#my-div' which needs to be present in the page
<div id="my-div">
<div class="foo">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</div>
To add title and description to item in lightbox (which will show beneath image in lightbox) use title and description field in Text tab:
To connect multiple items into the gallery so they can be viewed together in the lightbox use lightbox hook
All the same string to all images you want to show in lightbox at once, for example (my-gallery1):
Alternatively, you can set global hook in Edit player / Lightbox tab:
If this exist, all images in the gallery that have lightbox url set and a thumbnail url, will be shown in the lightbox. This way you dont need to set hook on each image in the gallery.
You can add url link into Purchase field in Lightbox tab which will show cart icon in lightbox.
To adjust purchase url target use Purchase traget in Edit Player / General / Lightbox settings tab:
By default, when you add a lightbox url, icon will be created above the image, which when clicked, will open lightbox:
You can change the element which will trigger lightbox to open in triggers section
To attach url link to image, in Media tab (when adding images), add url:
By default, when you add a url link, icon wil be created above the image, which when clicked, will open this url:
You can change the element which will trigger lightbox to open in triggers section
Aside from video playback that can happen when you hover or click the image, each image can have link or ligthbox attached. By default video will start playing when mouse enters image area. And if you add link or lightbox url to the image, icon will be created which opens url or lightbox on click. You can choose in settings which element will trigger each action.
Note that you cannot have playback, lightbox and link attached to the same element!
1 - apply to whole item 2 - apply to thumbnail 3 - apply to title and description 4 - apply to icon which will be created
Note: if you use "apply to thumbnail" and you have link or lightbox defined and you are using Youtube or Vimeo videos, you should use this option as well:
Control icons are 3 icons that are shown somewhere above the image (depending on the skin used). These icons are lightbox icon (if lightbox source is set on image), link icon (if url link is set on image), share icon (if social sharing is used).
You can adjust position of these icons in Skin tab:
Add icon over thumbnail to display its content, for example to show that hover element is video / audio / image / Youtube / Vimeo etc... Icon will then hide on hover. Upload icons in the size your want them to be shown.
Activate hover icons in Hover icons tab:
Note that hover action on image needs to be set for hover icons to become visible:
Create category buttons which can filter images.
Manage categories in category tab.
Then assign categories to each image in Media tab (when adding images):
Subtitles are available for self hosted video, Youtube, Vimeo and audio. Supported formats for subtitles are vtt or srt.
Add subtitle to item in Media tab, under Hover action, add or upload subtitle url:
Subtitle can be styled with CSS. Subtitle format is:
<div class="mpp-subtitle-holder"><div class="mpp-subtitle-holder-inner">Lorem ipsum dolor</div></div>
You can find example of subtitle files in plugin package / documentation folder / data / subtitle directory.
When you create a grid of images, the aim is to have images the same size (same resolution) as videos that will be shown on hover.
By default, thumbnails are created is an img tag. Alternative method is to use CSS background-image with Image mode option in General tab:
Using this method might help if your images and not the same size as videos.
Note that Image mode background image might not work well with some skins.
Its recommended to use thumbnail images with videos (because it may cause problems on mobile browsers if only videos are used). However, its still possible to use just videos (applies only for Playback type video). If you want to use just videos, add only videos in Hover action tab, without setting image thumbnails:
If you have lots of images in the gallery, use load more option to save bandwidth and improve load speed. This will create load more button below the gallery.
If you have lots of images in the gallery, use pagination to save bandwidth and improve load speed. This will create pagination buttons below the gallery.
Videos can automatically autoplay on page load with following option:
Note that this only applies for HTML5 videos (not Youtube or Vimeo etc...)
Make sure you test player in the real page on the frontend, not in Elementor editor, because some features might not work correctly in editor!
Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript
If you have issues with javascript / jQuery conflict in you page, try using the following options in General tab:
If the plugin does not work as expected, try the following tests to see if it makes a difference and what could be causing an issue:
1. Update to latest plugin files available on Codecanyon
2. Switch to default Wordpress theme
3. Check for errors in browser developer console (Chrome F12 key, Console tab)
4. Try to deactivate any 3rd party plugins (the ones that not come with Wordpress)
5. If you still have issues after you have done all changes above, you can send a message at http://codecanyon.net/user/Tean#contact , provide a link to your live page, and a temporary user and password for your WordPress admin panel so we can have a look.