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;
});
});