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:NameQuoteSome paragraphs2 videos: a walk-in & walk-out sequenceI 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', 'Hr hjlper dom mig ocks med att f ordning i min ekonomi.', 'Innan jag kom hit satt jag p ett rttpsykiatriskt sjukhus. Jag r fortfarande dmd men jag fick mjlighet att komma hit till Hillringsberg p ppenvrd. Det r bra fr hr r vi tillsammans och har mlet att jobba s att jag blir fri frn mina papper. Jag gr i terapi och gr mindfulness fr att jag ska funka bra rent mentalt, fr det kan bli kmpigt med drogsug och snt.', 'benny');  });  $('.personas--menu--item--02').click(function() {    $('.selected').removeClass('selected');    replaceText('Gran', 'Hr har jag umgnge och jag r trygg.', 'Om jag inte vore hr skulle jag vara ett ensamt vrak med begrnsad ekonomi. Injektion o mediciner kostar. Frr var jag alkoholist, en sjlvmordsbengen sdan. En gng fann de mig halvdd, 31.5 grader hade jag i kroppstemperatur efter att ha tagit fr mnga Stilinoct.', 'goran');  });  $('.personas--menu--item--03').click(function() {    $('.selected').removeClass('selected');    replaceText('Cecilia', 'Personalen anpassar sig vldigt mycket efter rdande omstndigeter.', 'Behandlingshemmet har en egen psykiatriker vilket har varit till stort std fr bgge mina brukare. Dessutom satsar de p att hjlpa och stdja brukarnas ekonomiska problematik vilket r superbra men nd ovanligt. Deras rehabilitering r ett individuellt anpassad och dom jobbar med bde 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.', 'Nr min bror kom till Hillringsberg efter att ha suttit mnga r p rttspsyk, hade vi ingen kontakt. Jag minns senaste gngen jag trffade honom nr han satt p rttspsyk. Han var som ett vrak, en borttappad och lusfattig kriminell p permiss. Han var tungt medicinerad och svr 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();  }})();
jQuery Persona slider
javascript;jquery
I am not too clear on what you are asking for exactly, but here are some suggestions that I hope will help you out.I would suggest trying to make the code more generic.  Instead of a function for each link, make one click event function apply to all links.  You could then have the name or id as part of the link by either making it an attribute or a class.  Then inside the click event handler, get that name/id and pass it to a new function.  Pseudo code example:$('.any-link-with-class').click(function() {   var id = $(this).attr('persona-id');  // custom attribute you make or something   var previousId = getCurrentId();  // either store in a local var or get from a control   updatePersona(id, previousId);});I would also suggest storing all the details in a file or other variable so you can load those dynamically and get the details to display by the name/id.  You call the clear selected in each function, better to do this in one place, and update the text fields at same time.  More pseudo code:function updatePersona(id, previousId) {   playWalkOutVideo(previousId);  // show video of them exiting    updateSelected(id);  // remove selected class and apply to new person   updateText(id);   playWalkInVideo(id);  // pass in id to know which video to play}function updateText(id) {   var persona = getPersonaDetails(id);  // either load from file or array object you make   $('.title').html(persona.Name);   // etc.}If you don't want the text to appear until they finish walking in for the video, you can do a setTimeout call to delay the text appearing until the video finishes (5 seconds = 5000 milliseconds which the function call uses).  You will probably at least want to add a setTimeout call before you play the next video.Edit based on comment:One way to implement the getCurrentId is to create a hidden input field like this on the page:<input type=text id=currentId style=display: none; />You can then set the value when you change the current person like this:$(#currentId).text(id);  // if .text doesn't work, try .html(id)You can then get the id in a similar way:var id = $(#currentId).text();You can also use hidden input types and other means to hold values on a page, this is just one way to do it.  People can view the source code, so it isn't secure, but it is fine for holding variables or data you want to use on the same page.