File: /home1/bloga741/public_html/alamoweb/viapp/publishslider.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Viapp</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
body {
background-color: #000 !important;
}
#publishslider .slider {
height: 100%;
width: 100%;
}
#loaderImage, #closerImage {
position: absolute;
top: 5px;
right: 5px;
}
#loaderImage {
z-index: 1;
}
#closerImage {
z-index: 2;
cursor: pointer;
display: none;
}
.visible {
visibility: visible !important;
display: block !important;
}
.hidden {
visibility: hidden !important;
display: none !important;
}
.ion-record {
color: #FFF;
}
</style>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/facebookConnectPlugin.js"></script>
<script src="js/publishslider/app.js"></script>
<script src="js/publishslider/controllers.js"></script>
<script src="js/size.functions.js"></script>
<script src="js/storage.js"></script>
<script src="js/parse-1.4.0.min.js"></script>
<script src="js/parse.js"></script>
</head>
<body id="publishslider" ng-app="publishslider" ng-controller="PublishSliderCtrl">
<div id="fb-root"></div>
<div id="publishslider-slider">
<div id="loaderImage"></div>
<img id="closerImage" src="img/close.png" ng-click="goStraight()">
<ion-slide-box>
<ion-slide ng-repeat="publisher in publishers">
<div>
<img class="publisherImg" src="{{publisher.img}}" ng-click="openPublisher({{publisher}})">
</div>
</ion-slide>
</ion-slide-box>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
expandElementByIdToScreenSize('publishslider-slider');
expandElementByClassNameToScreenSize('slider');
expandElementByClassNameToScreenSize('publisherImg');
});
/**
* LOADER IMAGE
*/
var cSpeed=5;
var cWidth=30;
var cHeight=30;
var cTotalFrames=8;
var cFrameWidth=30;
var cImageSrc='img/loading3.png';
var cImageTimeout=false;
var cIndex=0;
var cXpos=0;
var cPreloaderTimeout=false;
var SECONDS_BETWEEN_FRAMES=0;
function startAnimation(){
document.getElementById('loaderImage').style.backgroundImage='url('+cImageSrc+')';
document.getElementById('loaderImage').style.width=cWidth+'px';
document.getElementById('loaderImage').style.height=cHeight+'px';
//FPS = Math.round(100/(maxSpeed+2-speed));
FPS = Math.round(100/cSpeed);
SECONDS_BETWEEN_FRAMES = 1 / FPS;
cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES/1000);
}
function continueAnimation(){
cXpos += cFrameWidth;
//increase the index so we know which frame of our animation we are currently on
cIndex += 1;
//if our cIndex is higher than our total number of frames, we're at the end and should restart
if (cIndex >= cTotalFrames) {
cXpos =0;
cIndex=0;
}
if(document.getElementById('loaderImage'))
document.getElementById('loaderImage').style.backgroundPosition=(-cXpos)+'px 0';
cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES*1000);
}
function stopAnimation(){//stops animation
clearTimeout(cPreloaderTimeout);
cPreloaderTimeout=false;
}
function imageLoader(s, fun)//Pre-loads the sprites image
{
clearTimeout(cImageTimeout);
cImageTimeout=0;
genImage = new Image();
genImage.onload=function (){cImageTimeout=setTimeout(fun, 0)};
genImage.onerror=new Function('alert(\'Could not load the image\')');
genImage.src=s;
}
//The following code starts the animation
new imageLoader(cImageSrc, 'startAnimation()');
setTimeout(function () {
document.getElementById("loaderImage").className = 'invisible';
document.getElementById("closerImage").className = 'visible';
}, 5000);
</script>
</body>
</html>