Multitransition Gallery Sliders Collection

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!



Installation

1. Open the demo page you want to use (for example index_playlistBottomInside.html) in any text editor.

2. Copy all the code from that demo HEAD tag into your website HEAD tag.

Note: if you already use jQuery in your website do not include it again (jQuery should only be included once per page!)

3. Copy all the code from that demo BODY tag into your website BODY tag.

4. Copy folders inside _deploy directory (css, js, media with all the files inside) into your website on the same level where your website is located. Also copy folder_parser.php file if you are loading audio fuiles from folders.

5. Now the gallery should be working in your website.

Configuration

Configuration for the gallery.

Audio settings (if audio player is not used inside the gallery this part can be removed): 

var ap_settings = {
    /* playerHolder: dom elements which holds the whole player */
    playerHolder: '.audioPlayer',
    /* playlistHolder: dom elements which holds list of playlists */
    playlistHolder: '#playlist_list',
    /* activePlaylist: set active playlist that will be loaded on beginning. 
    Leave empty for none like this: activePlaylist: '' */
    activePlaylist: '#audio_playlist2',
    /* activeItem: active item to start with when playlist is loaded (0 = first, 1 = second, 2 = third... -1 = none) */
    activeItem: 0,

    /*defaultVolume: 0-1 (Irrelevant on ios mobile) */
    defaultVolume:0.5,
    /*autoPlay: true/false (false on mobile by default) */
    autoPlay:true,
    /*autoLoad: true/false (auto start sound load) */
    autoLoad:true,
    /*randomPlay: true/false */
    randomPlay:false,
    /*loopingOn: true/false (loop on the end of the playlist) */
    loopingOn:true,
    
    /* autoSetSongTitle: true/false. Auto set song title in 'player_mediaName'. */
    autoSetSongTitle: true,
    
    /* useSongNameScroll: true/false. Use song name scrolling. */
    useSongNameScroll: true,
    /* scrollSpeed: speed of the scroll (number higher than zero). */
    scrollSpeed: 1,
    /* scrollSeparator: String to append between scrolling song name. */
    scrollSeparator: ' *** ',
    
    /* buttonsUrl: url of the buttons for normal and rollover state */
    buttonsUrl: {prev: 'media/data/audio_icons/prev.png', prevOn: 'media/data/audio_icons/prev_on.png', 
                 next: 'media/data/audio_icons/next.png', nextOn: 'media/data/audio_icons/next_on.png', 
                 pause: 'media/data/audio_icons/pause.png', pauseOn: 'media/data/audio_icons/pause_on.png',
                 play: 'media/data/audio_icons/play.png', playOn: 'media/data/audio_icons/play_on.png',
                 volume: 'media/data/audio_icons/volume.png', volumeOn: 'media/data/audio_icons/volume_on.png', 
                 mute: 'media/data/audio_icons/mute.png', muteOn: 'media/data/audio_icons/mute_on.png'},
    /* useAlertMessaging: Alert error messages to user (true / false). */
    useAlertMessaging: true,
    /* autoOpenAudioPlayer: true / false */
    autoOpenAudioPlayer: true
};

Gallery settings: 

var kb_settings = {
    /* GENERAL */
    /* componentHolder: dom element which holds the whole component */
    componentHolder: '#componentWrapper',
    /* componentFixedSize: true/false. Responsive = false, fixed = true */
    componentFixedSize: false,
    /* disableRightClick: true/false  */
    disableRightClick: true,
    /* forceImageFitMode: true/false. By default, only images bigger than component size will get proportionally resized to 'fit inside' or 'fit outside' mode. If this is true, all images will be forced into that mode. */
    forceImageFitMode: true,
    
    /* DEEPLINKING SETTINGS */
    /* useDeeplink: true/false */
    useDeeplink:false,
    /* startUrl: deeplink start url, enter 'div' data-address/'li' data-address (two levels). Or just 'div' data-address (single level). */
    startUrl: 'mistique_ken_burns',
    
    /* NO DEEPLINKING SETTINGS */
    /* activeCategory: active category to start with (counting starts from zero, 0=first category, 1=second category, 2=third category... etc) */
    activeCategory:0,
    
    /* SLIDESHOW */
    /* slideshowOn; true, false */
    slideshowOn: true,
    /* useGlobalDelay; true, false (use same timer delay for all slides, if false you need to set individual delays for every slide -> data-duration attribute) */
    useGlobalDelay: true,
    /* slideshowAdvancesToNextCategory: true/false. On the end of current category, go to next one, instead of loop current one. */
    slideshowAdvancesToNextCategory: false,
    /* randomPlay; true, false (random image play in category) */
    randomPlay: false,
    
    /* DESCRIPTION */
    /* autoOpenDescription; true/false (automatically open description, if exist)  */
    autoOpenDescription: false,
    /* maxDescriptionWidth: max width of the description */
    maxDescriptionWidth: 250,
    
    /* PLAYLIST */
    /* autoAdjustPlaylist: true/false (auto adjust thumb playlist and playlist buttons) */
    autoAdjustPlaylist: true,
    /* playlistPosition: top, right, left, bottom  */
    playlistPosition: 'bottom',
    /* autoOpenPlaylist: true/false. Auto open playlist on beginning */
    autoOpenPlaylist: true,
    /* playlistHidden: true/false. (leave css display none on componentPlaylist) */
    playlistHidden: false,
    /* playlistIndex: inside/outside ('outside' opens above the image, while 'inside' sits outside of the image area and cannot be closed)  */
    playlistIndex: 'inside',
    
    /* MENU */
    /* menuOrientation: horizontal/vertical  */
    menuOrientation: 'horizontal',
    /* menuItemOffOpacity: opacity of menu item when inactive */
    menuItemOffOpacity:0.4,
    /* menuBtnSpace: space between menu buttons and the menu (enter 0 or more) */
    menuBtnSpace: 30,
    /* visibleMenuItems: visible menu items by default. Enter number (if they dont fit into provided area, the code will automatically reduce this number) or 'max' (maximum number that fits). */
    visibleMenuItems: 'max',
    /* fixMenu: true/false. false by default (menu centered). Can be true ONLY if 'visibleMenuItems' != 'max'. 
    Set this to true to fix it to one side. */
    fixMenu: false,
    /* fixMenuSettings: (if fixMenu = true), param1: side: -> left/right if menuOrientation = horizontal, top/bottom if menuOrientation = vertical, 
                                             param2: value -> offset value in px from that side */
    fixMenuSettings: {side: 'top',value: 100},
    
    /* THUMBNAILS */
    /* thumbOrientation: horizontal/vertical  */
    thumbOrientation: 'horizontal',
    /* thumbOffOpacity: opacity of thumb when inactive */
    thumbOffOpacity:0.4,
    /* visibleThumbs: visible thumb items by default. Enter number (if they dont fit into provided area, the code will automatically reduce this number) or 'max' (maximum number that fits). */
    visibleThumbs: 'max',
    /* thumbBtnSpace:  space between thumb buttons and the thumbs (enter 0 or more) */
    thumbBtnSpace: 30,
    /* fixThumbs: true/false. false by default (thumbs centered). Can be true ONLY if 'visibleThumbs' != 'max'. 
    Set this to true to fix it to one side. */
    fixThumbs: false,
    /* fixThumbsSettings:  (if fixThumbs = true), param1: side -> left/right if thumbOrientation = horizontal, top/bottom if thumbOrientation = vertical,
                                                  param2: value -> offset value in px from that side */
    fixThumbsSettings: {side: 'top',value: 100},
    
    /* VIDEO SETTINGS */
    /* useVideo: true/false */
    useVideo: true,
    /* videoPosition: left, center */
    videoPosition: 'center',
    /* videoVolume: default volume for video (0-1) */
    videoVolume: 0.5,
    /* videoAutoPlay: true/false (Defaults to false on mobile) */
    videoAutoPlay: true,
    /* includeVideoInSlideshow: true/false (on video end resume slideshow, only if slideshow was playing before video request) */
    includeVideoInSlideshow: false,
    /* videoLoop: true/false (only if includeVideoInSlideshow = false) */
    videoLoop: false,
    /*playerBgOpacity: background opacity behind the video player when its opened (0-1) */
    playerBgOpacity:0.8,
    /*playerHolder: dom elements which holds the whole player */
    playerHolder:'#componentWrapper .videoPlayer',

    /* useYoutubeHighestQuality: true/false (use highest available quality for youtube video, if false, then it set to default)  */
    useYoutubeHighestQuality:false,
        
    /* AUDIO SETTINGS */
    /* useAudio: true/false */
    useAudio: true

    /* SOCIAL SHARING */  
    twitterVia:'Attribute the source of a Tweet to a Twitter username.'
}

Layout

Intro
All demo examples (regardless of full size / fixed size / banners / widgets) can have video, audio and captions implemented.

Also, any of them can have both menu and thumbnails in the playlist (even banners and widget examples), and any of them can work with just single category in the gallery and no menu.





Playlist opens above image or shares space with image
You will notice 2 diferent layouts called 'inside' and 'outside', for example:

index_playlistBottomInside.html, index_playlistLeftInside.html vs index_playlistBottomOutside.html, index_playlistLeftOutside.html.

This is controlled with this gallery setting:

/* playlistIndex: inside/outside ('outside' opens above the image, while 'inside' sits outside of the image area and cannot be closed)  */
playlistIndex: 'inside',

The main difference visually is that in 'inside' version playlist opens over the image, so image occupies whole component size.

In 'outside' version, image shares space with the playlist, so in this case image area is smaller than the component by the size of the playlist.





Playlist position
Playlist size and position are adjusted from within the jquery code (in multiGallery.js file).

Playlist can be on 4 different sides (top/right/bottom/left).

This is controlled with gallery setting:

/* playlistPosition: top, right, left, bottom  */
playlistPosition: 'bottom',

So for example if we have horizontal playlist, by default its size is 100% width and height is defined with this attribute in html: 'data-playlistSize'.

This attribute is present for every category because thumbnails can be different size per category.

You can turn off this auto adjustment of playlist with this setting: 

/* autoAdjustPlaylist: true/false (auto adjust thumb playlist and playlist buttons) */
autoAdjustPlaylist: false,

Then you can manually set the size and position of playlist parts in css.

Look at the example from the package: index_banner2.html, which is made this way.





No playlist (hidden playlist)
Playlist can be completely hidden, and this is done with this gallery setting:

/* playlistHidden: true/false. (leave css display none on componentPlaylist) */
playlistHidden: false,

Dont delete this element from the HTML because it contains the list of categories in the gallery, so it needs to be there.





Image size
Images size is controlled with this attribute available for every transition type (except ken burns transition): 'data-imageFitMode' which can be 'fit-inside' or 'fit-outside'.

Both are self-explanatory.

Check this option in gallery settings:

/* forceImageFitMode: true/false. By default, only images bigger than component size will get proportionally resized to 'fit inside' or 'fit outside' mode. If this is true, all images will be forced into that mode. */
forceImageFitMode: true,

If you use 'fit-inside', the background color behind the images wil be exposed.

So if you want to apply color to the background of the gallery, this is controlled with this attribute available for every transition type: 'data-bgColor' (except ken burns transition):

Images are placed within these 2 div elements and these are the elements on which this background color is being applied:

<div class="mediaHolder1"></div>
<div class="mediaHolder2"></div>

(a reason behind that is because of the nature of some transtion types)





Categories
Every category has certain attributes applied (only ken burns transition differs somewhat because of the nature of transition)

CATEGORY SETTINGS: 
 data-address: think of this as 'category name', used for swfaddress (indexable images) 
                SWFADDRESS RULES:
                No spaces between words, so use either cammelCase or under_score.
                Any spaces left will be stripped, and all will be converted to lowercase. 
                Only normal characters allowed: a-z, 0-9.
 data-title: menu category title.
 data-transitionType: transition type (ken_burns/alpha/zoom/slide/split/reveal)
 data-bgColor: background color behind image, visible only if image smaller than component (not visible in 'fit-outside' mode).
 data-playlistSize: width (if playlistPosition == left/right), height (if playlistPosition == top/bottom) of the playlist background (thumbnail size per category can be different!).
 data-duration: slideshow delay, in miliseconds (optional, can be set in html options as global delay, or in every image setting as individual delay).
 (First global delay takes priority, and then individual delay per slide).
 
 KEN BURNS SETTINGS:
 NOTE: 
 -ken_burns transition doesnt have 'data-imageFitMode', 'data-transitionEase', 'data-transitionTime' attributes like other transitions.
 SETTINGS:
 data-startScale: start scale of the image, example: (1 -> image size = component size, 1.5 -> image size = 1.5 component size)
 data-endScale: end scale of the image, example: (1 -> image size = component size, 1.5 -> image size = 1.5 component size)
 (data-startScale and data-endScale may be changed internally by the code because images must never be smaller than component size, so technically regardless of the way ken burns animation goes, zoom-in or out, this values should always be 1 or above)
 data-startPosition, data-endPosition: 'tl','tc','tr','ml','mc','mr','bl','bc','br' (top left, top center, top right, middle left, middle center, middle right, bottom left, bottom center, bottom right)
 data-duration: slideshow delay, in miliseconds (optional, can be set in html options as global delay, or in every image setting as individual delay).
 (First global delay takes priority, and then individual delay per slide).
   
 OTHER TRANSITIONS SETTINGS:
 data-imageFitMode: 'fit-inside'/'fit-outside'. Resize images to 'fit-inside' or 'fit-outside' of the component (check forceImageFitMode in settings as well).
 data-duration: slideshow delay, in miliseconds.
 data-transitionTime: transition time, in miliseconds.
 data-transitionEase: transition ease, (some eases may possibly not work well with certain transition types), check eases here: http://gsgd.co.uk/sandbox/jquery/easing/.
 
 SHARED SETTINGS:
 REQUIRED:
 data-imagePath: path to the main image.
 OPTIONAL:
 data-link: link to url (example: data-link='http://www.google.com')
 data-target: _blank (open in new window) or _parent (open in same window), (example: data-target='_blank')
 data-description: image description (example: data-description='Lorem ipsum dolor sit amet Link')
 data-video: link to video 
    SUPPORTED:
    local (mp4), (example: data-localMp4='media/video/01.mp4'  data-localPreview='media/video/01.jpg'),
    youtube (example: data-youtube='Q9Phn1yQT8U')
    vimeo (example: data-vimeo='14665315')

Captions

Captions on each slide are linked with data-caption-id attribute: 

<li data-address='image1' class='playlistItem' data-caption-id="#caption_1"

Then captions are located in div class="caption_holder" element: 

<div class="caption_holder">

<div id="caption_1">
    <div class="caption_big_white" data-startX="100" data-startY="-100" data-endX="100" data-endY="260" data-time="300" data-ease="easeOutBack" data-delay="0" data-caption-align-x="l" data-caption-align-y="t">Video and Audio Support</div>
    <div class="caption_big_orange" data-startX="100" data-startY="300" data-endX="100" data-endY="200" data-time="300" data-ease="easeOutBack" data-delay="300" data-caption-align-x="l" data-caption-align-y="b">Or pretty much any HTML content</div>
</div>   

</div>


Captions properties:
data-startX - start position x in px
data-startY - start position y in px

data-endX - end position x in px
data-endY - end position y in px

data-time - animation duration in miliseconds

data-ease - animation each (jquery easing)

data-delay - animation delay (if you have multiple captions in slide, you can delay next caption)

data-caption-align-x - align caption on x axis, possible values: "l" (left), "r" (right)
data-caption-align-y - align caption on y axis, possible values: "t" (top), "b" (bottom)
(default is "l" and "t")

Deeplinking

Script support deeplinking using jquery address: http://www.asual.com/jquery/address/

You can still use the script without deeplinking, you adjust this in gallery settings:

/* DEEPLINKING SETTINGS */
/* useDeeplink: true/false */
useDeeplink:false,



Deeplinking is two level in this gallery.

First level equals category deeplink (or playlist deeplink):

<div class="playlist" data-address='paradise_slide' data-title='paradise' data-transitionType='slide' data-imageFitMode='fit-outside' data-duration='4000' data-transitionTime='1000' data-transitionEase='easeInOutExpo' data-bgColor='#e5e5e5' data-playlistSize='220'>
      <ul> 
          <li data-address='image1' class='playlistItem4' data-caption-id="#caption_1" data-imagePath='media/category4/main/01.jpg' data-description="Nulla mauris justo, ullamcorper nec, sollicitudin a, blandit ut, metus. Ut quis velit. Maecenas magna dui, malesuada quis commodo vitae.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='jXSxzMTrKq0'><a href='#'><img src='media/category4/thumb/01.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image2' class='playlistItem4' data-caption-id="#caption_2" data-imagePath='media/category4/main/02.jpg' data-description="Short image description" data-vimeo='54480263'><a href='#'><img src='media/category4/thumb/02.jpg' width='200' height='133' alt=''/></a></li>
      </ul>   
 </div>



Second level equals image deeplink:

<div class="playlist" data-address='paradise_slide' data-title='paradise' data-transitionType='slide' data-imageFitMode='fit-outside' data-duration='4000' data-transitionTime='1000' data-transitionEase='easeInOutExpo' data-bgColor='#e5e5e5' data-playlistSize='220'>
      <ul> 
          <li data-address='image1' class='playlistItem4' data-caption-id="#caption_1" data-imagePath='media/category4/main/01.jpg' data-description="Nulla mauris justo, ullamcorper nec, sollicitudin a, blandit ut, metus. Ut quis velit. Maecenas magna dui, malesuada quis commodo vitae.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='jXSxzMTrKq0'><a href='#'><img src='media/category4/thumb/01.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image2' class='playlistItem4' data-caption-id="#caption_2" data-imagePath='media/category4/main/02.jpg' data-description="Short image description" data-vimeo='54480263'><a href='#'><img src='media/category4/thumb/02.jpg' width='200' height='133' alt=''/></a></li>
      </ul>   
 </div>



If you dont use deeplinking, you dont need these 'data-address' attributtes.

To set up a deeplink url, append 'data-address' from div class="playlist" and 'data-address' from image: '#/data-address/data-address' to your website url.

Couple of deeplinking examples:

http://www.yourWebsite.com/index.html#/paradise_slide/image1
(Opens image under 'image1' deeplink, inside category under 'paradise_slide' deeplink.)

http://www.yourWebsite.com/index.html#/playlist1/image3
(loads video under 'image3' deeplink, inside category under 'paradise_slide' deeplink.)







Allowed characters

Deeplink only works with basic latin characters: lowercase a-z, and numbers 0-9. Other allowed characters are underscore(_), and hyphen(-).

No spaces allowed or other special characters.

No repetitions

You should not have any repetitions when naming your deeplinks!

On the first level:

CORRECT:

<div class="playlist" data-address='paradise_slide' data-title='paradise' data-transitionType='slide' data-imageFitMode='fit-outside' data-duration='4000' data-transitionTime='1000' data-transitionEase='easeInOutExpo' data-bgColor='#e5e5e5' data-playlistSize='220'>
      <ul> 
          <li data-address='image1' class='playlistItem4' data-caption-id="#caption_1" data-imagePath='media/category4/main/01.jpg' data-description="Nulla mauris justo, ullamcorper nec, sollicitudin a, blandit ut, metus. Ut quis velit. Maecenas magna dui, malesuada quis commodo vitae.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='jXSxzMTrKq0'><a href='#'><img src='media/category4/thumb/01.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image2' class='playlistItem4' data-caption-id="#caption_2" data-imagePath='media/category4/main/02.jpg' data-description="Short image description" data-vimeo='54480263'><a href='#'><img src='media/category4/thumb/02.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image3' class='playlistItem4' data-caption-id="#caption_3" data-imagePath='media/category4/main/03.jpg' data-link='http://www.google.com' data-target='_blank' data-localMp4='media/video/02.mp4' data-localPreview='media/video/02.jpg'><a href='#'><img src='media/category4/thumb/03.jpg' width='200' height='133' alt=''/></a></li>
      </ul>   
 </div>
 
<div class="playlist" data-address='interior_design_split' data-title='interior design' data-transitionType='split' data-imageFitMode='fit-outside' data-duration='4000' data-transitionTime='1000' data-transitionEase='easeInOutExpo' data-bgColor='#e5e5e5' data-playlistSize='185'>
      <ul> 
          <li data-address='image1' class='playlistItem5' data-caption-id="#caption_1" data-imagePath='media/category5/main/01.jpg' data-link='http://www.google.com' data-target='_blank' data-description="Vestibulum blandit, dui vel sollicitudin elementum, mi ligula volutpat arcu, in venenatis eros lacus porttitor quam.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='Q9Phn1yQT8U'><a href='#'><img src='media/category5/thumb/01.jpg' width='130' height='100' alt=''/></a></li>
          <li data-address='image2' class='playlistItem5' data-caption-id="#caption_2" data-imagePath='media/category5/main/02.jpg' data-description="Nulla mauris justo, ullamcorper nec, sollicitudin a, blandit ut, metus. Ut quis velit. Maecenas magna dui, malesuada quis commodo vitae.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-vimeo='54480263'><a href='#'><img src='media/category5/thumb/02.jpg' width='130' height='100' alt=''/></a></li>
          <li data-address='image3' class='playlistItem5' data-caption-id="#caption_3" data-imagePath='media/category5/main/03.jpg' data-localMp4='media/video/01.mp4'  data-localPreview='media/video/01.jpg'><a href='#'><img src='media/category5/thumb/03.jpg' width='130' height='100' alt=''/></a></li>
          <li data-address='image4' class='playlistItem5' data-caption-id="#caption_4" data-imagePath='media/category5/main/04.jpg' data-link='http://www.google.com' data-target='_blank'><a href='#'><img src='media/category5/thumb/04.jpg' width='130' height='100' alt=''/></a></li>
          <li data-address='image5' class='playlistItem5' data-caption-id="#caption_5" data-imagePath='media/category5/main/05.jpg' data-description="Short image description" data-youtube='jXSxzMTrKq0'><a href='#'><img src='media/category5/thumb/05.jpg' width='130' height='100' alt=''/></a></li>
     </ul> 
 </div>
 
<div class="playlist" data-address='wellness_reveal' data-title='wellness' data-transitionType='reveal' data-imageFitMode='fit-outside' data-duration='4000' data-transitionTime='1000' data-transitionEase='easeInOutExpo' data-bgColor='#e5e5e5' data-playlistSize='185'>
      <ul> 
          <li data-address='image1' class='playlistItem6' data-caption-id="#caption_1" data-imagePath='media/category6/main/01.jpg' data-description="Short image description" data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category6/thumb/01.jpg' width='150' height='100' alt=''/></a></li>
          <li data-address='image2' class='playlistItem6' data-caption-id="#caption_2" data-imagePath='media/category6/main/02.jpg' data-link='http://www.google.com' data-target='_blank' data-description="Vestibulum blandit, dui vel sollicitudin elementum, mi ligula volutpat arcu, in venenatis eros lacus porttitor quam.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-vimeo='14665315'><a href='#'><img src='media/category6/thumb/02.jpg' width='150' height='100' alt=''/></a></li>
     </ul> 
</div>



WRONG:

<div class="playlist" data-address='paradise_slide' data-title='paradise' data-transitionType='slide' data-imageFitMode='fit-outside' data-duration='4000' data-transitionTime='1000' data-transitionEase='easeInOutExpo' data-bgColor='#e5e5e5' data-playlistSize='220'>
      <ul> 
          <li data-address='image1' class='playlistItem4' data-caption-id="#caption_1" data-imagePath='media/category4/main/01.jpg' data-description="Nulla mauris justo, ullamcorper nec, sollicitudin a, blandit ut, metus. Ut quis velit. Maecenas magna dui, malesuada quis commodo vitae.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='jXSxzMTrKq0'><a href='#'><img src='media/category4/thumb/01.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image2' class='playlistItem4' data-caption-id="#caption_2" data-imagePath='media/category4/main/02.jpg' data-description="Short image description" data-vimeo='54480263'><a href='#'><img src='media/category4/thumb/02.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image3' class='playlistItem4' data-caption-id="#caption_3" data-imagePath='media/category4/main/03.jpg' data-link='http://www.google.com' data-target='_blank' data-localMp4='media/video/02.mp4' data-localPreview='media/video/02.jpg'><a href='#'><img src='media/category4/thumb/03.jpg' width='200' height='133' alt=''/></a></li>
      </ul>   
 </div>
 
<div class="playlist" data-address='paradise_slide' data-title='interior design' data-transitionType='split' data-imageFitMode='fit-outside' data-duration='4000' data-transitionTime='1000' data-transitionEase='easeInOutExpo' data-bgColor='#e5e5e5' data-playlistSize='185'>
      <ul> 
          <li data-address='image1' class='playlistItem5' data-caption-id="#caption_1" data-imagePath='media/category5/main/01.jpg' data-link='http://www.google.com' data-target='_blank' data-description="Vestibulum blandit, dui vel sollicitudin elementum, mi ligula volutpat arcu, in venenatis eros lacus porttitor quam.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='Q9Phn1yQT8U'><a href='#'><img src='media/category5/thumb/01.jpg' width='130' height='100' alt=''/></a></li>
          <li data-address='image2' class='playlistItem5' data-caption-id="#caption_2" data-imagePath='media/category5/main/02.jpg' data-description="Nulla mauris justo, ullamcorper nec, sollicitudin a, blandit ut, metus. Ut quis velit. Maecenas magna dui, malesuada quis commodo vitae.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-vimeo='54480263'><a href='#'><img src='media/category5/thumb/02.jpg' width='130' height='100' alt=''/></a></li>
          <li data-address='image3' class='playlistItem5' data-caption-id="#caption_3" data-imagePath='media/category5/main/03.jpg' data-localMp4='media/video/01.mp4' data-localPreview='media/video/01.jpg'><a href='#'><img src='media/category5/thumb/03.jpg' width='130' height='100' alt=''/></a></li>
          <li data-address='image4' class='playlistItem5' data-caption-id="#caption_4" data-imagePath='media/category5/main/04.jpg' data-link='http://www.google.com' data-target='_blank'><a href='#'><img src='media/category5/thumb/04.jpg' width='130' height='100' alt=''/></a></li>
          <li data-address='image5' class='playlistItem5' data-caption-id="#caption_5" data-imagePath='media/category5/main/05.jpg' data-description="Short image description" data-youtube='jXSxzMTrKq0'><a href='#'><img src='media/category5/thumb/05.jpg' width='130' height='100' alt=''/></a></li>
     </ul> 
 </div>
 
<div class="playlist" data-address='wellness_reveal' data-title='wellness' data-transitionType='reveal' data-imageFitMode='fit-outside' data-duration='4000' data-transitionTime='1000' data-transitionEase='easeInOutExpo' data-bgColor='#e5e5e5' data-playlistSize='185'>
      <ul> 
          <li data-address='image1' class='playlistItem6' data-caption-id="#caption_1" data-imagePath='media/category6/main/01.jpg' data-description="Short image description" data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category6/thumb/01.jpg' width='150' height='100' alt=''/></a></li>
          <li data-address='image2' class='playlistItem6' data-caption-id="#caption_2" data-imagePath='media/category6/main/02.jpg' data-link='http://www.google.com' data-target='_blank' data-description="Vestibulum blandit, dui vel sollicitudin elementum, mi ligula volutpat arcu, in venenatis eros lacus porttitor quam.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-vimeo='14665315'><a href='#'><img src='media/category6/thumb/02.jpg' width='150' height='100' alt=''/></a></li>
     </ul> 
</div>


As you can see 'data-address=paradise_slide' is repeating twice on the same level, so this is not good.



On the second level:

CORRECT:

<div class="playlist" data-address='paradise_slide' data-title='paradise' data-transitionType='slide' data-imageFitMode='fit-outside' data-duration='4000' data-transitionTime='1000' data-transitionEase='easeInOutExpo' data-bgColor='#e5e5e5' data-playlistSize='220'>
      <ul> 
          <li data-address='image1' class='playlistItem4' data-caption-id="#caption_1" data-imagePath='media/category4/main/01.jpg' data-description="Nulla mauris justo, ullamcorper nec, sollicitudin a, blandit ut, metus. Ut quis velit. Maecenas magna dui, malesuada quis commodo vitae.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='jXSxzMTrKq0'><a href='#'><img src='media/category4/thumb/01.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image2' class='playlistItem4' data-caption-id="#caption_2" data-imagePath='media/category4/main/02.jpg' data-description="Short image description" data-vimeo='54480263'><a href='#'><img src='media/category4/thumb/02.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image3' class='playlistItem4' data-caption-id="#caption_3" data-imagePath='media/category4/main/03.jpg' data-link='http://www.google.com' data-target='_blank' data-localMp4='media/video/02.mp4' data-localPreview='media/video/02.jpg'><a href='#'><img src='media/category4/thumb/03.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image4' class='playlistItem4' data-caption-id="#caption_4" data-imagePath='media/category4/main/04.jpg' data-link='http://www.google.com' data-target='_blank' data-description="Vestibulum blandit, dui vel sollicitudin elementum, mi ligula volutpat arcu, in venenatis eros lacus porttitor quam.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>"><a href='#'><img src='media/category4/thumb/04.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image5' class='playlistItem4' data-caption-id="#caption_5" data-imagePath='media/category4/main/05.jpg' data-description="Short image description" ><a href='#'><img src='media/category4/thumb/05.jpg' width='200' height='133' alt=''/></a></li>
      </ul>   
 </div>



WRONG:

<div class="playlist" data-address='paradise_slide' data-title='paradise' data-transitionType='slide' data-imageFitMode='fit-outside' data-duration='4000' data-transitionTime='1000' data-transitionEase='easeInOutExpo' data-bgColor='#e5e5e5' data-playlistSize='220'>
      <ul> 
          <li data-address='image1' class='playlistItem4' data-caption-id="#caption_1" data-imagePath='media/category4/main/01.jpg' data-description="Nulla mauris justo, ullamcorper nec, sollicitudin a, blandit ut, metus. Ut quis velit. Maecenas magna dui, malesuada quis commodo vitae.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>" data-youtube='jXSxzMTrKq0'><a href='#'><img src='media/category4/thumb/01.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image1' class='playlistItem4' data-caption-id="#caption_2" data-imagePath='media/category4/main/02.jpg' data-description="Short image description" data-vimeo='54480263'><a href='#'><img src='media/category4/thumb/02.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image3' class='playlistItem4' data-caption-id="#caption_3" data-imagePath='media/category4/main/03.jpg' data-link='http://www.google.com' data-target='_blank' data-localMp4='media/video/02.mp4'  data-localPreview='media/video/02.jpg'><a href='#'><img src='media/category4/thumb/03.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image4' class='playlistItem4' data-caption-id="#caption_4" data-imagePath='media/category4/main/04.jpg' data-link='http://www.google.com' data-target='_blank' data-description="Vestibulum blandit, dui vel sollicitudin elementum, mi ligula volutpat arcu, in venenatis eros lacus porttitor quam.     <a href='http://codecanyon.net/user/Tean' target='_blank'>Link</a>"><a href='#'><img src='media/category4/thumb/04.jpg' width='200' height='133' alt=''/></a></li>
          <li data-address='image5' class='playlistItem4' data-caption-id="#caption_5" data-imagePath='media/category4/main/05.jpg' data-description="Short image description" ><a href='#'><img src='media/category4/thumb/05.jpg' width='200' height='133' alt=''/></a></li>
      </ul>   
 </div>


As you can see 'data-address=image1' is repeating twice on the same level, so this is not good.

Using video

Self hosted video
Example of self hosted video in the slide:

<li data-address='image8' class='playlistItem6' data-imagePath='media/category6/main/08.jpg' data-localMp4='media/video/01.mp4' data-localPreview='media/video/01.jpg'><a href='#'><img src='media/category6/thumb/08.jpg' width='150' height='100' alt=''/></a></li>

Required attributes:

data-localMp4: path to the 'mp4' file
data-localPreview: path to the preview image (for autoplay off)



Youtube video
Example of youtube video in the slide:

<li data-address='image8' class='playlistItem6' data-imagePath='media/category6/main/08.jpg' data-youtube='F08U2yCxbYg'><a href='#'><img src='media/category6/thumb/08.jpg' width='150' height='100' alt=''/></a></li>

Required attributes:

data-youtube: youtube video ID



Vimeo video
Example of vimeo video in the slide:

<li data-address='image8' class='playlistItem6' data-imagePath='media/category6/main/08.jpg' data-vimeo='14665315'><a href='#'><img src='media/category6/thumb/08.jpg' width='150' height='100' alt=''/></a></li>

Required attributes:

data-vimeo: vimeo video ID





If you are not using video in the slides you can remove the following from the page:
1.video player css file:

<link rel="stylesheet" type="text/css" href="css/videoPlayer.css" />

(it may be called slightly differently depending on the gallery layout)



2.video related js files:

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script type="text/javascript" src="js/jquery.apYoutubePlayer.min.js"></script>
<script type="text/javascript" src="js/jquery.apVimeoPlayer.min.js"></script>
<script type="text/javascript" src="js/jquery.videoGallery.min.js"></script>



3.video player code in BODY tag:

<!-- big play for video player toggle -->
<div class="player_bigPlay"><img src='media/data/video_icons/big_play.png' width='76' height='76' alt=''/></div>

<!-- darken area behind the video player -->
<div class="player_bg"></div>

<!-- video player -->
<div class="videoPlayer">

 <!-- media holders for youtube and vimeo -->
 <div class="youtubeWrapper"><div class="youtubeHolder"></div></div>
 <div class="vimeoHolder"></div>

 <!-- video holder for local video -->
 <div class="mediaHolder"></div>
 
 <!-- preview image for local video --> 
 <div class="mediaPreview"></div>
 
 <div class="playerControls">

      <div class="player_playControl"><img src='media/data/video_icons/play.png' width='12' height='14' alt=''/></div>
        
      <div class="player_progress">
          <!-- seekbar background -->
          <div class="progress_bg"></div>
          <div class="load_level"></div>
          <div class="progress_level"></div>
      </div>
     
      <div class="player_mediaTime">0:00 | 0:00</div>
      
      <div class="vplayer_volume"><img src='media/data/video_icons/volume_on.png' width='13' height='14' alt=''/></div>
      <div class="volume_seekbar">
         <!-- volume background -->
         <div class="volume_bg"></div>
         <div class="volume_level"></div>
      </div>
      
      <div class="player_fullscreen"><img src='media/data/video_icons/fullscreen_enter.png' width='12' height='12' alt=''/></div>
      
      <div class="player_volume_tooltip">
          <div class="player_volume_tooltip_value">0</div>
      </div>
      
      <div class="player_progress_tooltip">
          <div class="player_progress_tooltip_value">0:00 | 0:00</div>
      </div>
      
 </div>
 
 <!-- preloader for local video -->
 <div class="mediaPreloader"></div>
 
 <!-- big play for local video toggle -->
 <div class="bigPlay"><img src='media/data/video_icons/big_play.png' width='76' height='76' alt=''/></div>
 
 <!-- video player close -->
 <div class="player_close"><img src='media/data/video_icons/close.png' width='30' height='30' alt='player_close'/></div>
 
</div>



4.using this option in gallery settings to specify video is not used:

/* useVideo: true/false */
useVideo: false,



Using audio

Supported audio formats are mp3, aac, flac..

Audio playlists come in several formats: with HTML markup, from XML, auto-generated from the folder of mp3 files.



Playlist from HTML markup looks like this:

<ul id='playlist1'>
     <li class= "playlistItem" data-type='local' data-mp3Path="media/audio/1/Tim_McMorris_-_A_Bright_And_Hopeful_Future.mp3"><a class="playlistNonSelected" href='#'>Tim McMorris - A Bright And Hopeful Future</a></li>
     <li class= "playlistItem" data-type='local' data-mp3Path="media/audio/1/Tim_McMorris_-_Be_My_Valentine.mp3"><a class="playlistNonSelected" href='#'>Tim McMorris - Be My Valentine</a></li>
 </ul>



Playlist from XML looks like this:

<!-- xml playlist -->
<ul id='playlist1'>
    <li class= "playlistItem" data-type='xml' data-path='media/xml/playlist1.xml'/>
</ul>

Example of XML file are located in _deploy/media/xml directory. You will notice that the XML markup is exactly the same as the HTML markup!




Reading files from folder
Playlist auto-generated from the folder looks like this:

<ul id='playlist1'>
    <li class= "playlistItem" data-type='folder' data-path='media/audio/1/'/>
</ul>

You simply place a relative path to your folder (data-path) compared to where folder_parser.php file is located.





If you are not using audio in the gallery you can remove the following from the index page:
1. audio player css file:

<link rel="stylesheet" type="text/css" href="css/audioPlayer_tr.css" />

(it may be called slightly differently depending on the gallery layout)



2. audio related js files:

<script type="text/javascript" src="js/jquery.apPlaylistManager.min.js"></script>
<script type="text/javascript" src="js/jquery.apTextScroller.min.js"></script>
<script type="text/javascript" src="js/jquery.html5audio.min.js"></script>



3. audio settings:

/* AUDIO PLAYER SETTINGS */
var ap_settings = {
    /* playerHolder: dom elements which holds the whole player */
    playerHolder: '.audioPlayer',
    /* playlistHolder: dom elements which holds list of playlists */
    playlistHolder: '#playlist_list',
    /* activePlaylist: set active playlist that will be loaded on beginning. 
    Leave empty for none like this: activePlaylist: '' */
    activePlaylist: '#audio_playlist1',
    /* activeItem: active item to start with when playlist is loaded (0 = first, 1 = second, 2 = third... -1 = none) */
    activeItem: 0,

    /*defaultVolume: 0-1 (Irrelevant on ios mobile) */
    defaultVolume:0.5,
    /*autoPlay: true/false (false on mobile by default) */
    autoPlay:false,
    /*autoLoad: true/false (auto start sound load) */
    autoLoad:true,
    /*randomPlay: true/false */
    randomPlay:false,
    /*loopingOn: true/false (loop on the end of the playlist) */
    loopingOn:true,
    
    /* autoSetSongTitle: true/false. Auto set song title in 'player_mediaName'. */
    autoSetSongTitle: true,
    
    /* useSongNameScroll: true/false. Use song name scrolling. */
    useSongNameScroll: true,
    /* scrollSpeed: speed of the scroll (number higher than zero). */
    scrollSpeed: 1,
    /* scrollSeparator: String to append between scrolling song name. */
    scrollSeparator: ' *** ',
    
    /* buttonsUrl: url of the buttons for normal and rollover state */
    buttonsUrl: {prev: 'media/data/audio_icons/prev.png', prevOn: 'media/data/audio_icons/prev_on.png', 
                 next: 'media/data/audio_icons/next.png', nextOn: 'media/data/audio_icons/next_on.png', 
                 pause: 'media/data/audio_icons/pause.png', pauseOn: 'media/data/audio_icons/pause_on.png',
                 play: 'media/data/audio_icons/play.png', playOn: 'media/data/audio_icons/play_on.png',
                 volume: 'media/data/audio_icons/volume.png', volumeOn: 'media/data/audio_icons/volume_on.png', 
                 mute: 'media/data/audio_icons/mute.png', muteOn: 'media/data/audio_icons/mute_on.png'},
    /* useAlertMessaging: Alert error messages to user (true / false). */
    useAlertMessaging: true,
    /* autoOpenAudioPlayer: true / false */
    autoOpenAudioPlayer: true
};



4. audio player code in BODY tag:

<!-- toggle music player -->
<div class="music_toggle"><img src='media/data/audio_icons/music.png' width='30' height='30' alt='music_toggle'/></div>


<!-- audio player -->
<div class="audioPlayer">

 <div class="playerHolder">
     
      <div class="player_controls">
          <!-- previous -->
          <div class="controls_prev"><img src='media/data/audio_icons/prev.png' width='30' height='30' alt='controls_prev'/></div>
          <!-- next -->
          <div class="controls_next"><img src='media/data/audio_icons/next.png' width='30' height='30' alt='controls_next'/></div>
          <!-- pause/play -->
          <div class="controls_toggle"><img src='media/data/audio_icons/play.png' width='30' height='30' alt='controls_toggle'/></div>
          
          <!-- volume -->
          <div class="player_volume"><img src='media/data/audio_icons/volume.png' width='30' height='30' alt='player_volume'/></div>
          <div class="volume_seekbar">
             <div class="volume_bg"></div>
             <div class="volume_level"></div>
          </div>

      </div>
 
 </div>
 
 <!-- song name -->
 <div class="player_mediaName_Mask">
     <div class="player_mediaName">Artist Name - Artist Title</div>
 </div>
 
</div>


<!-- List of audio playlists -->
 <div id="playlist_list">
             
     <!-- local playlist -->
     <ul id='audio_playlist1'>
         <li class= "playlistItem" data-type='local' data-mp3Path="media/audio/1/Tim_McMorris_-_A_Bright_And_Hopeful_Future.mp3"          data-oggPath="media/audio/1/Tim_McMorris_-_A_Bright_And_Hopeful_Future.ogg"><a class="playlistNonSelected" href='#'>Tim McMorris - A Bright And Hopeful Future</a></li>
         <li class= "playlistItem" data-type='local' data-mp3Path="media/audio/1/Tim_McMorris_-_Be_My_Valentine.mp3"                      data-oggPath="media/audio/1/Tim_McMorris_-_Be_My_Valentine.ogg"><a class="playlistNonSelected" href='#'>Tim McMorris - Be My Valentine</a></li>
     </ul>
    
</div>



5. using this option in gallery settings to specify audio is not used:

/* useAudio: true/false */
useAudio: false,

Callbacks

There are currently following callbacks available: 

function multiGallerySetupDone(){
    /* called when component is ready to receive public function calls */
    //console.log('multiGallerySetupDone');
}
function beforeSlideChange(slideNum){
    //function called before slide change (plus slide number returned, counting starts from 0)
    //console.log('beforeSlideChange, slideNum = ', slideNum);
}
function afterSlideChange(slideNum){
    //function called after slide change (plus slide number returned, counting starts from 0)
    //console.log('afterSlideChange, slideNum = ', slideNum);
}

API methods

API methods available: 

<!-- public function calls -->
<div id='publicFunctions'>
    <p>PUBLIC METHODS</p><br/>
    <ul>
        <!-- toggle slideshow, (pass true (play), false (stop) as parameter, or none for simple toggle). -->
        <li><a href='#' onClick="gallery1.toggleSlideshow(); return false;">toggle slideshow</a></li>
        
        <!-- toggle playlist (open /close) -->
        <li><a href='#' onClick="gallery1.togglePlaylist(); return false;">toggle playlist</a></li>
        
        <!-- open next media -->
        <li><a href='#' onClick="gallery1.nextItem(); return false;">next media</a></li>
        
        <!-- open previous media -->
        <li><a href='#' onClick="gallery1.previousItem(); return false;">previous media</a></li>
        
        <!-- Open media, pass number (counting starts from 0), or data-address as string (for deeplink). -->
        <li><a href='#' onClick="gallery1.loadItem(2); return false;">Open media number 2</a></li>
        <li><a href='#' onClick="gallery1.loadItem('image5'); return false;">Open media 'image5'</a></li>
        
        <!-- Open new category, pass number (counting starts from 0), or data-address as string (for deeplink).
        This will open first image in category. -->
        <li><a href='#' onClick="gallery1.loadCategory(2); return false;">Open category number 2</a></li>
        <li><a href='#' onClick="gallery1.loadCategory('wellness_reveal'); return false;">Open category name 'wellness_reveal'</a></li>
    </ul>
 </div>



These methods are available after multiGallerySetupDone gets called: 

function multiGallerySetupDone(){
    /* called when component is ready to receive public function calls */
    //console.log('multiGallerySetupDone');
}



Troubleshooting

Self hosted audio mp3 doesnt play

If you have trouble playing audio on your server in some browsers, and you get an errors in developer console similar to these: 

HTTP "Content-Type" of "audio/mpeg" is not supported. Load of media resource ... failed.

This is a mime type problem. You need to add following lines in your .htaccess file on your server: 

AddType audio/mpeg .mp3

More details: http://voice.firefallpro.com/2012/03/html5-audio-video-mime-types.html


Autoplay

Autoplay is disabled since recent browser changes and requires user interaction with the page before (like a click or keypress) to start playback:

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes




Volume on mobile

Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript




Plugin does not work as expected

Send a message at http://codecanyon.net/user/Tean#contact with a link to your live page to illustrate the problem so we can have a look. Include details of your issue so we can quickly solve the problem.