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
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'}
Markup Item
Using markup as gallery item
- useMouseDrag:true
- components:[0, 1, 2]
- itemDistance:600
- roundCorner:10
- viewAngleX:20
- categoryMenu:{horizontal:true}
- easing:'easeOutQuint'
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
Audio
A sample audio gallery
- useMouseDrag:true
- components:[0, 1, 2]
- itemDistance:400
- roundCorner:10
- viewAngleX:20
- easing:'easeOutQuint'
- duration:1000
- categoryMenu:{horizontal:true}
Video
A sample video gallery
- useMouseDrag:true
- components:[0, 1, 2]
- itemDistance:400
- roundCorner:10
- viewAngleX:20
- easing:'easeOutQuint'
- duration:1000
- categoryMenu:{horizontal:true}
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){..}}
Autoplay
Gallery with auto playing feature
- useMouseDrag:true
- components:[0, 1, 2]
- itemDistance:400
- roundCorner:10
- viewAngleX:20
- easing:'easeOutQuint'
- duration:1000
- useAutoplay:true
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
Full Width
Full width example
- useMouseDrag:true
- components:[0, 1, 2]
- itemDistance:400
- roundCorner:10
- viewAngleX:20
- easing:'easeOutQuint'
- duration:1000
- categoryMenu:{horizontal:true}
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