As you will soon see I'm not the best jQuery developer out there (I'm a designer). At best, I make a prototype barely work. That said, I envisioned this Persona-slider which is just like any other jQuery header sliders out there, but slightly different.
See it in action here.
Each persona has its own story consisting of:
- Name
- Quote
- Some paragraphs
- 2 videos: a walk-in & walk-out sequence
I tried to hack this together but it's very quirky as you can see (certainly without any preloaders).
The switching of text is fairly simple, but I can't get the videos to work in a seamless fashion. When the user clicks a name, the persona is supposed to walk in, sit down in the chair and pause. It's not until the user clicks another persona, then the current persona walks out and the new walks in. Like if they're all sits down in to the same chair and tell their stories.
To complicate things further, it should be on autoplay by default (around 5 sec for each slide/persona). Also, you shouldn't be able to click a persona while a current one is playing already.
So obviously js/_personas.js needs a heavy clean-up and re-thinking to make it simpler, I use a lot of unnecessary variables etc, I believe.
(function() {
// Text for each Persona
$('.personas--menu--item--01').click(function() {
$('.selected').removeClass('selected');
replaceText('Benny', 'Här hjälper dom mig också med att få ordning i min ekonomi.', 'Innan jag kom hit satt jag på ett rättpsykiatriskt sjukhus. Jag är fortfarande dömd men jag fick möjlighet att komma hit till Hillringsberg på öppenvård. Det är bra för här är vi tillsammans och har målet att jobba så att jag blir fri från mina papper. Jag går i terapi och gör mindfulness för att jag ska funka bra rent mentalt, för det kan bli kämpigt med drogsug och sånt.', 'benny');
});
$('.personas--menu--item--02').click(function() {
$('.selected').removeClass('selected');
replaceText('Göran', 'Här har jag umgänge och jag är trygg.', 'Om jag inte vore här skulle jag vara ett ensamt vrak med begränsad ekonomi. Injektion o mediciner kostar. Förr var jag alkoholist, en självmordsbenägen sådan. En gång fann de mig halvdöd, 31.5 grader hade jag i kroppstemperatur efter att ha tagit för många Stilinoct.', 'goran');
});
$('.personas--menu--item--03').click(function() {
$('.selected').removeClass('selected');
replaceText('Cecilia', 'Personalen anpassar sig väldigt mycket efter rådande omständigeter.', 'Behandlingshemmet har en egen psykiatriker vilket har varit till stort stöd för bägge mina brukare. Dessutom satsar de på att hjälpa och stödja brukarnas ekonomiska problematik vilket är superbra men ändå ovanligt. Deras rehabilitering är ett individuellt anpassad och dom jobbar med både KBT och Mindfulness.', 'cecilia');
});
$('.personas--menu--item--04').click(function() {
$('.selected').removeClass('selected');
replaceText('Gustaf', 'Han var som ett vrak, en borttappad och lusfattig kriminell på permis.', 'När min bror kom till Hillringsberg efter att ha suttit många år på rättspsyk, hade vi ingen kontakt. Jag minns senaste gången jag träffade honom när han satt på rättspsyk. Han var som ett vrak, en borttappad och lusfattig kriminell på permiss. Han var tungt medicinerad och svår att få kontakt med.', 'gustaf');
});
PlayIn('benny');
function replaceText (name, h1, p, who) {
event.preventDefault();
$('.personas--content--title').fadeOut('slow');
$('.personas--content--name').fadeOut('slow');
$('.personas--content--text').fadeOut('slow');
var current = $("#video1").attr("class");
var mydiv = $("#player");
var myvideo = $("<video id='video1' width='880' class='"+ who +"'><source src='http://688812344.r.cdn77.net/videos/"+ current +"_walkout.mp4' type='video/mp4'><source src='http://688812344.r.cdn77.net/videos/"+ current +"_walkout.ogg' type='video/ogg'>Your browser does not support HTML5 video.</video>");
mydiv.html(myvideo);
var myVideo = document.getElementById("video1");
myVideo.load();
myVideo.play();
myVideo.onended = function(e) {
PlayIn(who);
$('.personas--content--name').fadeIn('slow').html(name);
$('.personas--content--title').fadeIn('slow').html(h1);
$('.personas--content--text').fadeIn('slow').html(p);
$('.personas--main--content--btn--text').html(name +'s historia');
}
}
function PlayIn(newperson) {
var mydiv = $("#player");
var myvideo = $("<video id='video1' width='880' preload='auto' class='"+ newperson +"'><source src='http://688812344.r.cdn77.net/videos/"+ newperson +"_walkin.mp4' type='video/mp4'><source src='http://688812344.r.cdn77.net/videos/"+ newperson +"_walkin.ogg' type='video/ogg'>Your browser does not support HTML5 video.</video>");
mydiv.html(myvideo);
var myVideo = document.getElementById("video1");
myVideo.load();
myVideo.play();
}
})();