For (vanilla JS) learning purposes.

coure.js

define(['underscore'], function() {

  var root = window;

  function Item (item) {
    this.type = item.type;
    this.source = item.source;
    this.width = item.width;
    this.height = item.height;
    this.container = item.container; // A (left), B (right)
    this.el = null;
  }

  Item.prototype.render = function (element) {
    if (this.type === undefined || this.source === undefined) {
      return false;
    }
    
    var el = document.createElement(element || 'div'),
      item;

    switch (this.type) {
      case 'img':
        item = document.createElement('img');
        console.log(item.complete);
        item.setAttribute('src', this.source);
      break;
      case 'youtube':
        item = document.createElement('iframe');
        item.setAttribute('width', this.width);
        item.setAttribute('height', this.height);
        item.setAttribute('src', this.source + "?rel=0");
        item.setAttribute('frameborder', 0);
      break;
      }

    el.appendChild(item);

    // 'el', amb DOMElement llest per inserir al DOM,
    // el posem dins el property 'el' del objecte Item
    this.el = el;

    // return Item object for chainability
    return this;
  };

  Item.prototype.prepare = function () {
    this.el.setAttribute('class', 'waiting');

    coure.setSizeAndPosition(this);

    // return Item object for chainability
    return this;
  };

  // omplim aquest objecte amb Items
  var coure = {
    stack: [],
    shuffled: {
      A: [],
      B: []
    },
    activeItem: 0,
    totalItems: 0,
    baseValues: {}
  };

  coure.setBaseValues = function () {
    var itemContainer = document.querySelector('.container');
    this.baseValues = {
      width: itemContainer.clientWidth,
      height: itemContainer.clientHeight,
      orientation: (itemContainer.clientWidth > itemContainer.clientHeight) ? 'h' : 'v'
    };
    console.log("baseValues updated " + this.baseValues.width + " / " + this.baseValues.height);
  };

  coure.setSizeAndPosition = function (item) {
    // set size and absolute position of element acording to container
    
    var constrain = 0.75,
      maxW = Math.ceil(coure.baseValues.width * constrain),
      maxH = Math.ceil(coure.baseValues.height * constrain),
      refHeight;

    //what about square pictures?
    if (item.width > item.height || item.width === item.height) {
      // horizontal image
      
      // set width of container to resize image/embed
      item.el.style.width = maxW + 'px';

      // get height of container to position vertically in the middle
      refHeight = item.height / item.width * maxW;
    } else {
      // vertical image
      
      // set width of container to resize image/embed
      item.el.style.width = item.width / item.height * maxH + 'px';

      // get height of container to position vertically in the middle
      refHeight = maxH;
    }

    // place vertically in the middle
    item.el.style.top = (coure.baseValues.height / 2) - (refHeight / 2) + 'px';

    // place hidden horizontally
    if (item.container === "A") {
      item.el.style.right = item.width * -1 + 'px';
    } else if (item.container === "B") {
      item.el.style.left = item.width * -1 + 'px';
    }
  };

  coure.updateSizeAndPosition = function () {
    //
  };

  coure.swap = function (event) {
    
    //console.log(this); //for learning, this changes depending on the caller

    if (event === "auto" && coure.activeItem > 1) {
      // stop delayed automatic execution if click happened already
      return;
    }

    coure.activeItem++;
    if (coure.activeItem === coure.totalItems) {
      coure.activeItem = 0;
    }
    console.log(coure.activeItem + " of " + coure.totalItems);

    var A = {
      waiting: document.querySelector('.a .waiting'),
      active: document.querySelector('.a .active')
    };

    var B = {
      waiting: document.querySelector('.b .waiting'),
      active: document.querySelector('.b .active')
    };

    // set .active to .remove
    if ( ! _.isNull(A.active)) {
      A.active.setAttribute('class', 'remove');
      A.active.style.right = '100px';
    }

    if ( ! _.isNull(B.active)) {
      B.active.setAttribute('class', 'remove');
      B.active.style.left = '100px';
    }

    // turn .waiting into .active
    if ( ! _.isNull(A.waiting)) {
      A.waiting.setAttribute('class', 'active');
      A.waiting.style.right = 0;
    }

    if ( ! _.isNull(B.waiting)) {
      B.waiting.setAttribute('class', 'active');
      B.waiting.style.left = 0;
    }

    // append new as .waiting
    var newA = coure.shuffled.A[coure.activeItem].render().prepare().el;
    document.querySelector('.a .container').appendChild(newA);

    var newB = coure.shuffled.B[coure.activeItem].render().prepare().el;
    document.querySelector('.b .container').appendChild(newB);

    // remove .remove items from DOM??
    // need to wait for animation to stop
    _.delay(function() {
      //
    }, 1000);
  };
  
  var items = root.items;
  var path = "https://s3-eu-west-1.amazonaws.com/19-testing/coure/";

  for (var i = 0; i < items.length; i++) {
    var item = items[i];
    coure.stack.push(new Item({
      type: "img",
      source: path + item.src,
      width: item.w,
      height: item.h 
    }));  
  }

  // coure.stack.push(new Item({type: 'img', source: "/images/001.jpg", width: 500, height: 333}));
  // coure.stack.push(new Item({type: 'img', source: "/images/6.jpg", width: 665, height: 500}));
  // coure.stack.push(new Item({type: 'img', source: "/images/alys.jpg", width: 1050, height: 694}));
  // coure.stack.push(new Item({type: 'img', source: "/images/nene.jpg", width: 612, height: 612}));
  // coure.stack.push(new Item({type: 'img', source: "/images/P1020893.jpg", width: 800, height: 600}));
  // coure.stack.push(new Item({type: 'img', source: "/images/scotts_place.jpg", width: 645, height: 645}));
  // coure.stack.push(new Item({type: 'img', source: "/images/r2_1280.jpeg", width: 779, height: 515}));
  // coure.stack.push(new Item({type: 'img', source: "/images/lu8zqcA3nl1r5hqlpo1_1280.jpeg", width: 763, height: 573}));
  // coure.stack.push(new Item({type: 'img', source: "/images/funfetti.jpg", width: 500, height: 334}));
  // coure.stack.push(new Item({type: 'img', source: "/images/m0yfw7ruu71qfpcnio1_500.jpeg", width: 500, height: 750}));
  // coure.stack.push(new Item({type: 'img', source: "/images/m8stuyaqU21r5hqlpo1_1280.jpeg", width: 776, height: 513}));
  // coure.stack.push(new Item({type: 'img', source: "/images/P1030212.jpg", width: 480, height: 360}));
  // coure.stack.push(new Item({type: 'img', source: "/images/limon.png", width: 600, height: 576}));
  // coure.stack.push(new Item({type: 'img', source: "/images/la_gran3.jpg", width: 1200, height: 893}));
  // coure.stack.push(new Item({type: 'img', source: "/images/DJ17_spread.jpg", width: 1145, height: 708}));
  // coure.stack.push(new Item({type: 'img', source: "/images/arian_03.jpg", width: 720, height: 720}));
  // coure.stack.push(new Item({type: 'img', source: "/images/302847227773091288_19942078.jpg", width: 612, height: 612}));
  // coure.stack.push(new Item({type: 'img', source: "/images/m9aweooS2t1r5hqlpo1_1280.jpeg", width: 1242, height: 826}));
  // coure.stack.push(new Item({type: 'img', source: "/images/m9q5m3TpqP1r5hqlpo1_1280.jpeg", width: 772, height: 511}));
  // coure.stack.push(new Item({type: 'img', source: "/images/m12z9nrbZ81r5hqlpo1_1280.jpeg", width: 772, height: 512}));
  // coure.stack.push(new Item({type: 'img', source: "/images/m650ngyWR31r5hqlpo1_1280.jpeg", width: 767, height: 507}));
  // coure.stack.push(new Item({type: 'img', source: "/images/maghb03gI11r5hqlpo1_1280.jpeg", width: 773, height: 514}));
  
  coure.init = function () {

    // omplim arrays A i B dintre 'coure' amb AJAX en una funció apart
    // ...
    var shuffle = _.shuffle(this.stack);

    // cut in half, add .container = 'A' to first half, and .container = 'B' to second half
    _.each(shuffle, function(item, i) {
      if (i % 2 === 0) {
        item.container = "A";
        this.shuffled.A.push(item);
      } else {
        item.container = "B";
        this.shuffled.B.push(item);
      }
    }, coure);

    this.setBaseValues();

    this.totalItems = _.size(this.stack) / 2;

    // bind window.resize a setBaseValues amb debounce
    var updateBaseValues = _.debounce(this.setBaseValues, 300);
    root.addEventListener('resize', updateBaseValues, false);
    root.addEventListener('click', this.swap, false);

    this.swap();
    _.delay(this.swap, 5000, 'auto');
  };
  
  return coure;
});