Changing text based on clicking multiple links

Ok i have a page with multiple videos on it.
each of these videos load in a single large player near the top. Thumbnail images below this large player window are links which activate each individual video.

There is text below the large player window and above the thumbnail images. I want this text to change for each video. How can i accomplish this?

this screenshot shows what im talking about:

Is it possible to post a link to the page so I can better see what you mean?

You can do it using jquery or other javascripting

Here is the page

One of the videos auto plays so i suggest not having your volume up very high.

Hi there,

Shouldn’t be too difficult.
It would help if you could give the <p> tag which contains the title you want to swap out a unique ID.
Is that possible?

i have given it a unique id.

Cool, I’ve got to duck out for a bit now, but I’ll have a look at it when I get back.

So, back with you.
My code assumes that each of the table cells holding the thumbs has the following format:

<table class="demogrid"
    <span class="demosmall">
      name 1
      name 2

When a thumbnail is clicked, the code grabs name 1 and displays it as the main caption for the player.

Insert this at the end of your page before the closing </body> tag:

  jQuery(document).ready(function() {
    jQuery(".demogrid td a").click(function(){
      var caption = (jQuery(this).nextAll('.demosmall').html().split('<br>')[0]);
      jQuery("#playertitle .font2").text(caption);


Thank you for your help. I am terrible with javascript and jquery.
Its working great, except its showing the line break tag (<br>) between name 1 and name 2.
so its displaying as

Callbox LLC<br>“BURN”

Glad it’s kinda working.
For each video you have two lines (for example line 1: Callbox LLC and line 2: “BURN”).
What would you like to display as a caption for the player - line 1, line 2 or both?

I would like to display both. Preferably like the original caption was: Callbox LLC in the font2 style, and on the line below that “BURN” in a different style (smaller font, not bolded)

if this is possible without too much difficulty

I have set up a separate style for the second line. so line 1 (Callbox LLC) 's style would be font2 and line 2 (“BURN”) 's style is playersubtitle

Hi there,

Try this:

  jQuery(document).ready(function() {
    jQuery(".demogrid td a").click(function(){
      var caption = (jQuery(this).nextAll('.demosmall').html().split('<br>'));
      var part1 = caption[0];
      var part2 = caption[1];
      jQuery("#playertitle").html('<span class="font2">' + part1 + '</span><br /><br /><span class="playersubtitle">' + part2);

Also, make sure that it’s .split('<br>') not .split('&lt;br /&gt;')

I copied and pasted the code exactly and now its not working at all.

Hang on, I’ll have a look.

Are you testing locally?
It would help if you could put a link to a page I can have a look at.

No, im testing on the live page. The site is built with Wordpress if that helps anything.
The Page

But where be the code?
I just looked at the source of the page you provided and couldn’t see it.
An in-page search for “jQuery(”#playertitle")" yielded no results.

oh. sorry. thats presently in a separate file.

No probs, but could you put it back at the end of the file, please and see if it works then.
The reason for this is I have no idea when your script switches to noConflict mode (probably the reason it’s not working now) and having the at the end of the file will make debugging easier.
Also, if it doesn’t work when it’s placed at the end of the file, please leave it there so I can have a look.