0

I am using a pre-built slider and I am trying to extend some functionality by having video thumbnails below the slider that a user can click on to go to that slider. I am writing jQuery code hoping to accomplish this. There are bullets that are below the thumbnail that already accomplish this.

I would like to recreate this functionality but with unique image thumbnails for each slide. Right now when I click on the thumbnail, the first bullet is set to get the active class. I thought this is what caused the slider to change, but I believe this is more so to do with CSS styles. Could someone look at my code and see if I am going in the right direction for getting video-thumbnail1 div when clicked to update the slide? Thanks.

HTML (navBulletsWrapper code is generated by image slider js):

<div class="video-thumbnail">
    <a id="video-thumbnail1">
       <img src="/_images/VideoImages/btn_FreeConsultation.png" />
    </a>
</div>

<div class="navBulletsWrapper">
    <div class="active" rel="0"> … </div>
    <div rel="1"> … </div>
    <div rel="2"> … </div>
    <div rel="3"> … </div>
</div>

jQuery:

$(document).ready(function(){

    $('#video-thumbnail1').click(function(){
        $('div.navBulletsWrapper div').attr("rel", "0").addClass("active");
    });

});

Link to live Site with image slider: http://www.hazeltonlawgroup.com

I would post javascript for the image slider here, but it is compressed. I am not very good with Firebug, so I am not sure how to inspect it properly. Thanks for any help.

4

0 回答 0