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!
Make sure you extract downloaded file from codecanyon, inside you will find file named: 'apmpp.zip'. This is the plugin file you upload in wordpress panel!
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.
You can also add your own HTML inside every image.
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 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.
Single Youtube and Vimeo videos can be used inside the gallery.
All you need to provide is Youtube video ID (example: 5zYArkwq2PQ) or Vimeo video ID (example: 27261432) in playback path field.
If you want to show Youtube or Vimeo video inside ligthbox, use full url in lightbox path:
Youtube example video: https://www.youtube.com/watch?v=5zYArkwq2PQ
Note that when youtube or Vimeo videos are used, it will usually take little more time for a video to start playing (due to required communication with Youtube and Vimeo servers).
Therefore if speed is the ultimate goal when hovering videos, its recommended to use self hosted videos.
[apmpp player_id='1'] [apmpp player_id='1']Correct:
[apmpp player_id='1'] [apmpp player_id='2']
[apmpp player_id='1' instance_id="0"] [apmpp player_id='1' instance_id="1"](instance_id is just a unique number you choose for each gallery)
In Gallery manager, go to images tab, select the image you want to attach link by clicking edit:
In newly opened popup window, select "Url link" tab and enter your url link in field:
In Gallery manager, go to images tab, select the image you want to attach lightbox url by clicking edit:
In newly opened popup window, select "Lightbox" tab and enter your lightbox url in field:
Different sources can be used for lightbox, 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 Lightbox settings tab:
Aside from media playback that can happen on hover or click, 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 open 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:
You can add any HTML inside a hover element and then style it with CSS in custom CSS section:
Create categories in category tab.
Then assign categories to each image in Edit media dialog:
Note: when you use category in shortcode (to display only images from specific categories) its not possible to have category buttons, so category buttons are automatically hidden!
Default shortcode looks like this:
[apmpp player_id='PLAYER_ID']
To show only images with certain category in shortcode list one or more categories in category attribute spearated by comma, no spacing.
Show only images from animals or nature category: [apmpp player_id='PLAYER_ID' category="animals,nature"]
Category is a slug:
Optional attributes for category include match attribute. If you have multiple categories in shortcode, you can match images that include any of the categories or all of the categories listed in shortcode.
match="any" - match images with any of the categories listed (this is default): [apmpp player_id='PLAYER_ID' category="animals,nature" match="any"] – show images from animals OR nature category match="all" - match images with all of the categories listed: [apmpp player_id='PLAYER_ID' category="animals,nature" match="all"] – show images that have BOTH animals AND nature category
Load more with category:
[apmpp player_id='PLAYER_ID' category="animals,nature" use_load_more="1" load_more_limit="5" use_load_more_btn="1" load_more_btn_text="LOAD MORE"]
Subtitles are available for self hosted video, Youtube, Vimeo and audio. Supported formats for subtitles are vtt or srt.
Add subtitle to item in Edit Gallery / Images tab, in Edit media dialog, 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 cover with the following option:
Using this method might help if your images and not the same size as videos.
Using option to autoplay videos in the grid can be activated in Gallery manager / Autoplay mode:
When Autoplay Videos On Start is true, only videos will be used, meaning you dont need to provide thumbnails with your images.
Exception is if you use Grid type justify, you need to have thumbnails set, because justify grid requires image sizes for calculation.
Its recommended to use thumbnail images with videos (because it may cause problems on mobile browsers if only videos are used).
2 types of carousel exist, fixed image size (all images in carousel have same size) and 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;
}
If you want to enlarge active image in carousel, choose this option (Hover class):
This option also applies for other types of grid.
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.
Load more in shortcode:
[apmpp player_id='PLAYER_ID' use_load_more="1" load_more_limit="5" use_load_more_btn="1" load_more_btn_text="LOAD MORE" use_scroll_to_bottom="1" scroll_bottom_offset="300"]
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.
Pagination in shortcode:
[apmpp player_id='PLAYER_ID' use_pagination="1" pagination_limit="5" pagination_previous_btn_title="Previous" pagination_previous_btn_text="Prev" pagination_next_btn_title="Next" pagination_next_btn_text="Next"]
Support for shortcodes in title and description. Enable here:
Add shortcode in title, description and alt image fields:
Custom css for the gallery can be entered in Custom CSS tab in Edit gallery.
Default HTML structure for the image look like this:
<div class="mpp-playlist-item" title="Image title">
<div class="mpp-inner">
<div class="mpp-content">
<img class="mpp-thumb" src="IMAGE_URL" alt="image">
<div class="mpp-media">
<video class="mpp-video"><source src="VIDEO_URL"></video>
</div>
</div>
<div class="mpp-info">
<div class="mpp-title">Image title</div>
<div class="mpp-description">This is image description</div>
</div>
</div>
</div>
Example of how to apply some css changes:
round corners (depends on the skin):
.mpp-playlist-item{
border-radius: 10px;
overflow: hidden;
}
Title and description font style:
.mpp-title{
font-size: 20px;
color: #0f0;
}
.mpp-description{
font-style: italic;
}
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 your PURCHASE CODE, provide a link to your live page, and a temporary user and password for your wordpress admin panel 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.