Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form on the link above. Thanks so much!
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.
You can also add your own HTML inside every item.
To play video on hover, recommended usage would be having short videos (10 seconds or so), 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 open this video in lightbox.
Best use is to have images the same size (or resolution) as videos what will play on hover. This way video will always show in its full size, since it will be same size as image thumbnails. You can take snapshots from video to create image thumbnails. Alternative is to use image cover option.
There are 2 ways to start playback on desktop browsers (hover and click). On mobile browsers video will always play on click.
Include the following css and javascript code into HEAD section of the page:
<link rel="stylesheet" type="text/css" href="css/aplbox.css" media="all"/><!-- lightbox -->
<link rel="stylesheet" type="text/css" href="css/mpp.css"/>
<script src="js/aplbox.js"></script><!-- lightbox -->
<script src="js/new.js"></script>
Notes:
1. lightbox css and javascript are only required if you want to use lighbox.
Create HTML markup for the plugin in BODY section of the page:
<div id="wrap" class="LAYOUT CLASSES GO HERE">
<div class="mpp-playlist-inner">
<div class="mpp-playlist-content">
<div class="mpp-playlist-item" data-thumb="media/audio/thumb/01.jpg" data-hover-type="audio" data-hover-path="media/audio/main/01.mp3" data-title="title here" data-description="description here"></div>
<div class="mpp-playlist-item" data-thumb="media/video/thumb/01.jpg" data-hover-type="video" data-hover-path="media/video/main/01.mp4"></div>
</div>
</div>
</div>
Classes define item layout:
Skins: - description below thumbnail: mpp-dbt mpp-skin-pure mpp-dbt mpp-skin-ground - description over thumbnail: mpp-dot mpp-skin-averta-in mpp-dot mpp-skin-averta-out mpp-dot mpp-skin-sirius-in mpp-dot mpp-skin-sirius-out mpp-dot mpp-skin-vega mpp-dot mpp-skin-antares mpp-dot mpp-skin-pollux mpp-dot mpp-skin-capella - description right of thumbnail: mpp-drot mpp-skin-tauri Skin-color: mpp-skin-light mpp-skin-dark Icons position: (link, lightbox icon) mpp-controls-c - icons center mpp-controls-tl - icons top left mpp-controls-tr - icons top right mpp-controls-bl - icons bottom left mpp-controls-br - icons bottom right Shadow on the item: mpp-shadow1 mpp-shadow2
Initialize the plugin:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var settings = {
....settings go here...
};
new apmpp(document.getElementById("wrap"), settings);
});
</script>
Available settings:
| Parameter | Value | description |
|---|---|---|
| createMarkup | true / false | Creates html markup for hover items. Default true. |
| instanceName | Name of the player instance (string), can be used for api (no spacing or special chars) | |
| sourcePath | Optional path to plugin root. Plugin will load masonry javascript file (if needed) from js directory so it need relative path to that directory from root where the gallery is located. | |
| gridType | masonry / justify / tiles / carousel | Apply masonry layout to gallery, justify is same height per line, tiles are single line left to right elements, carousel is sliding tiles. |
| playbackMethod | hover / click | How to start video play on desktop browsers. |
| mobilePlaybackMethod | click / down | How to start video play on mobile. "click" will play video on click, while "down" will play video only while finger is down. |
| showVideoInTooltip | true / false | Play video in tooltip (instead of inline). Valid for desktop browsers. |
| unmuteOnUserInteraction | true / false | If self hosted video is set muted, this will unmute all after user has interacted with the document (click, keypress, scrollbar). |
| playbackRate | video / audio playback rate. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate | |
| playbackTrigger | DOM selector | Element selector that will trigger video playback. Possible values are (classnames): .mpp-inner - apply to whole item .mpp-content - apply to thumbnail .mpp-info - apply to title and description your own custom class |
| linkTrigger | DOM selector | Element selector that will trigger link to open. Possible values are (classnames): .mpp-inner - apply to whole item .mpp-content - apply to thumbnail .mpp-info - apply to title and description .mpp-link-icon - apply to icon which will be created your own custom class if you add custom HTML inside item Note that you cannot have playback, lightbox and link attached to the same element! |
| lightboxTrigger | DOM selector | Element selector that will trigger lightbox to open. Possible values are (classnames): .mpp-inner - apply to whole item .mpp-content - apply to thumbnail .mpp-info - apply to title and description .mpp-lightbox-icon - apply to icon which will be created your own custom class if you add custom HTML inside item Note that you cannot have playback, lightbox and link attached to the same element! |
| rewindOnHover | true / false | Rewind to start self hosted video / audio on hover. |
| useControls | true / false | Use video /audio controls. On Vimeo to hide controls, video needs to be uploaded with plus accout or higher. |
| useBlocker | true / false | Use transparent div over Youtube or Vimeo to block click. If useControls is true, useBlocker is false by default. |
| swapImageSourcesWidth | number | On resize swap thumbnail sources between standard and high resolution thumbnail. You need to supply both normal and high resolution thumbnail ( data-thumb-maxres ) for this feature. Set width in pixels on which image swap happens. |
| useShare | true / false | Open social sharing dialog when share icon is clicked. This is not related to social sharing when lightbox is opened (Fancybox) |
| shareIcon | Image icon for share button in controls. | |
| linkIcon | Image icon for Url link button in controls. | |
| lightboxIcon | Image icon for zoom/lightbox button in controls. | |
| shareTooltip | Tooltip for share icon. | |
| linkTooltip | Tooltip for link icon. | |
| lightboxTooltip | Tooltip for lightbox icon. | |
| useVideoLoader | true / false | Use video loader over Youtube and Vimeo hovers. |
| disableHoverOnMobile | true / false | Disable hover action on mobile. |
| startVideoDelay | miliseconds | How much to delay start of video playback on hover. Applies to self hosted video. You can use this to make video start playing after some image hover effect has finished to focus user on hover effect first then on video afterwards. |
| hoverClass | classname | classname to apply to image when you hover over it or to center item in carousel grid. |
| hoverClassMinWidth | number (pixels) | Minimum width at which to apply hoverClass. hoverClass by default used scale and scales the image to larger size. This means on smaller screens, when only single grid image is visible, might cause image to be larger then the screen after scaling. Use this option to restrict on which size to apply hoverClass |
| imageMode | img / cover | Apply image to display thumbnails or background-image. Using background-image may help if your images are not the same size as videos you want to show on hover. Default is img |
| imageAspectRatio | 1.7777777 | Image aspect ratio. If you use image mode background image, set default aspect ratio for your images, for example 1.333333 = 4/3. Default is 16/9 (1.777777) |
Making hovers with self hosted video / audio / images.
Example:
<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="url to video which will show in lightbox" data-link="external url link here" data-target="_blank"></div>
Parameters:
| Parameter | Required | Value |
|---|---|---|
| data-title | title | |
| data-subtitle | sub title (emphasized part of title), used in some skins (Sarah, Zoe, Bubba...) | |
| data-description | description | |
| data-thumb | yes, but check this section | path to image thumbnail |
| data-thumb-maxres | path to max resolution image thumbnail (if you want to swap image sources on window resize) | |
| data-img-alt | thumbnail alt text (default is title) | |
| data-hover-type | video / audio / image / youtube / vimeo | |
| data-hover-path | url to image, self hosted audio, self hosted video, Youtube video ID (example: 89s2DVcsoyk), Vimeo video ID (example: 6829621)
If you want to set start time for self hosted video and audio append #t=seconds to url, which means start at 2 seconds for example: data-hover-path="video/main/01.mp4#t=2" |
|
| data-hover-path-mobile | optional different video quality for mobile, only for self hosted video!
Use example: use data-hover-path for higher video quality on desktop and data-hover-path-mobile for lower quality on mobile. |
|
| data-lightbox-path | See lightbox section for more info. | |
| data-link | Add external link url to the thumbnail. Note: there can either be lightbox path (data-lightbox-path) or link (data-link) on the whole thumbnail, not both. | |
| data-target | external link url target (_self, _parent, _blank) | |
| data-media-id | number | Add unique media id attribute to each item so you can use API calls. Example play video (id) |
You can also use self hosted video without thumbnail, then video will be shown from the start instead of thumbnail.
To define video start frame, append this to the data-hover-path: '#t=2' which means video start frame is 2 seconds, example:
<div class="mpp-playlist-item" data-hover-type="video" data-hover-path="url/to/video#t=2"></div>Note that if you use layouts like masonry or justify, it may not work correctly without thumb!
1. Youtube can be used with single video ID (add Youtube video ID directly in data-hover-path):
<div class="mpp-playlist-item" data-thumb="path to thumbnail" data-hover-type="youtube" data-hover-path="rNTyF4qXw3A"></div>
Note: this will not use api to retrieve video title, description or thumbnail from Youtube. It will just play Youtube video on hover. Same parameters are valid.
Note: Using Vimeo player without Vimeo default controls is only available for videos hosted by a Plus account or higher!
1. Vimeo can be used with single video ID (add Vimeo video ID directly in data-hover-path):
<div class="mpp-playlist-item" data-thumb="path to thumbnail" data-hover-type="vimeo" data-hover-path="37848135"></div>
Note: this will not use api to retrieve video title, description or thumbnail from Vimeo. It will just play Vimeo video on hover. Same parameters are valid.
Tiles is a default type grid in which images go left to right. Best to use with images that are equal dimensions. Tiles is applied automatically when no other grid type is specified.
Apply responsive breakpoints to grid:
breakPointArr:[
{width:0, column:1, gutter:0},
{width:500, column:2, gutter:0},
{width:700, column:3, gutter:10},
{width:1100, column:4, gutter:10},
{width:1600, column:5, gutter:10}
]
Below 500px, use 1 column, 0px spacing between grid boxes
below 700px use 2 columns, 0px spacing between grid boxes
etc...
Masonry is mixed type grid, can be used with images of different dimensions.
Apply masonry to grid with following settings:
gridType:'masonry', horizontalOrder:true breakPointArr:[...]
Available settings:
| Parameter | Value | description |
|---|---|---|
| gridType | masonry | type of grid |
| horizontalOrder | true / false | https://masonry.desandro.com/options.html#element-sizing |
Masonry requires following scripts in head tag:
<script src="js/masonry.pkgd.min.js"></script>
Apply responsive breakpoints to grid:
breakPointArr:[
{width:0, column:1, gutter:0},
{width:500, column:2, gutter:0},
{width:700, column:3, gutter:10},
{width:1100, column:4, gutter:10},
{width:1600, column:5, gutter:10}
]
Below 500px, use 1 column, 0px spacing between grid boxes
below 700px use 2 columns, 0px spacing between grid boxes
etc...
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:
gridType:'justify', maxImagesPerLine:10, maxRowHeight: 350, gutter: 0,
Available settings:
| Parameter | Value | description |
|---|---|---|
| gridType | justify | type of grid |
| maxImagesPerLine | number | restrain number of images per line |
| maxRowHeight | number | restrain row height. rows can be different height (depending on image sizes), but this is maximum height. |
| gutter | number | spacing between images in justify layout |
Justify requires following scripts in head tag:
<script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/apjustify.js"></script>
Note that justify grid type requires thumbnails set, and it might not work with only videos in the grid.
Carousel is a single line grid in which images slide from lef 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:
gridType:'carousel', carouselType:'center', gridAutoPlay:false, gridAutoPlayInterval:3000,
Available settings:
| Parameter | Value | description |
|---|---|---|
| gridType | carousel | type of grid |
| carouselType | center | optional, if specifid, grid will start from center and focus on main grid item.
You can use this with hoverClass option. |
| gridAutoPlay | true / false | auto play grid |
| gridAutoPlayInterval | miliseconds | auto play grid interval |
Apply responsive breakpoints to grid:
breakPointArr:[
{width:0, column:1, gutter:0},
{width:500, column:2, gutter:0},
{width:700, column:3, gutter:10},
{width:1100, column:4, gutter:10},
{width:1600, column:5, gutter:10}
]
Below 500px, use 1 column, 0px spacing between grid boxes
below 700px use 2 columns, 0px spacing between grid boxes
etc...
If you do not apply responsive breakpoints to carousel as shown above, its possible to have carousel with variable width images.
Additonaly, to make images responsive (scale on small screens) with variable width carousel, you can use following settings:
variableRatio:true, variableRatioHeight:300
Available settings:
| Parameter | Value | description |
|---|---|---|
| variableRatio | true / false | Make images responsive with variable width carousel. ONLY if responsive breakpoints are not used! |
| variableRatioHeight | number (pixels) | Restrict overall height of images in variable width carousel. This setting also duplicates in CSS |
.mpp-carousel-variable .mpp-playlist-item .mpp-thumb {
width: auto;
max-height: 300px;
}
Carousel requires following scripts in head tag:
<script src="js/imagesloaded.pkgd.min.js"></script>
When you add data-lightbox-path to mpp-playlist-item you can open new content in lightbox.
Example:
<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="url to video which will show in lightbox" data-lightbox-type="video"></div>
Parameters:
| Parameter | Value | Description |
|---|---|---|
| data-lightbox-path | url | Add lightbox url that will open in lightbox. This can be image, mp3 audio, mp4 video, Youtube video, example: https://www.youtube.com/watch?v=CnW_AlnIfBM Vimeo video, example: https://vimeo.com/191947042 Custom iframe source: example Wistia embed: https://fast.wistia.net/embed/iframe/lyci2n3zo6 example Google maps: https://maps.google.com/maps?q=university of san francisco&t=&z=13&ie=UTF8&iwloc=&output=embed |
| data-lightbox-type | image / video / audio / iframe / inline | image (default) / video (mp4, youtube, vimeo ONLY) / audio / iframe (any other embedding url) / inline (DOM selector) |
| data-lightbox-hook | This will connect multiple items with same hook into a gallery in lightbox | |
| data-lightbox-poster | image url | Optional poster image if you want to show poster before video is shown. Can be used with any lightbox type including iframe. |
| data-lightbox-purchase-url | Add url link which will show cart icon in lightbox. |
Add video (mp4 advised)
<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="url to video which will show in lightbox" data-lightbox-type="video"></div>
Add youtube
<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="https://www.youtube.com/watch?v=CnW_AlnIfBM" data-lightbox-type="youtube"></div>
Add vimeo
<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="https://vimeo.com/191947042" data-lightbox-type="vimeo"></div>
Add wistia (iframe)
<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="https://fast.wistia.net/embed/iframe/lyci2n3zo6" data-lightbox-type="iframe"></div>
Add google maps (iframe)
<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="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" data-lightbox-type="iframe"></div>
Add audio (mp3 advised)
<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="url to audio which will show in lightbox" data-lightbox-type="audio"></div>
Add PDF document (iframe)
<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="url to pdf file" data-lightbox-type="iframe"></div>
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)
<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="#my-div" data-lightbox-type="inline"></div>
<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 data-title and data-description:
<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="url to video which will show in lightbox" data-lightbox-type="video" data-title="my title" data-description="Lorem ipsum dolor sit amet"></div>
To connect multiple items into the gallery so they can be viewed together in the lightbox use data-lightbox-hook
Example we have 3 items with the same hook (my-gallery1):
<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="url to video which will show in lightbox" data-lightbox-type="video" data-lightbox-hook="my-gallery1"></div> <div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="url to video which will show in lightbox" data-lightbox-type="video" data-lightbox-hook="my-gallery1"></div> <div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="url to video which will show in lightbox" data-lightbox-type="video" data-lightbox-hook="my-gallery1"></div>
| Parameter | Value | Description |
|---|---|---|
| useThumbnails | true / false | Weather to use thubmnails in the lightbox. You need to specify data-thumb for each item ( <div class="mpp-playlist-item" data-thumb="url to thumbnail" ... ) |
| thumbOrientation | h / v / auto | Thumb orientation in gallery. Horizontal / vertical / auto (will auto detect available space and position thumbnails) |
| mobileThumbOrientation | h / v / auto | Thumb orientation on mobile. Suggested is auto. |
| defaultThumb | image url | Default gallery thumbnail for items that do not have data-thumb. If useThumbnails = true |
| infinite | true / false | Weather to loop gallery items in lightbox when navigateing left / right. |
| useNumeration | true / false | Weather to show number of gallery items available in the lightbox (example 3/12) |
| useKeyboard | true / false | Use keyboard contorls in lightbox right arrow - next item left arrow - previous item esc - close lightbox |
| ratio | 16/9 | Video ratio, default is 16/9 . Applies for type video, youtube, vimeo, iframe. |
| preload | auto | Media preload attribute. https://www.w3schools.com/tags/att_audio_preload.asp |
| autoplay | true / false | Video autoplay. Note that for video to autoplay, video needs to be muted due to brower restrictions. Also, it may not work on mobile sometimes due to mobile restrictions. |
| controlsList | nodownload noremoteplayback | Media contorlsList (separated by space) https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList |
| useSwipeNavigation | true / false | Use swipe to navigate gallery left / right on touch sensitive devices. Works for images. |
| useFullscreen | true / false | Use fullscreen button |
| useSlideshow | true / false | Use slideshow button (currently does not wait for video to finish, only uses set time to advance to next media) |
| slideshowTimeout | miliseconds | Slideshow timeout in miliseconds |
| clickOnBackgroundClosesLightbox | true / false | Click on background behind content closes lightbox |
| posterPlayIcon | SVG | poster play icon used with data-lightbox-poster . Default is SVG for all icons, you can try to use full img tag (images), but it will require additional css. |
| nextIcon | SVG | next gallery item icon |
| prevIcon | SVG | previous gallery item icon |
| closeIcon | SVG | close gallery icon |
| fullscreenIcon | SVG | enter fullscreen icon |
| fullscreenExitIcon | SVG | exit fullscreen icon |
| playIcon | SVG | slideshow play icon |
| pauseIcon | SVG | slideshow pause icon |
| gridIcon | SVG | show / hide thumbnails icon |
| cartIcon | SVG | custom url icon, for example, url to product |
| cartTarget | _blank | cart target url (_blank, _parent ...) |
| nextTooltip | Next | next button tooltip |
| prevTooltip | Previous | Previous button tooltip |
| closeTooltip | Close | Close button tooltip |
| fullscreenTooltip | Fullscreen | Fullscreen enter button tooltip |
| fullscreenExitTooltip | Exit fullscreen | Exit fullscreen button tooltip |
| slideshowTooltipPlay | Play | Slideshow Tooltip Play |
| slideshowTooltipPause | Pause | Slideshow Tooltip Pause |
| gridTooltip | Thumbnails | Open / hide thumbnails button tooltip |
| cartTooltip | Purchase | Cart button tooltip |
| loader | CSS loader html markup | Default is <div class="ap-preloader"></div> If you use another loader / spinner, you need to add CSS. |
Pass lightbox settings to the gallery in the following format (lightbox):
<script type="text/javascript">
var settings = {
(gallery settings here)
...
lightbox:{
useThumbnails:true,
infinite:true,
useNumeration:true,
ratio:'16/9',
preload: 'auto',
autoplay:true,
controlsList: 'nodownload noremoteplayback',
useSwipeNavigation:true,
...
}
};
</script>
Using option to autoplay videos in the grid.
Parameters:
| Parameter | Value | Description |
|---|---|---|
| autoplayVideosOnStart | true / false | Autoplay all self hosted videos on start. Rules: valid for self hosted videos, videos will be muted. Disabled for carousel. |
| autoplayVideosOnStartMode | all / next / random | Autoplay videos mode. Play all, play one by one in order, play random order. |
| autoplayVideosOnStartHoverAction | true / false | Apply hover action on item while autoplay video happens (valid for next, random modes). |
When autoplayVideosOnStart is true, only videos will be used, meaning you dont need to provide thumbnails with data-thumb="THUMB URL".
Exception is if you use gridType justify, you need to have thumbnails set, because justify grid requires image sizes for calculation.
You can add any HTML inside a hover element and then style it with CSS, for example:
<div class="mpp-playlist-item" data-thumb="path to thumbnail" data-hover-type="video" data-hover-path="path to mp4 video which will show on hover">
<span class="foo">Your own HTML here, format is with CSS.</span>
</div>
Attach lightbox and link url to that custom element you just placed:
<script type="text/javascript">
var settings = {
lightboxTrigger:".foo"
linkTrigger:".elephant"
};
</script>
<div class="mpp-playlist-item" data-thumb="path to thumbnail" data-hover-type="video" data-hover-path="path to mp4 video which will show on hover" data-lightbox-path="https://www.youtube.com/watch?v=CnW_AlnIfBM&autoplay=1" data-lightbox-type="video" data-link="http://www.google.com">
<span class="foo">I will open lightbox link</span>
<span class="elephant">I will open link url</span>
</div>
To create categories following is required:
1. In settings:
useCategory: true, categoryDefaultOnStart: 'all', categoryAllowSelectMulti: false, categoryShowMultiOnly: false,
Parameters:
| Parameter | Value | Description |
|---|---|---|
| useCategory | true / false | Use category. Not available with carousel type grid. |
| categoryDefaultOnStart | value from data-slug attribute in category menu | Default category on start |
| categoryAllowSelectMulti | true / false | Allow to select multiple categories |
| categoryShowMultiOnly | true / false | When multiple categores are selected, only show items that belong to all selected categories |
2. In HTML, add category menu:
<div class="mpp-category-tags mpp-category-tags-tl">
<div class="mpp-category-tag mpp-category-tag-selected" data-slug="all">Show all</div>
<div class="mpp-category-tag" data-slug="videography">Videography</div>
<div class="mpp-category-tag" data-slug="sound-effects">Sound effects</div>
</div>
Parameters:
| Parameter | Value | Description |
|---|---|---|
| data-slug | category slug (Only A-Z, a-z, 0-9 allowed) | |
| mpp-category-tags-tl | mpp-category-tags-tl mpp-category-tags-tc mpp-category-tags-tr mpp-category-tags-bl mpp-category-tags-bc mpp-category-tags-br |
css positioning of category menu (top left, top center, top right, bottom left, bottom center, bottom right) |
| mpp-category-tag-selected | selected category on start |
3. data-category attribute on each mpp-playlist-item, which category item belongs to (value from data-slug in category menu):
<div class="mpp-playlist-item" data-category="videography" data-thumb="media/video/thumb/02.jpg" data-hover-type="video" data-hover-path="media/video/main/02.mp4"></div> <div class="mpp-playlist-item" data-category="sound-effects" data-thumb="media/video/justify/01.jpg" data-hover-type="video" data-hover-path="media/video/justify/01.mp4"></div>
Example demo which uses categories is category.html
If you have lots of images in the gallery, use load more option to save bandwidth and improve load speed. Check load_more.html demo for more details.
Basically provide html markup and call player API addMore function:
var s = '<div class="mpp-playlist-item" data-thumb="media/video/main2/thumb/01.jpg" data-hover-type="video" data-hover-path="media/video/main2/01.mp4"></div>'+ '<div class="mpp-playlist-item" data-thumb="media/video/main2/thumb/02.jpg" data-hover-type="video" data-hover-path="media/video/main2/02.mp4"></div>'+ '<div class="mpp-playlist-item" data-thumb="media/video/main2/thumb/03.jpg" data-hover-type="video" data-hover-path="media/video/main2/03.mp4"></div>'+ '<div class="mpp-playlist-item" data-thumb="media/video/main2/thumb/04.jpg" data-hover-type="video" data-hover-path="media/video/main2/04.mp4"></div>'; player.addMore(s);
Subtitles are available for self hosted video, Youtube, Vimeo and audio. Supported formats for subtitles are vtt or srt.
To add subtitle to item add data-subtitles attribute. Subtitle most likely needs to be located on the same domain.
<div class="mpp-playlist-item" data-thumb="media/video/main2/thumb/01.jpg" data-hover-type="video" data-hover-path="media/video/main2/01.mp4" data-subtitles="SUBTITLE_URL"></div>
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>
Example demo using subtitles is subtitles.html
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.
Default method when image thumbnails are created is an img tag (with classname mpp-thumb) which is placed inside mpp-content element:
<div class="mpp-playlist-item">
<div class="mpp-inner">
<div class="mpp-content">
<img src="media/video/justify/02.jpg" class="mpp-thumb">
<div class="mpp-media">VIDEO WILL BE CREATED HERE ON HOVER</div>
<div class="mpp-title">Image title</div>
</div>
</div>
</div>
Alternative method is to use CSS background-image cover with the following option:
imageMode:'cover'
This will not create an img tag but add image as background-image to mpp-content element.
Using this method might help if your images and not the same size as videos.
Its recommended to use thumbnail images with videos (because it may cause problems on mobile browsers if only videos are used).
You can add an icon over hover element to display its content, for example video / audio / image etc... Icon will then hide on hover. Check icons.html demo.
Use the following css to achieve this:
.mpp-playlist-item .mpp-media {
background-repeat: no-repeat;
background-position: center center;
background-size: 64px 64px;
}
.mpp-playlist-item[data-hover-type="video"] .mpp-media {
background-image:url("css/video.svg");
}
.mpp-playlist-item[data-hover-type="audio"] .mpp-media {
background-image:url("css/audio.svg");
}
.mpp-playlist-item[data-hover-type="image"] .mpp-media {
background-image:url("css/image.svg");
}
.mpp-playlist-item[data-hover-type="youtube"] .mpp-media {
background-image:url("css/youtube.svg");
}
.mpp-playlist-item[data-hover-type="vimeo"] .mpp-media {
background-image:url("css/vimeo.svg");
}
.mpp-playlist-item:hover .mpp-media {
background: none;
}
Following api methods are included:
clearPlayback(); //clear last active playing video, if exist. //play / pause all videos //Valid for autoplayVideosOnStart:true or when you have just videos without thumbnails pauseAllMedia();// Pause all self hosted video / audio. playAllMedia();// Play all self hosted videos / audio. //perform full hover action hoverMediaStart(id);// start hover specific item by data-media-id attribute. hoverMediaEnd(id);// end hover specific item by data-media-id attribute. Example: hoverMediaStart(4); <div class="mpp-playlist-item" data-thumb="media/video/thumb/04.jpg" data-hover-type="video" data-hover-path="media/video/main/04.mp4" data-media-id="4"></div> toggleGridAutoPlay(boolean); // start stop grid carousel
Most brosers prevent autoplay if user has not interacted with the page previously (like a click). More details: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Other option is unmuteOnUserInteraction:true in settings which will try to unmute self hosted videos and allow playback if the user has interacted with the page before.
Send a message at http://codecanyon.net/user/Tean#contact with your purchase code. Please include as many details as possible to describe the issue you are having so we can quickly resolve it. Include a link to your live page if possible to illustrate the problem so we can have a look.
If you have any questions after purchase, send a message at http://codecanyon.net/user/Tean#contact, and provide your PURCHASE CODE.