BMW mobs South Africa

BMW mobs South Africa

by July 31, 2014

In one of the cooler promo clips we’ve seen in a while, BMW has organised a ‘Drift Mob’ to lay rubber all over downtown Cape Town. The video launches the brand’s new ‘BMW Stories’ online communication platform.

There’s no real plot to speak of, but there is some very impressive driving, with a quintet of M235is engaging in carefully choreographed manoeuvres. Such high-risk sideways action required some serious driving talent, with professional stunt driver Rhys Millen joined by drift champions Samuel Hubinette, Conrad Grunewald and Daijiro Yoshihara and stunt driver Rich Rutherford.

BMW quote Millen as saying “It’s amazingly simple to do a clean drift in this car”, but UK automotive website Pistonheads reports it wasn’t quite that easy. Being prototype vehicles, the cars weren’t fitted with the optional M Performance limited-slip differential, which made holding the extended slides difficult.

When playing with tyre pressures failed to produce the desired effect, the cars were taken to a local garage and the open differentials welded up. Yep, when it comes to controllable oversteer antics, it’s difficult to beat a locker.

As well as the main clip, BMW also uploaded a behind the scenes video and a short ‘How to Drift’ tutorial with Rhys Millen, which are arguably more entertaining than the main shoot. Still, well done to BMW for promoting the art of skidding to the world.

VIDEOS: HOW TO DRIFT | BEHIND THE SCENES

(function () {
/**
* Initializes a controller handles a gallery as well as its fullscreen version
*/
var MotoringGalleryController = function () {
var fullscreenActive = false;

var gallery = new MotoringGallery(
$(‘.motoring-gallery’),
‘smallGallery’,
true,
false,
{
onFullscreenClick: function () {
openFullscreen();
},
onShroudClick: function () {

},
onEscPress: function () {

}
});

var fullscreenGallery;

var openFullscreen = function () {
fullscreenGallery = new MotoringGallery(
$(‘.motoring-gallery-full’),
‘fullGallery’,
false,
true,
{
onFullscreenClick: function () {
closeFullscreen();
},
onShroudClick: function () {
closeFullscreen();
},
onEscPress: function () {
closeFullscreen();
}
},
gallery.GalleryPos);

$(‘.motoring-gallery-full’).show();

fullscreenGallery.Init();
};

var closeFullscreen = function () {
if (fullscreenGallery) {
fullscreenGallery.Destroy();
fullscreenGallery = null;
}

$(‘.motoring-gallery-full’).hide();
};

this.Init = function () {
$(‘body’).append($(‘.motoring-gallery-full’).detach()); // put at the end of document so that the shroud displays correctly

gallery.Init();
}

return this;
};

/**
* Initializes a gallery
* @param {object} $ctx the parent jquery object to use as a context for all selectors
* @param {string} ns the namespace to use for events and that
* @param {boolean} push should this gallery push its state into the url/history
* @param {object} events an object containing the following functions: onFullscreenClick, onShroudClick, onEscPress
*/
var MotoringGallery = function ($ctx, ns, push, bigImages, events, startPos) {
var self = this;

this.GalleryPos = startPos || 0;

var $wrapper = $(‘#gallery_caption’, $ctx),
$innerWrapper = $(‘ul’, $ctx),
$contentWrapper = $(‘#gallery_caption .content-wrapper’, $ctx),
$caption = $(‘#gallery_caption .caption’, $ctx),
$showLabel = $(‘#gallery_caption .show-label-js’, $ctx),
$hideLabel = $(‘#gallery_caption .hide-label-js’, $ctx),
$captionControls = $(‘#gallery_caption .controls’, $ctx),
$captionToggle = $(‘#gallery_caption .toggle-caption’, $ctx),
$counterCurrent = $(‘#gallery_counter_current’, $ctx),
$counterTotal = $(‘#gallery_counter_total’, $ctx),
$image = $(‘#gallery_image’, $ctx),
$next = $(‘.next’, $ctx),
$prev = $(‘.prev’, $ctx),
$loader = $(‘.loader-slide’, $ctx),
$fullscreenToggle = $(‘.toggle-fullscreen’, $ctx);

var eventNamespace = ns ? ‘.’ + ns : ”;

var galleryState = “galleryOpen”;
var galleryPreviousImage, galleryTitle;
var galleryCompleted = false;

var galleries = [{“Image”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/658/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23890/webimage112108_c.jpg”,”FullscreenImage”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/1422/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23890/webimage112108_c.jpg”,”ImageAltText”:”BMW M235i drift South Africa video”,”ImageCaption”:””,”OriginalImage”:”http://d3lp4xedbqa8a5.cloudfront.net/s3/digital-cougar-assets/motoring-momo/2014/07/31/23890/webimage112108_c.jpg”,”UpdateDate”:”2014-07-31T10:16:58″,”AssetNo”:1,”PageTitle”:”BMW mobs South Africa”,”UrlName”:””},{“Image”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/658/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23891/webimage112106_c.jpg”,”FullscreenImage”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/1422/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23891/webimage112106_c.jpg”,”ImageAltText”:”BMW M235i drift South Africa video”,”ImageCaption”:””,”OriginalImage”:”http://d3lp4xedbqa8a5.cloudfront.net/s3/digital-cougar-assets/motoring-momo/2014/07/31/23891/webimage112106_c.jpg”,”UpdateDate”:”2014-07-31T10:16:40″,”AssetNo”:2,”PageTitle”:”BMW mobs South Africa | M235i Image 2 | MOTOR”,”UrlName”:”m235i-image-2″},{“Image”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/658/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23892/webimage112107_c.jpg”,”FullscreenImage”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/1422/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23892/webimage112107_c.jpg”,”ImageAltText”:”BMW M235i drift South Africa video”,”ImageCaption”:””,”OriginalImage”:”http://d3lp4xedbqa8a5.cloudfront.net/s3/digital-cougar-assets/motoring-momo/2014/07/31/23892/webimage112107_c.jpg”,”UpdateDate”:”2014-07-31T10:16:42″,”AssetNo”:3,”PageTitle”:”BMW mobs South Africa | M235i Image 3 | MOTOR”,”UrlName”:”m235i-image-3″},{“Image”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/658/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23893/webimage112110_c.jpg”,”FullscreenImage”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/1422/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23893/webimage112110_c.jpg”,”ImageAltText”:”BMW M235i drift South Africa video”,”ImageCaption”:””,”OriginalImage”:”http://d3lp4xedbqa8a5.cloudfront.net/s3/digital-cougar-assets/motoring-momo/2014/07/31/23893/webimage112110_c.jpg”,”UpdateDate”:”2014-07-31T10:16:43″,”AssetNo”:4,”PageTitle”:”BMW mobs South Africa | M235i Image 4 | MOTOR”,”UrlName”:”m235i-image-4″},{“Image”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/658/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23894/webimage112111_c.jpg”,”FullscreenImage”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/1422/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23894/webimage112111_c.jpg”,”ImageAltText”:”BMW M235i drift South Africa video”,”ImageCaption”:””,”OriginalImage”:”http://d3lp4xedbqa8a5.cloudfront.net/s3/digital-cougar-assets/motoring-momo/2014/07/31/23894/webimage112111_c.jpg”,”UpdateDate”:”2014-07-31T10:16:44″,”AssetNo”:5,”PageTitle”:”BMW mobs South Africa | M235i Image 5 | MOTOR”,”UrlName”:”m235i-image-5″},{“Image”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/658/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23895/webimage112112_c.jpg”,”FullscreenImage”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/1422/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23895/webimage112112_c.jpg”,”ImageAltText”:”BMW M235i drift South Africa video”,”ImageCaption”:””,”OriginalImage”:”http://d3lp4xedbqa8a5.cloudfront.net/s3/digital-cougar-assets/motoring-momo/2014/07/31/23895/webimage112112_c.jpg”,”UpdateDate”:”2014-07-31T10:16:45″,”AssetNo”:6,”PageTitle”:”BMW mobs South Africa | M235i Image 6 | MOTOR”,”UrlName”:”m235i-image-6″},{“Image”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/658/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23896/webimage112113_c.jpg”,”FullscreenImage”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/1422/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23896/webimage112113_c.jpg”,”ImageAltText”:”BMW M235i drift South Africa video”,”ImageCaption”:””,”OriginalImage”:”http://d3lp4xedbqa8a5.cloudfront.net/s3/digital-cougar-assets/motoring-momo/2014/07/31/23896/webimage112113_c.jpg”,”UpdateDate”:”2014-07-31T10:16:46″,”AssetNo”:7,”PageTitle”:”BMW mobs South Africa | M235i Image 7 | MOTOR”,”UrlName”:”m235i-image-7″},{“Image”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/658/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23897/webimage112114_c.jpg”,”FullscreenImage”:”http://d3lp4xedbqa8a5.cloudfront.net/imagegen/max/1422/-/s3/digital-cougar-assets/motoring-momo/2014/07/31/23897/webimage112114_c.jpg”,”ImageAltText”:”BMW M235i drift South Africa video”,”ImageCaption”:””,”OriginalImage”:”http://d3lp4xedbqa8a5.cloudfront.net/s3/digital-cougar-assets/motoring-momo/2014/07/31/23897/webimage112114_c.jpg”,”UpdateDate”:”2014-07-31T10:16:47″,”AssetNo”:8,”PageTitle”:”BMW mobs South Africa | M235i Image 8 | MOTOR”,”UrlName”:”m235i-image-8″}];

// Set older browser mode
var hashOnly = (typeof history.pushState === “undefined”);

if (push) {
// Retrieve location on back/forward btn click
$(window).on(‘popstate’ + eventNamespace, function(event) {
if (history.state != null) {
self.GalleryPos = history.state.id;
_setGalleryImage();
_setGalleryNextPrevDisplay();
}
});

// Retrieve location on back/forward btn click (older browsers)
if (hashOnly) {
$(window).on(‘hashchange’ + eventNamespace, function() {
_getHashLocation();
});
}
}

/**
* PRIVATE HELPERS
*/

function _getHashLocation() {
if (!push) { return; }

// Check for hash in Url, if present show matching gallery image and adjust links
if (location.hash != “”) {
var hashImg = location.hash.replace(‘#’, ”);
var newGalleryPos = 0;

for (var i = 0; i 0) {
location.href = document.URL.substring(0, itemIndex) + ‘#’ + document.URL.substring(itemIndex);
}
}
}

function _preloadImages() {
if (self.GalleryPos < galleries.length – 1) {
var nextImg = new Image();
nextImg.src = bigImages ?
galleries[self.GalleryPos + 1].FullscreenImage :
galleries[self.GalleryPos + 1].Image;
}

if (self.GalleryPos != 0) {
var prevImg = new Image();
prevImg.src = bigImages ?
galleries[self.GalleryPos – 1].FullscreenImage :
galleries[self.GalleryPos – 1].Image;
}
}

// Set gallery prev/next button visibility
function _setGalleryNextPrevDisplay() {
if (self.GalleryPos = galleries.length – 1) {
$next.hide();
} else {
$next.show();
}
}

function _setHistory() {
if (!push) { return; }

var galItem = galleries[self.GalleryPos];

// Set new Url
if (hashOnly) {
// Older browsers use #imageName. Set a default hash value for first image to avoid skip to top of page
location.hash = (galItem.UrlName == “”) ? “image-0″ : galItem.UrlName;
} else {
// Use replaceState for modern browsers (so that the back button goes to the previous page, not the previous image)
history.replaceState({ id: self.GalleryPos }, galItem.NodeName, ‘http://www.motormag.com.au/news/1407/bmw-mobs-south-africa/’ + galItem.UrlName);
}
}

function _trackGalleryInteraction() {
if (galleries != null && galleries.length > 0) {
var galItem = galleries[self.GalleryPos];

if (window.dataLayer) {
window.dataLayer.push({
‘event’: galleryState,
‘eventInfo’: {
‘galleryName’: galleryTitle,
‘prevImage’: galleryPreviousImage,
‘currImage’: bigImages ?
galItem.FullscreenImage :
galItem.Image,
‘currImageNo’: self.GalleryPos + 1,
‘totalImages’: galleries.length
}
});
}
}
}

function _setGalleryState(currentState) {
galleryState = currentState;
_trackGalleryInteraction();
}

function _setGalleryImage() {
var galItem = galleries[self.GalleryPos];

// set image to nothing to fix the ‘no load event’ browser bug: https://code.google.com/p/chromium/issues/detail?id=7731
$image.attr(‘src’, ”);

// Set gallery image, counter, total, alt and caption
$image.attr(‘src’, bigImages ?
galItem.FullscreenImage :
galItem.Image).attr(‘alt’, galItem.ImageAltText);

document.title = galItem.PageTitle;

self.UpdateCaption(galItem.ImageCaption);

$counterCurrent.text(self.GalleryPos + 1);
$counterTotal.text(galleries.length);

if (self.GalleryPos >= galleries.length – 1 && !galleryCompleted) {
galleryCompleted = true;
_setGalleryState(“galleryComplete”);
}
_setGalleryState(“galleryImageChange”);
}

function _presizeImage(imgSrc) {
if (!bigImages) { return; }

var i = new Image;
i.src = imgSrc;

var iw = i.width;
var ih = i.height;

var sw = $(window).width();
var sh = $(window).height();

var w;
var h;

var m = .8; // margin modifier

// do sizes based on the bigger side
if (iw > ih) {
if (iw > sw) {
w = sw * m;
} else {
w = iw;
}

h = w * (ih / iw);
} else {
if (ih > sh) {
h = sh * m;
} else {
h = ih;
}

w = h * (iw / ih);
}

// correct when window is an odd shape i.e. letterboxed so the h doesnt fit
if (h > sh * m) {
var r = w / h;

h = sh * m;
w = h * r;
}

if (w > sw * m) {
var r = h / w;

w = sw * m;
h = w * r;
}

$image.css({
‘width’: w + ‘px’,
‘height’: h + ‘px’
});

$innerWrapper.css({
‘top’: ((sh – h) * .5) + ‘px’
});
}

function _resizeImage(visOnly) {
if ((visOnly &&
$image.is(“:visible”)) ||
!visOnly) {

_presizeImage($image.attr(‘src’));
}
}

function _startLoading() {
if (!$loader.length) { return; }

$image.hide();

_positionLoader();
$loader.show();
}

function _stopLoading() {
$loader.hide();
$image.show();
}

function _positionLoader() {
$innerWrapper.css({
‘top’: (($(window).height() – $loader.height()) * .5) + ‘px’
});
}

function _hideCaption() {
$contentWrapper.slideUp({
done: function () {
$contentWrapper.css({ ‘overflow-y’: ” });
}
});

$hideLabel.hide();
$showLabel.show();
}

function _showCaption() {
_resizeCaption();

$contentWrapper.slideDown({
done: function () {
$contentWrapper.css({ ‘overflow-y’: ‘auto’ });
}
});

$showLabel.hide();
$hideLabel.show();
}

function _hideCaptionControl() {
$captionToggle.hide();
}

function _showCaptionControl() {
$captionToggle.show();
}

function _resizeCaption(overflow) {
var hPad = $contentWrapper.outerHeight() – $contentWrapper.height();
var hCtr = $captionControls.outerHeight(true);
var hMax = $image.innerHeight();

$contentWrapper.css({ ‘max-height’: (hMax – (hPad + hCtr)) + ‘px’ });

if (overflow) {
$contentWrapper.css({ ‘overflow-y’: ‘auto’ });
}
}

/**
* PUBLIC FUNCTIONS
*/

/**
* Moves the current gallery image a given number of frames
* @param {number} dir the number of frames to move, can be negative
*/
this.GalleryMove = function (dir) {
// Check if gallery CAN be moved
if ((dir 0 && self.GalleryPos == galleries.length – 1)) return;
// save current image as previous before changing with a different one
galleryPreviousImage = bigImages ?
galleries[self.GalleryPos].FullscreenImage :
galleries[self.GalleryPos].Image;
self.GalleryPos += dir;

_setGalleryImage();
_setGalleryNextPrevDisplay();
_preloadImages();
_setHistory();
}

/**
* Changes the text of the gallery caption to the supplied value and
* hides/shows the toggle button depending on whether the caption exists or not
* @param {string} caption the caption text to replace the current caption with
*/
this.UpdateCaption = function (caption) {
$caption.text(caption);

if (caption) {
_resizeCaption(true);
_showCaptionControl();
} else {
$wrapper.removeClass(‘open’);
_hideCaption();
_hideCaptionControl();
}
}

/**
* Toggles the displaying of the caption
*/
this.ToggleCaption = function () {
var open = !$wrapper.hasClass(‘open’);

$wrapper.toggleClass(‘open’);

if (open) {
_showCaption();
} else {
_hideCaption();
}
}

this.Init = function () {
self.GalleryMove(0); // correcting for fullscreen gallery that hasnt pushed state

_startLoading();

// Bind gallery control to gallery next/prev buttons
function onNextPrevClick(event) {
_startLoading();

(event.preventDefault) ? event.preventDefault() : event.returnValue = false;
self.GalleryMove(($(this).attr(‘class’) == ‘prev’) ? -1 : 1);
}

$next.on(‘click’ + eventNamespace, onNextPrevClick);
$prev.on(‘click’ + eventNamespace, onNextPrevClick);

// Initialise prev/nxt buttons and preload on first page load
if (galleries != null && galleries.length > 0) {
_preloadImages();

// initialize previous image history
galleryPreviousImage = “”;
galleryTitle = “BMW mobs South Africa”;
_setGalleryState(“galleryOpen”);
}

$captionToggle.on(‘click’ + eventNamespace, function() {
self.ToggleCaption();
});

$fullscreenToggle.on(‘click’ + eventNamespace, function () {
events.onFullscreenClick();
});

$ctx.on(‘click’ + eventNamespace, function (e) {
if ($(e.target).is($ctx)) { // only close if the shroud is clicked
events.onShroudClick();
}
});

$image.on(‘load’ + eventNamespace, function () {
_resizeImage();
_stopLoading();
});

$(window).on(‘keyup’ + eventNamespace, function (e) {
if (e.which === 27) {
events.onEscPress();
}
});

$(window).on(‘resize’ + eventNamespace, function (e) {
_resizeImage(true);
});

if (push) {
// Check for # location (older browsers)
_getHashLocation();

// If pushState available, update current history item with galleryPos
if (!hashOnly) {
var galItem = galleries[self.GalleryPos];
history.replaceState({ id: self.GalleryPos }, galItem.NodeName, ‘http://www.motormag.com.au/news/1407/bmw-mobs-south-africa/’ + galItem.UrlName);
}
}
};

this.Destroy = function () {
$(window).off(eventNamespace);
$next.off(eventNamespace);
$prev.off(eventNamespace);
$captionToggle.off(eventNamespace);
$fullscreenToggle.off(eventNamespace);
$ctx.off(eventNamespace);
$image.off(eventNamespace);
};

return this;

};

var galleryController = new MotoringGalleryController();

galleryController.Init();
})();

BMW