I am trying to add functionality to an already built javascript slider. I am trying to add in images of the videos that people can click to bring them to the proper video in the slide. I am trying to accomplish this with jQuery. I would like to know how to get the attribute of the divs inside of div.navBulletsWrapper. My code at the moment seems to change all the divs to rel="0" instead of getting the rel value and setting the class accordingly. Thanks for any help.
HTML:
<div class="video-thumbnail">
<a id="video-thumbnail1">
<img src="/_images/VideoImages/btn_FreeConsultation.png" />
</a>
</div>
This is being created dynamically by the slider javascript:
<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");
});
});
live website in case you want to see full code: http://www.hazeltonlawgroup.com