Basic

A basic gallery with default configurationsm with 'spiral' shifting mode
  • components: [3, 1, 2]
  • itemShadow: '0px 10px 15px 5px #222'
  • shiftDistance: 600
  • itemDistance: 200
  • shiftMode:'spiral'
  • roundCorner: 10
  • viewAngleX: -12
  • viewAngleY: 0
  • easing: 'easeOutQuint'
  • categoryMenu: { horizontal:true }
  • duration:1000
Launch

Light Theme

A light theme with Media Viewer, 'spiralUp' shifting mode
  • useMouseDrag: true
  • components: [3, 1, 2]
  • itemShadow:'-4px 2px 4px #666'
  • shiftDistance: 600
  • itemDistance: 200
  • shiftMode: 'spiralUp'
  • roundCorner: 16
  • viewAngleX: -18
  • viewAngleY: 0
  • easing: 'easeOutQuint'
  • duration: 1000
  • categoryMenu:{ horizontal:true}
  • gal2d:{ itemShadow:'0px 5px 8px 2px #666'}
Launch

View Angle

Custom camera viewAngle, 'left' shifting mode
  • useMouseDrag: true
  • components: [3, 1, 2]
  • itemShadow:'0px 10px 15px 5px #222'
  • shiftDistance: 600
  • itemDistance: 200
  • shiftMode: 'left'
  • roundCorner: 10
  • viewAngleX :0
  • viewAngleY: -24
  • categoryMenu: {horizontal:true}
  • easing: 'easeOutQuint'
  • duration: 1000
Launch

Markup Item

Using markup directly as gallery items, with "useItemDrag" on you can move and drag items to the side
  • useItemDrag: true,
  • components: [3, 1, 2],
  • itemShadow: '0px 10px 15px 5px #222',
  • shiftDistance: 600,
  • itemDistance: 200,
  • refDistance: 4,
  • shiftMode: 'right',
  • viewAngleX: -12,
  • viewAngleY: 0,
  • easing: 'easeOutQuint',
  • duration: 1000
Launch

Markup item with card layout

A special card layout
  • useItemDrag: true,
  • openDuration: 800
  • useReflection: false
  • components: [3, 1, 2],
  • randomRotationZ: 8
  • itemShadow: '0px 2px 8px 3px #333',
  • shiftDistance: 600,
  • itemDistance: 20,
  • roundCorner: 10
  • viewAngleX: 14,
  • viewAngleY: 0,
  • categoryMenu: {horizontal:true}
  • easing: 'easeOutQuint',
  • duration: 1000
Launch

To Side

A shifting mode with items moving side to side
  • useMouseDrag: true,
  • components: [3, 1, 2]
  • itemShadow: '0px 10px 15px 5px #222'
  • shiftDistance: 600
  • itemDistance: 200
  • shiftMode: 'toSide'
  • roundCorner: 10
  • viewAngleX: -12
  • viewAngleY: 0
  • categoryMenu:{ horizontal:true li }
  • easing: 'easeOutQuint'
  • duration:1000
Launch

Flip

A shifting mode with items being flipped up and down
  • useMouseDrag: true
  • components: [3, 1, 2]
  • itemShadow: '0px 10px 15px 5px #222'
  • shiftDistance: 600
  • itemDistance: 200
  • shiftMode: 'flip'
  • roundCorner: 10
  • viewAngleX: -30
  • viewAngleY: 0
  • categoryMenu:{horizontal:true}
  • easing: 'easeOutQuint'
  • duration: 1000
Launch

Mix

Example of mixed size gallery items
  • normalHeight: 400
  • useMouseDrag: true
  • autoSorted: true
  • components: [3, 1, 2]
  • itemShadow: '0px 10px 15px 5px #222'
  • shiftDistance: 400
  • itemDistance: 250
  • shiftMode: 'reveal'
  • roundCorner: 4
  • viewAngleX: -18
  • viewAngleY: 0
  • easing: 'easeOutQuint'
  • duration: 1000
Launch

Audio

An audio gallery with 'top' shifting mode
  • useMouseDrag: true
  • components: [3, 1, 2]
  • itemShadow: '0px 10px 15px 5px #222'
  • shiftDistance: 600
  • itemDistance: 200
  • shiftMode: 'top'
  • roundCorner: 10
  • viewAngleX: -16
  • viewAngleY: 0
  • categoryMenu: {horizontal:true}
  • easing: 'easeOutQuint'
  • duration: 1000
Launch

Video

A video gallery with 'topBottom' shifting mode
  • useMouseDrag: true
  • components: [3, 1, 2]
  • itemShadow: '0px 10px 15px 5px #222'
  • shiftDistance: 600
  • itemDistance: 200
  • shiftMode: 'topBottom'
  • roundCorner: 10
  • viewAngleX: -16
  • viewAngleY: 0
  • categoryMenu: {horizontal:true}
  • easing: 'easeOutQuint'
  • duration: 1000
Launch

Generic Content

A gallery with generic content and 'leftRight' shifting mode
  • useMouseDrag: true
  • components: [3, 1, 2]
  • itemShadow: '0px 10px 15px 5px #222'
  • shiftDistance: 600
  • itemDistance: 200
  • shiftMode: 'leftRight'
  • roundCorner: 10
  • viewAngleX: -12
  • viewAngleY: 0
  • categoryMenu: {horizontal:true}
  • easing: 'easeOutQuint'
  • duration: 1000
  • mediaviewer:{...}
Launch

Autoplay

An autoplaying gallery with 'revealReverse' shifting mode
  • useMouseDrag: true
  • useAutoplay: true
  • components: [3, 1, 2]
  • itemShadow: '0px 10px 15px 5px #222'
  • shiftDistance: 400
  • itemDistance: 200
  • shiftMode: 'revealReverse'
  • roundCorner: 10
  • viewAngleX: -12
  • viewAngleY: 0
  • categoryMenu: {horizontal:true}
  • easing: 'easeOutQuint'
  • duration: 1000
Launch

Full Width

A full width gallery with mouseCam set to true, 'toSideReverse' shifting mode
  • useMouseDrag: true
  • components: [3, 1, 2]
  • itemShadow: '0px 10px 15px 5px #222'
  • shiftDistance: 600
  • itemDistance: 200
  • mouseCam: true
  • shiftMode: 'toSideReverse'
  • roundCorner: 10
  • viewAngleX: -12
  • viewAngleY: 0
  • easing: 'easeOutQuint'
  • duration: 1000
Launch

2D Mode

The builtin 2D gallery mode, it can be used as fallback for old browsers or as main gallery
  • force2d: true
Launch