Code Snippets

Customize shifting mode

var pq3d = new PhotoQueue(el, {
   shiftMode:'spiralUp',
   shiftingDistance:400,
   itemDistance:300
});

2D Mode

var pq3d = new PhotoQueue(el, {
  useFullscreen:false,
  force2d:true,
  gal2d:{
    maxScale:0.75,
    distance:300
  }
});

Enable Mouse Dragging

var pq3d = new PhotoQueue(el, {
  useMouseDrag:true
});

Enable Mouse Camera

var pq3d = new PhotoQueue(el, {
  mouseCam:true
});

Enable Auto play

var pq3d = new PhotoQueue(el, {
 useAutoplay:true
});

Enable Looping

var pq3d = new PhotoQueue(el, {
 loop:true
});

Change general container size

var pq3d = new PhotoQueue(el, {
 mediaviewer:{
   containerWidth:500,
   containerHeight:300
 }
});

Custom AJAX processing

var pq3d = new PhotoQueue(el, {
 mediaviewer:{
   ajaxProcessor:function(con, req) {
     con.innerHTML = req.responseText;
   }
 }
});

Full Width

<style>
   .rs-pq3d {
      width:100%;
   }
</style>

Add event handlers

pq3d.addEventListener('target', function(e) {
  console.log(e.detail);
});

pq3d.addEventListener('cload', function(e) {
  console.log(e.detail);
});

pq3d.addEventListener('cloadcomplete', function(e) {
  console.log(e.detail);
});

Create distributions

grunt dist

Build example files

grunt examples

Compile pug templates

grunt pug

Compile SASS

grunt compass

Watch files for changes

grunt watch