Basic

A basic gallery with mostly default configurations
  • useMouseDrag:true
  • components:[0, 1, 2]
  • itemDistance:400
  • shearAngle:45
  • roundCorner:10
  • viewAngleX:20
  • categoryMenu:{horizontal:true}
  • easing:'easeOutQuint'
  • duration:1000
Launch

Light Theme

A light theme setup with MediaViewer
  • useMouseDrag:true
  • components:[0, 1, 2]
  • itemDistance:400
  • shearAngle:45
  • roundCorner:10
  • viewAngleX:20
  • categoryMenu:{horizontal:true}
  • easing:'easeOutQuint'
  • duration:1000
  • gal2d: { itemShadow:'0px 5px 8px 2px #666'}
Launch

Markup Item

Using markup as gallery item
  • useMouseDrag:true
  • components:[0, 1, 2]
  • itemDistance:600
  • roundCorner:10
  • viewAngleX:20
  • categoryMenu:{horizontal:true}
  • easing:'easeOutQuint'
Launch

View Angle 0

A gallery with viewAngleX = 0
  • useMouseDrag:true
  • components:[0, 1, 2]
  • itemDistance:400
  • shearAngle:45
  • roundCorner:10
  • viewAngleX:0
  • categoryMenu:{horizontal:true}
  • easing:'easeOutQuint'
  • duration:1000
Launch

Audio

A sample audio gallery
  • useMouseDrag:true
  • components:[0, 1, 2]
  • itemDistance:400
  • roundCorner:10
  • viewAngleX:20
  • easing:'easeOutQuint'
  • duration:1000
  • categoryMenu:{horizontal:true}
Launch

Video

A sample video gallery
  • useMouseDrag:true
  • components:[0, 1, 2]
  • itemDistance:400
  • roundCorner:10
  • viewAngleX:20
  • easing:'easeOutQuint'
  • duration:1000
  • categoryMenu:{horizontal:true}
Launch

Generic Content

Gallery with generic content including ajax, inline html, embedded iframe
  • useMouseDrag:true
  • components:[0, 1, 2]
  • itemDistance:400
  • roundCorner:10
  • viewAngleX:20
  • easing:'easeOutQuint'
  • duration:1000
  • categoryMenu:{horizontal:true}
  • mediaviewer:{ajaxProcessor:function(con, req){..}}
Launch

Autoplay

Gallery with auto playing feature
  • useMouseDrag:true
  • components:[0, 1, 2]
  • itemDistance:400
  • roundCorner:10
  • viewAngleX:20
  • easing:'easeOutQuint'
  • duration:1000
  • useAutoplay:true
Launch

Open external links

Open an external link
  • useMouseDrag:true
  • components:[0, 1, 2]
  • itemDistance:400
  • shearAngle:45
  • roundCorner:10
  • viewAngleX:20
  • categoryMenu:{horizontal:true}
  • easing:'easeOutQuint'
  • duration:1000
Launch

Full Width

Full width example
  • useMouseDrag:true
  • components:[0, 1, 2]
  • itemDistance:400
  • roundCorner:10
  • viewAngleX:20
  • easing:'easeOutQuint'
  • duration:1000
  • categoryMenu:{horizontal:true}
Launch

2D Mode

The builtin 2D gallery mode, mainly used as fallback for unsupported browser
  • force2d:true
  • useMouseDrag:true
  • borderStyle:'6px solid white'
  • itemShadow:'-5px -10px 10px #111'
  • easing:'easeOutQuint'
  • roundCorner:20
Launch