Skip to content

Instantly share code, notes, and snippets.

@adardesign
Forked from anonymous/gist:eb8c234380b0f0ecc9de
Created November 12, 2014 18:37
Show Gist options
  • Save adardesign/8f41e1434fbd54f3b619 to your computer and use it in GitHub Desktop.
Save adardesign/8f41e1434fbd54f3b619 to your computer and use it in GitHub Desktop.
//media API
adrma.media = {
defaults: {
videoDimenstions: {
width: 510,
height: 450
}
},
init: function(arg, options) {
this.options = $.extend({}, this.defaults, options);
// maybe only if called via popup
this.imageThumbs = $(".mediaPopup .thumbsContainer img");
this.largeImage = $(".mediaPopup .productImage");
// remove "mediaPopup .productDemos .jsLink" once updated on live
this.videoList = $(".mediaPopup .productDemos .jsLink, .mediaPopup .demoVideoLink").on("triggerVideo", function(e) {
if (adrma.media.mode != "video") {
//adrma.log("even direct video passes here")
adrma.media.initVideo("initializedAsImages", e);
} else {
adrma.media.videoManager(e);
}
});
this.videoPlaceholder = $("#videoPlaceHolder");
if (arg === "video") {
adrma.media.mode = "video";
adrma.media.initVideo("firstVideo");
} else {
adrma.media.mode = "image";
// pass in the arg as a index nullmber
adrma.media.initImages(arg);
}
},
initVideo: function(arg, e) {
adrma.media.mode = "video";
this.videoPlaceholder.fadeIn(300);
this.largeImage.fadeOut(300);
this.imageThumbs.off("mouseover").on("click", function(e) {
adrma.media.changeImage(e);
adrma.media.initImages();
}).removeClass("active");
var swfObjectLoadedEvent = function() {
adrma.media.swfObject.loaded = true;
// in case of init with images, it inits video and handles (excutes) click as cb?
if (arg === "firstVideo") {
adrma.media.videoList.eq(0).trigger("triggerVideo");
adrma.media.videoList.on("click", function() {
$(this).trigger("triggerVideo");
});
}
if (arg === "initializedAsImages") {
if (!e) {
return;
}
$(e.target).trigger("triggerVideo");
}
};
//rely on caching and do allow calling "adrma.fetchData", and let it return cache and excute the callback
if (this.swfObject.loaded) {
return;
} else {
adrma.fetchData({
url: "/col/js/plugins/swfobject.js",
dataType: "script",
cacheURL: true,
callback: function() {
swfObjectLoadedEvent();
}
});
}
},
initImages: function(arg) {
this.imageController();
adrma.media.videoPlaceholder.fadeOut(300);
adrma.media.largeImage.fadeIn(300);
if (typeof arg != undefined) {
adrma.media.imageThumbs.eq(arg).trigger("mouseover");
}
this.videoList.on("click", function() {
$(this).trigger("triggerVideo");
});
},
imageController: function() {
adrma.media.mode = "image";
adrma.media.imageThumbs.off("click").on("mouseover", adrma.media.changeImage);
},
changeImage: function(e) {
var thumb = $(e.target).addClass("active"),
largeImage = adrma.media.largeImage,
tumbSrc = thumb.attr("src"),
largeSrc = tumbSrc.replace(/small/, "large");
largeImage.attr("src", largeSrc);
thumb.siblings().removeClass("active");
},
swfObject: "",
videoManager: function(e) {
//adrma.log("video manager fired", arguments);
var jThis = $(e.target),
videoType = jThis.attr("data-videoType"),
videoID = jThis.attr("data-videoID"),
videoPlaceholder = "defualt";
switch (videoType.toLowerCase()) {
case "youtube":
this.youtube(videoID);
break;
case "vimeo":
this.vimeo(videoID);
break;
case "sellpoint":
e.preventDefault();
this.otherVideos(jThis, "sellpoint");
break;
default:
e.preventDefault();
this.otherVideos(jThis);
}
return false;
},
otherVideos: function(ele, name) {
this.removeOtherVideo(true); // new other vide comes..
this.videoPlaceholder.addClass("otherVideoMode");
this.videoPlaceholder.find(".objectContainer").hide();
var otherVideo = $("<a>", {
"class": name ? name + " otherVideo" : "otherVideo",
"onclick": ele.attr("onclick")
});
adrma.noop = $(".ie7").length && (function() {
otherVideo.on("click", function() {
var rawOnclick = ele.attr("onclick").replace("return", "");
eval(rawOnclick);
});
})();
var previewSrc = (function() {
var firstThumb = $(".mediaControl").find(".thumbsContainer img").eq(0);
if (!firstThumb.length) {}
return (firstThumb.attr("src").replace(/small/img, "large"));
})();
otherVideo.html("<img src='" + previewSrc + "'>");
this.videoPlaceholder.append(otherVideo);
//otherVideo.click();
//
},
removeOtherVideo: function(forOtherVideo) {
//adrma.log("removeOtherVideo");
var otherVideo = $(".otherVideo");
if (otherVideo.length < 1) {
return false;
}
if (forOtherVideo) {
otherVideo.remove();
//otherVideo.removeAttr("class onclick").off("click");
return false;
}
otherVideo.fadeOut(300, function() {
otherVideo.siblings(".objectContainer").fadeIn(200);
otherVideo.remove();
});
},
youtube: function(id) {
this.removeOtherVideo();
var url = "https://www.youtube.com/v/" + id + "?version=3&f=user_uploads",
params = {
allowScriptAccess: "always"
},
atts = {
id: "videoObj"
};
swfobject.embedSWF(url + "&enablejsapi=1&autoplay=1&theme=light&modestbranding=1&color=white&fs=1&hd=1&autohide=1", "videoObj", this.options.videoDimenstions.width, this.options.videoDimenstions.height, "8", null, null, params, atts);
},
vimeo: function(id) {
this.removeOtherVideo();
var flashvars = {
'clip_id': id,
'server': 'vimeo.com',
'show_title': 0,
'show_byline': 0,
'show_portrait': 0,
'fullscreen': 0,
'autoplay': 1,
'js_api': 1,
'js_onload': 'vimeo_player_loaded'
};
var parObj = {
'swliveconnect': true,
'fullscreen': 1,
'allowscriptaccess': 'always',
'allowfullscreen': true
};
var attObj = {};
swfobject.embedSWF("http://www.vimeo.com/moogaloop.swf", "videoObj", this.options.videoDimenstions.width, this.options.videoDimenstions.height, "9.0.28", '', flashvars, parObj, attObj);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment