Curse of the Golden Flower iPad Example

Launch the example in a new window.

Curse of the Golden Flower Example

Mark-up

<div id="container"> <div class="header"><img src="images/page_header_img.png" alt="Curse of the Golden Flower" /></div> <div id="playerContainer"> <!-- The following div is the container for our media player --> <div id="movie"></div> <!-- The following div is where the playlist will render --> <div id="playlist"> <div id="playlist-container"> <div id="playlist-objs"></div> </div> </div> </div> </div>

JavaScript

<script type="text/javascript"> // This is the group in the Control Panel that contains media to embed var groupId = "00000000-0000-0000-0000-000000000000"; // This is the ID of the first item to show var mediaId = "00000000-0000-0000-0000-000000000000"; // This is the ID of the player that has been skinned for this demo var playerId = "00000000-0000-0000-0000-000000000000"; // Load the group information Vio.Groups.LoadP(groupId, function () { // Wait for the DOM to be ready Vio.OnReady(function () { // Create a new PlayerTarget. The id of the div will be used to identify the target. var target = new Vio.Player.NewTarget(document.getElementById("playerContainer")); // Define layout for media cards target.MediaCardTemplate = "<div class=\"vio-media-thumbnail\"><img src=\"<%=thumbnail%>\" alt=\"<%=title%>\" /></div><div class=\"vio-media-info\">< div class=\"vio-media-info-inner\"><div class=\"vio-media-title\"><%=title%></div> <div class=\"vio-media-desc\"><%=description%></div></div></div>"; // Set the options for the target target.Options.embedPlayer.groupId = groupId; target.Options.embedPlayer.mediaId = mediaId; target.Options.embedPlayer.playerId = playerId; target.Options.embedPlayer.playerQuality = "High"; // default quality target.Options.embedPlayer.playerWidth = 500; target.Options.embedPlayer.playerHeight = 262; // Set the skin options for the player target.Options.player = { bg_colour: "0x333333", contrast_colour: "0xff0008", theme_colour: "0x333333", icon_colour: "0xffffff", fullscreen_enabled: true }; // Set the Html5 skin URL target.Options.skin = { html5_url: "http://beta.player.vioapi.viodev.com/skins/Html5/Vio.Player.Skin.js" }; // Slightly larger than normal thumbnails target.Options.playlist.thumbnail_width = 141; target.Options.playlist.thumbnail_height = 600; target.Options.playlist.desc_cutoff = 130; // Set the location of each element we're using target.PlayerElement = document.getElementById("movie"); target.PlaylistElement = document.getElementById("playlist-objs"); // Fire the events that render the pieces Vio.Event.Trigger("RenderPlayer", target); Vio.Event.Trigger("RenderPlaylist", target); // Create paging icons for the playlist var mediaBases = Vio.Media.length; target.PlaylistElement.style.width = (mediaBases * 147) + "px"; target.PlaylistElement.style.left = 0; var numPages = Math.ceil(mediaBases / 6); var currentPage = 0; var pages = document.createElement("div"); pages.className = "page-list"; pages.style.width = numPages * 8 + "px"; for (i = 1; i <= numPages; i++) { var page = document.createElement("div"); page.className = "page-icon" page.setAttribute("id", "page-" + i); var pageIcon = document.createElement("img"); if (i != 1) { pageIcon.className = "inactive"; } pageIcon.setAttribute("src", "images/page_dot.png"); pageIcon.setAttribute("alt", i); page.appendChild(pageIcon); pages.appendChild(page); // Bind click event on a page icon to change the page of the playlist Vio.Event.Bind(page, "click", function (evt) { var currentPageString = evt.currentTarget.getAttribute("id").split("-"); if (currentPageString.length > 0) { currentPage = parseInt(currentPageString[1]) - 1; console.log(currentPage); var pageWidth = 882; document.getElementById("playlist-objs").style.left = (currentPage * pageWidth * -1) + "px"; var pageIcons = document.getElementsByClassName("page-icon"); for (var i = 0; i < pageIcons.length; i++) { pageIcons[i].childNodes[0].className = (i != currentPage) ? "inactive" : ""; } } }); } target.PlaylistElement.parentNode.parentNode.appendChild(pages); //Bind to the custom "swipe" event on the playlist element Vio.Event.Bind(target.PlaylistElement, "swipe", function (evt) { // Change the page based on the direction of the swipe currentPage = (evt.value.direction == "left") ? Math.max((currentPage - 1), 0) : Math.min((currentPage + 1), numPages); var pageWidth = 882; document.getElementById("playlist-objs").style.left = (currentPage * pageWidth * -1) + "px"; var pageIcons = document.getElementsByClassName("page-icon"); for (var i = 0; i < pageIcons.length; i++) { pageIcons[i].childNodes[0].className = (i != currentPage) ? "inactive" : ""; } }, true); }); });</script>

Page Styles

body { font-family: Arial, Helvetica, Sans-Serif; margin: 0; padding: 0; background: black url(../images/body_bg.jpg) no-repeat top center; } #container { width: 990px; margin: 0 auto; } #container .header { width: 374px; margin: 28px auto 90px auto; } #movie { width: 500px; height: 262px; padding: 2px; background: rgba(255,255,255,0.34); margin: 0 auto; box-shadow: 0 0 49px rgba(0, 0, 0, 0.9); -moz-box-shadow: 0 0 49px rgba(0, 0, 0, 0.9); -webkit-box-shadow: 0 0 49px rgba(0, 0, 0, 0.9); } #playlist { background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,1) 50%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(50%,rgba(0,0,0,1))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,1) 50%); background: -o-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,1) 50%); background: -ms-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,1) 50%); background: linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,1) 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#000000',GradientType=0 ); font-family: Arial, Helvetica, Sans-Serif; padding: 19px 50px 19px 50px; } #playlist .page-list { margin: 0 auto; } #playlist .page-icon { width: 4px; margin: 2px; float: left; } #playlist .page-icon img.inactive { opacity: 0.4; } #playlist-container { width: 882px; height: 180px; overflow: hidden; } #playlist-objs { height: 164px; position: relative; -webkit-transition-property: all; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; } #playlist .vio-media-card { width: 141px; padding: 6px 0 0 6px; overflow: hidden; float: left; position: relative; font-size: 10px; color: White; } #playlist now-playing { background: rgba(0,0,0,0.5); } #playlist .vio-media-card a { display: block; } #playlist .vio-media-card a img { border: 0; } #playlist .vio-media-card img { height: 66px; width: 141px; } #playlist .vio-media-card .thumb-shadow { position: absolute; top: 88px; z-index: 1; } #playlist vio-.media-card .thumb-shadow img { -moz-transform: rotate(180deg); } #playlist .vio-media-card dl { margin: 1px 0 0 0; padding: 14px 6px 6px 6px; position: relative; z-index: 2; } #playlist .vio-media-card .vio-media-title { color: #ff3737; font-weight: bold; text-decoration: none; } #playlist .vio-media-card dd { margin: 0; font-size: 8px; } .clear { font-size: 1px; line-height: 0; clear: both; }