Jquery image swap to swap in a div if the clickable item has a certain class

Im a jquery noob.
I needed a script that would swap out images or show a div based on the class of the thumbnail clicked. The image swapping works great but when when it comes to the div i resorted to hiding the divs with the appropriate class’s then showing one based on the id of the thumbnail clicked. I would like to find a solution that would not depend on someone going into the script to add another video div.

Here is what i got:

The CSS

.s-07.videoHolder,.s-08.videoHolder,.s-09.videoHolder {
    display:none;
}

The HTML

 <div id="video">
    <div class="videoHolder s-07">Video 1</div>
    <div class="videoHolder s-08">Video 2</div>
    <div class="videoHolder s-09">Video 3</div>
    <img src="images/bigimages-01.jpg" width="350" height="250">
    </div>
    <div id="thumbs">
      <img id="s-01" class="photo" src="images/thumbs-01.jpg" width="80" height="80">
      <img id="s-02" class="photo" src="images/thumbs-02.jpg" width="80" height="80">
      <img id="s-03" class="photo" src="images/thumbs-03.jpg" width="80" height="80">
      <img id="s-04" class="photo" src="images/thumbs-04.jpg" width="80" height="80">
      <img id="s-05" class="photo" src="images/thumbs-05.jpg" width="80" height="80">
      <img id="s-06" class="photo" src="images/thumbs-06.jpg" width="80" height="80">
      <img id="s-07" class="video" src="images/thumbs-07.jpg" width="80" height="80">
      <img id="s-08" class="video" src="images/thumbs-08.jpg" width="80" height="80">
      <img id="s-09" class="video" src="images/thumbs-09.jpg" width="80" height="80">
</div>

The Jquery

$  (document).ready(function(){
    var vidActive = 0;

// Photo
  $  ("#thumbs img.photo").click(function() {
      var newImgSrc = "images/bigimage" + this.id + ".jpg";
            if (vidActive = 0){
                $  ("#video img").attr("src", newImgSrc); }
            else {
                $  (".s-07.videoHolder,.s-08.videoHolder,.s-09.videoHolder").hide();
                var vidActive = 0;
                $  ("#video img").attr("src", newImgSrc); }
     });
// Video
    $  ("#thumbs img.video").click(function() {
      var whichDiv = "div." + this.id;

            if (vidActive = 0){
                $  ("#video div"+whichDiv).show(); }
            else {
                $  (".s-07.videoHolder,.s-08.videoHolder,.s-09.videoHolder").hide();
                $  ("#video "+whichDiv).show(); }
                var vidActive = 1;

});

});

newest questions tagged jquery – Stack Overflow

About Admin