Vimeo Gallery With Jquery - Almost There

Question

I have a video gallery, using Vimeo, where I have a main player at the top, title, date, description underneath that, with a thumbnail list of other videos at the bottom. I have it working where you click the thumbnail and it updates the url in the main player. The only thing left is to update the title, date and description. Here is what I have so far.

top video, title, date and description html:

<iframe src="//player.vimeo.com/video/{series_weeks:seriesWkVidId}?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933" id="video-iframe" width="700" height="394" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<h2 id="wkTitle">{video_title}</h2>
<p id="wkDate" class="date">Date: {series_weeks:seriesWkDate format="%m/%d/%Y"}</p>
<p id="wkDescription">{video_description}</p>

The thumbnail section:

<a href="#" title="{video_title} - {series_weeks:seriesWkDate format="%m/%d/%Y"}" class="videoThumbnail video-thumbnail" rel="//player.vimeo.com/video/{series_weeks:seriesWkVidId}?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933">
<img src="{video_thumbnail}" alt="{video_title} - {series_weeks:seriesWkDate format="%m/%d/%Y"}" class="img-responsive" />
<span class="playButton"></span>
</a>

The jQuery:

$(function() {
$('.video-thumbnail').click(function(e) {
    $('#video-iframe').get(0).src = this.getAttribute('rel');;
});

});

Could someone give me a hand? Here is the reference page: http://discoverycolorado.dreamhosters.com/series/get-off-your-donkey

You will see that the videos will change when you click the thumbnail, but I also need it to change the title and description.

Thanks

Answer 1

Your HTML currently looks like this:

<a href="#" title="{video_title} - {series_weeks:seriesWkDate format=" %m/%d/%Y "}" class="videoThumbnail video-thumbnail" rel="//player.vimeo.com/video/{series_weeks:seriesWkVidId}?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933">
    <img src="{video_thumbnail}" alt="{video_title} - {series_weeks:seriesWkDate format=" %m/%d/%Y "}" class="img-responsive" /><span class="playButton"></span>
</a>

However, as it seems that you're already hard coding certain parameters for each video in the a element, so you could add data attributes to hold the title, date, and description of the video:

<a data-title="{video_title}" data-date="{series_weeks:seriesWkDate format=" %m/%d/%Y "}" data-description="{video_description}" href="#" title="{video_title} - {series_weeks:seriesWkDate format=" %m/%d/%Y "}" class="videoThumbnail video-thumbnail" rel="//player.vimeo.com/video/{series_weeks:seriesWkVidId}?title=0&amp;byline=0&amp;portrait=0&amp;color=ff9933">
    <img src="{video_thumbnail}" alt="{video_title} - {series_weeks:seriesWkDate format=" %m/%d/%Y "}" class="img-responsive" /><span class="playButton"></span>
</a>

Basically, you use data-title, data-date, and data-description to hold their respective data inline with the element (I wouldn't do it this way, but since you already have a lot of your data inline, why not).

If you were to take the data path, you could then do something like this to populate the fields after clicking on a thumbnail:

$(".video-thumbnail").click(function(){
    $("#video-iframe").attr("src", $(this).attr("rel"));
    $("#wkTitle").text($(this).data("title"));
    $("#wkDate").text("Date - " + $(this).data("date"));
    $("#wkDescription").text($(this).data("description")); 
});

So ultimately, this approach boils down to populating the data fields of the thumbnail element then setting the text of the corresponding HTML elements to the inline data.

I would recommend cleaning up your HTML though, especially since as of now, your title attribute has a syntax error because of the " within ". You could also not use the data attribute and rely on the title attribute of the thumbnail element, but then you would have to parse the string, split it at the -, and that leaves your implementation up to various problems.

Also, this approach may not work depending on how your programmatically inserting the {} info into the various attributes.