#LiveYourLife - Cast Showcase

Enter Contest

More Info...

Purpose

The #LiveYourLife Cast Showcase provides customers an opportunity to "meet" and learn more about the cast of AEO models.

Background

AEO organized a contest that invited the public to submit themselves for consideration as cast models. To showcase the contestants, AEO sought a dynamic and interactive application to connect customers with potential models.

Overview

Dynamic Views

This application delivers a distinctive experience by randomizing the position and size of content. Organized in rows, each section introduces a new cast member and includes quotes, imagery, video, and social media connections.

Shoppable

Expandable image elements in this application can be linked to product collections, providing a new way to merchandise.

Media Controls

Ensuring the best user experience, precise control over the videos was crucial. Each video will play and pause according to the guide's positioning but will start initially muted. Users will have the option to unmute if desired.

Technical Details

Data Object

{
  "modelName": "Shay",
  "bitly": "http://on.ae.com/Pm6GDL",
  "fbTwitter": "and follow @shaymitch ",
  "fbName": "actress Shay",
  "twitterCopy" : "Actress Shay (@shaymitch)",
  "startPosition": "left",
  "row": [
    {
      "blockWidth": 25
    },
    {
      "blockWidth": 75,
      "mediaType": "scalable",
      "bundleId": "bundleCatId=cat5930102&productId=0393_9260_600"
    },
    {
      "blockWidth": 100
    },
    {
      "blockWidth": 25,
      "mediaType": "scalable",
      "bundleId": "bundleCatId=cat5900248",
      "social": true
    },
    {
      "blockWidth": 75,
      "mediaType": "vid",
      "youTubeID": "8KcZDolqBLw"
    },
    {
      "blockWidth": 50,
      "mediaType": "bio",
      "link1": "/web/guides/w_jeanguide.jsp?catId=cat5900036&icid=AE:LiveYourLife:ShayBio:FindYourFit",
      "link1Text": "Find Your Fit",
      "link2": "/web/sweepstakes/index.jsp?icid=AE:LiveYourLife:ShayBio:EnterContest",
      "link2Text": "Enter Contest"
    }
  ]
}

Block Model

/* Defines a block model with default values set. */
var BlockModel = Backbone.Model.extend({
  "defaults": {
    "blockWidth": 50,
    "mediaType": "img",
    "social": false,
    "youTubeID": "",
    "htmlContent": "",
    "link1": "",
    "link1Text": "",
    "link2": "",
    "link2Text": "",
    "bundleId": ""
  }
});

Media Control

/* Initializing a mediaElementPlayer object for any videos within this block */
thisView.options.video = thisVideo.mediaelementplayer({
  "videoWidth": "100%",
  "videoHeight": "100%",
  "loop": true,
  "enableAutosize": false,
  "pluginPath": "images/",
  "flashName": 'flashmediaelement.swf',
  "enableKeyboard": false
});
if (thisVideo[0]) {
  /* Forcing video to mute, because not all browsers support mute in video tags */
  getVideo(thisVideo[0]).setMuted(true);
}

Swipe Control

$(row.el).bind("touchstart", function( evt ) {

  //body.css({"overflow": "hidden"});

  if (event.changedTouches.length == 1) {
    isSwiping = true;
    startPosX = lastPosX = event.changedTouches[0].pageX;

    liveYourLifeDiv.bind("touchmove", function( evt ) {
      if (isSwiping) {
        lastPosX = event.changedTouches[0].pageX;
      } else {
        clearSwipe();
      }
    });

    liveYourLifeDiv.bind("touchend", function( evt ) {
      if (isSwiping) {
        if ((startPosX - lastPosX) > SWIPE_SENSITIVITY) {
          //doWork();
          row.slideRow(row.nextLeft);
        } else if ((lastPosX - startPosX) > SWIPE_SENSITIVITY) {
          //doWork();
          row.slideRow(row.prevLeft);
        }
      }
      clearSwipe();
    });

    liveYourLifeDiv.bind("touchcancel", clearSwipe);
  }
});