Youtube Gallery Portfolio

jQuery

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!

Registration

Register the plugin at the following link

Instructions how to register (ONLY steps 1-3 are required)

Access control panel here

Registration made to make sure customers use the license on a single project (as per Envato rules) and to help customers owning many licenses easily track on which server licenses are being used.

Installation

Include the following css and javascript code into HEAD section of the page:

<link rel="stylesheet" type="text/css" href="css/pag.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/custom_light.css" media="all"/>

<script src="js/sharemanager.js"></script>
<script src="js/pagination.js"></script>

Include custom_light.css or custom_dark.css file depending on your gallery skin!



Add element in the page where the gallery is going to be placed:

<div id="pg-wrapper"></div>



Initialize the plugin: 

<script type="text/javascript">

    var settings = {
        ...settings go here
    };

    new pag(document.getElementById('pg-wrapper'), settings);
});
</script>

Settings

General settings:

Parameters:

Parameter Value description
sourcePath Optional path to plugin root. Plugin loads some scripts from js directory so it needs relative location from the gallery root.
youtubeAppId Youtube API key. Go here for the API key: https://console.developers.google.com and create new project, enable YouTube Data API, go to Credentials, create Browser key and copy API key. You can enter multiple keys separated by comma for backup.
videoAutoplay true / false Auto play video in lightbox or inline. Will mute the video which is required for autoplay to work.
volume 0-1 Set video volume
mediaEndAction next What to do when video finishes playing. Next will advance to next video.
playlist_data Youtube data to load inside a grid. Check media youtube for more details.
thumbDefault url to thumbnail Default thumbnail backup url when no thumb with api exist.
truncateHeaderDescription number Shorten header description text. Enter number (for example 250) for 250 characters to be shown.
swapImageSources true / false On resize swap image sources between standard and high res.
useLivePreview true / false Play youtube video on mouse hover thumbnail (for desktop browsers)
scaleOnHover true / false Scale thumbnail on hover (this is available only for desktop browsers)
cacheTime seconds Cache playlist in browser local storage to limit api requests for Youtube. For example, if you load a Youtube playlist, and set cacheTime:3600 (1 hour), everytime the page is reloaded within that hour, playlist will be loaded from cache. If you want to clear cache set cacheTime:0 and playlist will be loaded using API again.
playlistStorageKey string (no spacing or special characters) Unique string identifier for Store playlist in browser feature (local storage). Has to be unique per gallery.
videoDisplayType lightbox, inline, link, none How to show the video when thumb is clicked.
youtubeThumbSize default / medium / high / standard / maxres youtube preffered thumb size:
default 120x90
medium 320x180
high 480x360
standard 640x480
maxres 1280x720
videoStatsPlaysText Plays Statistics video plays text
videoStatsLikesText Likes Statistics video likes text
videoStatsCommentsText Comments Statistics video comments text
viewsText views Statistics views text
followersText followers Statistics followers text
videosText videos Statistics videos text
subscribeBtnText Subscribe Subscribe button text
useScrollTop true / false Use scroll to top button
scrollTopTitle Go to top scroll to top button title attribute



Youtube player parameters:

Parameters:

Parameter Value description
disablekb 0/1 Setting the parameter's value to 1 causes the player to not respond to keyboard controls. https://developers.google.com/youtube/player_parameters#disablekb



Gallery layout settings:

Parameters:

Parameter Value description
skin light / dark Gallery skin
layout grid / vrb / hb / standalone Gallery layout
grid = javascript grid layout with rows and columns
vrb = Player layout with playlist vertical right and bottom
hb = Player layout with playlist horizontal below player
standalone = style grid with your own css
useHeaderBanner true / false Use header banner picture (Youtube channel banner cannot be retrieved automatically. Image needs to be uploaded manually!)
headerBanner image url Set custom header image (1200x250px)
useHeaderContent true / false This will hide all elements under the banner image in the gallery (channel logo, title, description, statistics, share, subscribe)
useHeaderLogo true / false Show / hide logo in header
headerLogo image url Set custom header logo image (90x90px)
useHeaderTitle true / false Show / hide title in header
headerTitle Set custom header title
useHeaderDescription true / false Show / hide description in header
headerDescription Set custom header description
useHeaderStats true / false Use channel video statistics beneath header (likes, views, plays)
useSubscribe true / false Use subscribe button
usePlaylistSelector true / false Use playlist selector with multiple sources that can be loaded in gallery. If there is only one video source, playlist selector with auto hide.



Grid layout settings:

Parameters:

Parameter Value description
navigationDirection v / h Thumb grid can move left to right (horizontal) or up and down (vertical).
transitionType slide / alpha Type of transition for grid.
breakPointArr Javascript breakpoints on "pg-playlist-holder" element on which grid is calculated, example:

breakPointArr:[
   {width:0, column:1, row:2, gutter:5},
   {width:500, column:2, row:2, gutter:0},
   {width:700, column:3, row:2, gutter:10},
   {width:1100, column:4, row:2, gutter:10},
   {width:1600, column:5, row:3, gutter:10}
]

Below 500px, use 1 column, 2 rows, 0px spacing between grid boxes
below 700px use 2 columns, 2 rows, 0px spacing between grid boxes
etc...
useSwipeNavigation true / false Use swipe navigation on touch enabled devices



Playlist items:

Parameters:

Parameter Value description
playlistStyle dot / dbt / drot Style of the thumbnail and descripion.
dot = Description over thumbnail
dbt = Description below thumbnail
drot = Description right of thumbnail
showVideoStatsInThumbnail true / false Show video statistics in thumbnail (views, likes, comments).
showVideoDateInThumbnail true / false Show video date in thumbnail
showVideoDescriptionInThumbnail true / false Show video description in thumbnail
showInfoButton true / false Show info button over thumbnail to open full video description
closeInfoPopupOnBgClick true / false Close info popup when user clicks on area around info



Video details settings:

Details beneath the video (video description, comments...)

Parameters:

Parameter Value description
showVideoDetailInLightbox true / false Show video title, description, statistics beneath Video.
convertUrlToLinksInDesc true / false Youtube video description does not provide clickable url links. This will convert http urls in description (if exist) into href clickable links. Use with care because it may return unexpected results since it has to scan all description text and try to convert to href tags.
showCommentsInLightbox true / false Show comments beneath Video. Valid only if showVideoDetailInLightbox is true.
showVideoViewsInLightbox true / false Show number of Video Views below video.
showVideoLikesInLightbox true / false Show number of Video Likes below video.
videoPublishedText Published on Youtube video published on text.
readMoreText SHOW MORE Youtube show more description text.
commentsText Comments Comments text.
loadMoreCommentsText Load more comments Load more comments button text.
useReplyBtnInComments true / false Show reply button in comments (leads to youtube comment where user can reply).
commentsReplyText Reply Reply to comment button text



Player layout settings:

Parameters:

Parameter Value description
playerRatio number Aspect ratio of player video area. Set video area ratio to fit your videos. If you videos are 4/3 ratio, use 1.333333. If your videos are 16/9 ratio, use 1.777777 (default).
playlistSideWidth px Width of the playlist when its on the side of the player (for vrb layout). Default 320
verticalBottomSepearator px Gallery width at which playlist on the side drops down below player (responsive layout). Default 900
playlistBottomHeight px Height of the verical playlist when its below the player. Default 300



Standalone layout settings:

Parameters:

Parameter Value description
loadMoreBtnText Load more Load more button appears below the thumbnails if there is more content to load.



Player Custom controls settings:

Parameters:

Parameter Value description
youtubePlayerType chromeless Use this to display video with custom controls (instead of Youtube default controls)
useUnmuteButton true / false Use unmute button (for video autoplay, video needs to start muted. You can use unmute button to show user he can unmute the video with button click.)
clickToUnmuteText CLICK TO UNMUTE Click To Unmute button Text
tooltipRewind Rewind tooltip Rewind video button
tooltipNext Next tooltip Next video button
liveText LIVE Live video button text
tooltipVolume Volume tooltip Volume
tooltipSettings Settings tooltip settings button
tooltipPlaybackSpeed Playback speed tooltip Playback Speed
tooltipPlaybackSpeedNormal Normal tooltip Playback Speed Normal (default video playback speed 1)
tooltipInfo Info tooltip video description
tooltipFullscreen Fullscreen tooltip Fullscreen button
tooltipExitFullscreen Exit Fullscreen tooltip Exit Fullscreen button
blockYoutubeEvents true / false This will prevent clicking or right clicking on Youtube video itself.



Lightbox settings:

Parameters:

Parameter Value description
closeBtnText Close Lightbox close button tooltip text.
previousButtonText Previous Lightbox previous button tooltip text.
nextButtonText Next Lightbox next button tooltip text.



Social sharing settings:

Parameters:

Parameter Value description
useShare true / false Deactivate all sharing options with this.
useShareFacebook true / false Use Facebook share
useShareTwitter true / false Use Twitter share
useShareTumblr true / false Use Tumblr share
useShareWhatsApp true / false Use WhatsApp share
useShareLinkedin true / false Use Linkedin share
useShareReddit true / false Use Reddit share
useShareDigg true / false Use Digg share
useSharePinterest true / false Use Pinterest share
shareBtnText Share Share button text.
tooltipShareFacebook Share on Facebook Tooltip share on Facebook.
tooltipShareTwitter Share on Twitter Tooltip share on Twitter.
tooltipShareTumblr Share on Tumblr Tooltip share on Tumblr.
tooltipShareWhatsApp Share on WhatsApp Tooltip share on WhatsApp.
tooltipShareLinkedin Share on Linkedin Tooltip share on Linkedin.
tooltipShareReddit Share on Reddit Tooltip share on Reddit.
tooltipShareDigg Share on Digg Tooltip share on Digg.
tooltipSharePinterest Share on Pinterest Tooltip share on Pinterest.
shareIconFacebook svg icon facebook
shareIconTwitter svg icon Twitter
shareIconTumblr svg icon Tumblr
shareIconWhatsApp svg icon WhatsApp
shareIconLinkedin svg icon Linkedin
shareIconReddit svg icon Reddit
shareIconDigg svg icon Digg
shareIconPinterest svg icon Pinterest

Youtube

Using Youtube requires API key which needs to be entered in settings: youtubeAppId

Go here for the API key: https://console.developers.google.com and create new Project, enable YouTube Data API service, go to Credentials, and create API key.

Tutorial on how to create Youtube API key: https://www.youtube.com/watch?v=pJSkp719HeE



Examples:

Youtube channel: 

var sources = [
     {type:"youtube_channel", path:"UC2MGuhIaOP6YLpUx106kTQw", sort:date, menu_title:"IFSC"},
]

Example: https://www.youtube.com/channel/UC2MGuhIaOP6YLpUx106kTQw

path = Youtube channel ID
sort = date, rating, relevance, title, videocount, viewcount
menu_title = title for playlist selector



Note that from last Youtube change, its not possible to retrieve banner image for Youtube channel automatically. So if you want to have banner image you need to specify it manually in settings:

headerBanner: "https://yt3.ggpht.com/YTNWlLCAiEyddpJ8AdWuaKpNSMgaVVElf71N9IM57BZ4XMKG3Sh3iFROW7SapxmSMr8hKhyKVQU=w2560-nd-rj",//carwow



Filter Youtube videos in channel

Filter Youtube videos in channel addyoutube_video_filter filter to source:

{type:"youtube_channel", path:"UCUhFaUpnq31m6TNX2VKVSVA", menu_title:"carwow", youtube_video_filter:"UULF"}

Parameters:

    '' = 'Show all (default)  
    'UULF' = 'Videos  
    'UULP' = 'Popular videos  
    'UULV' = 'Live streams  
    'UUMF' = 'Members-only videos  
    'UUMO' = 'Members-only contents (videos, short videos and live streams)   
    'UUMS' = 'Members-only short videos  
    'UUMV' = 'Members-only live streams  
    'UUPS' = 'Popular short videos  
    'UUPV' = 'Popular live streams  
    'UUSH' = 'Short videos



Youtube playlist: 

var sources = [
    {type:"youtube_playlist", path:"PLFgquLnL59alCl_2TQvOiD5Vgm1hCaGSI", menu_title:"Popular Music Videos"}
]

Example: https://www.youtube.com/playlist?list=PLFgquLnL59alCl_2TQvOiD5Vgm1hCaGSI

path = Youtube playlist ID
menu_title = title for playlist selector






Show default subtitle language on start

If your videos have multiple subtitles languages, you can force to show chosen language using cc_lang_pref parameter.

Example, use French subtitles:

var sources = [
 {type:"youtube_playlist", path:"PLpjK416fmKwQocODJPc1D7PQSoy25VluA", menu_title:"", cc_lang_pref:'fr'},
]

Use language code for cc_lang_pref value:

https://www.loc.gov/standards/iso639-2/php/code_list.php

Note that the list above is not correct in all cases, for example using Chinese requires following codes:

zh-Hans (Chinese Simplified)
zh-Hant (Chinese Traditional)

For example of this check vrb_force_subtitles.html demo.







Localized title and description

If your videos have localized title and description, you can show them in your chosen language using hl parameter:

var sources = [
 {type:"youtube_channel", path:"UCUhFaUpnq31m6TNX2VKVSVA", menu_title:"Carwow", hl:'de'},
]

Use language code (BCP-47) for hl value:

https://en.wikipedia.org/wiki/IETF_language_tag#:~:text=An%20IETF%20BCP%2047%20language,the%20IANA%20Language%20Subtag%20Registry.


How to translate title and description for your Youtube videos:

https://support.google.com/youtube/answer/6289575





Video start & end time

Set video start and end time (valid for all video in channel or playlist)

var sources = [
 {type:"youtube_channel", path:"UCUhFaUpnq31m6TNX2VKVSVA", menu_title:"Carwow", startTime: 10, endTime: 10},
]



startTime = At what seconds to start playing video. Applies to all videos in playlist. Note that this does not restrict user to seek in other parts of the video.

endTime = At what seconds to end playing video.

Responsive layout

How to adjust columns and rows in Grid layout for different devices?

Adjust the break points setting:

Parameter Value description
breakPointArr Javascript breakpoints on "pg-playlist-holder" element on which grid is calculated, example:

breakPointArr:[
   {width:0, column:1, row:2, gutter:5},
   {width:500, column:2, row:2, gutter:0},
   {width:700, column:3, row:2, gutter:10},
   {width:1100, column:4, row:2, gutter:10},
   {width:1600, column:5, row:3, gutter:10}
]

Below 500px, use 1 column, 2 rows, 0px spacing between grid boxes
below 700px use 2 columns, 2 rows, 0px spacing between grid boxes
etc...

Custom Youtube player skin

Using Youtube player with custom skin

Its possible to display Youtube player with custom skin. Use the following settings:

youtubePlayerType:'chromeless',

View more settings using Youtube custom player skin here

Video display inside gallery

How to show video inside gallery?

When you click on the thumbnail video can be shown in the following ways:

1. In lightbox popup:




2. Inline inside thumbnail:




3. As a "link", clicking the thumbnail can open this video on Youtube.



4. No action, clicking the thumbnail will do nothing.



These option is set using videoDisplayType

Playlist selector

New gallery can be loaded on runtime using playlist selector or api method loadPlaylist. To create playlist selector use following in settings usePlaylistSelector 

usePlaylistSelector:true

Create multiple sources for the gallery data, add menu title for each source: 

var sources = [
    {type:"youtube_channel", path:"UCUhFaUpnq31m6TNX2VKVSVA", menu_title:"Carwow"},
    {type:"youtube_channel", path:"UCqhnX4jA0A5paNd1v-zEysw", menu_title:"GoPro"},
    {type:"youtube_channel", path:"UCe0TLA0EsQbE-MjuHXevj2A", menu_title:"ATHLEAN-X™"}
]

menu_title = what is shown in playlist selector

This is used in settings as playlist_data

Playlist shelf

Playlist shelf displays user playlists in page and then shows playlist videos in lightbox. Playlist shelf accepts only Youtube channel as source.

To activate playlist shelf in settings: 

playlist_shelf:true

Layout available with playlist_shelf (grid / standalone) 

layout: grid

Gallery sources with playlist_shelf (type = playlist_shelf, provide channel ID in path): 

var sources = [
    {type:"playlist_shelf", path:"UCUhFaUpnq31m6TNX2VKVSVA", menu_title:"carwow"},
    {type:"playlist_shelf", path:"UCqhnX4jA0A5paNd1v-zEysw", menu_title:"GoPro"},
    {type:"playlist_shelf", path:"UCe0TLA0EsQbE-MjuHXevj2A", menu_title:"ATHLEAN-X™"},
]

Check playlist_shelf.html demo

Exclude videos

How to restrict videos from showing in the gallery?

Method 1 - restrict by video ID

Add excludeId in source (one or more video IDs to exclude separated by comma):

var sources = [
 {type:"youtube_channel", path:"UCUhFaUpnq31m6TNX2VKVSVA", menu_title:"Carwow", excludeId:'nm07c-s-SYc,JULhU1ZktFo'},
]

Restrict videos

Retrict certain videos from user and show popup window notice

Add restrictId in source (one or more video IDs to restrict):

var sources = [
 {type:"youtube_channel", path:"UCUhFaUpnq31m6TNX2VKVSVA", menu_title:"Carwow", restrictId:'nm07c-s-SYc,JULhU1ZktFo'},
]



Popup settings (content which opens when user tries to access restricted video):

restrictContentText:"<p class='pg-restrict-header'>Want to see more?</p><a href='#'>Upgrade to Pro membership to view this content</a>",

restrictContentTitle:'This content is available to subscribers only.'

Custom banner image, logo

How to use custom banner image, logo, channel description?

Channel logo, title and description will automatically be retrieved from Youtube. If you want to specify your own instead use following settings:

headerBanner: "banner image url",
headerLogo: "logo image url",
headerTitle: "your title",
headerDescription: "your description",

Note that from last Youtube change, its not possible to retrieve banner image for Youtube channel automatically. So if you want to have banner image you need to specify it manually in settings:

headerBanner: "IMAGE_URL",

Live preview

How to play video on hover a thubmnial? This feature is available for desktop browsers.

Use these settings:

useLivePreview:true,

Available in General settings:

useLivePreview

Scale effect

How to create scale effect on hover?

Use these settings:

scaleOnHover:true

Available in General settings:

scaleOnHover

Info button

Show full video description

Create info button over thumbnail area which when clicked will show full video description in popup window.

Use following settings:

Parameter Value description
showInfoButton true / false Show info button over thumbnail to open full video description
closeInfoPopupOnBgClick true / false Close info popup when user clicks on area around info

Autoplay viewport

Option to autoplay in viewport for player layouts

Autoplay in viewport is available with player layouts (vrb, hb) when player is shown directly in the page (not opened in lightbox).

Use these settings:

autoPlayInViewport:true,
autoPlayInViewportIOSMuted:true,//ios wont autoplay with volume even after clicking. If false player will try to autoplay with volume on IOS.
volume:0.5//set volume of choice or 0 for mute

Ad content

How to ad content into gallery?

Insert advertising content into the gallery (Adsense, Amazon Affiliates, Commission Junction etc...). Basically any HTML is allowed. Make sure its properly formatted so it doesnt break the layout.

To add ad content on the bottom of the gallery use this settings (adContent):

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script>
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="AD_CLIENT_HERE"
data-ad-slot="AD_SLOT_HERE"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
<\/script>

To add ad content on the bottom of the popup window use this settings (adContentPopup):

adContentPopup:  'ADD_CODE_HERE',

Notes: 

1. remove line breaks

2. Note how the ending script tags are escaped with backslash (<\/script>).

API

Available api methods:


player.disposeVideo(); //dispose video (lightbox or inline)

-----------------------

var data = {type:"youtube_channel", path:"UCqhnX4jA0A5paNd1v-zEysw"};

player.loadPlaylist(data, reset_header);//load playlist on runtime

Contact / Support

How to contact us?

To receive support, first make sure you have registered as described in the register section.

If you have any questions after purchase, send a message at http://codecanyon.net/user/Tean#contact, and provide your PURCHASE CODE.