Basically we have one large image with four thumbnails sitting below (each 25% in width).
I've been able to swap out the large images when the corresponding thumbs are clicked.
My issue is trying to add/remove the classes 'media-type-picture' and 'media-type-video' to/from #big-image depending on the class of the anchor tag being clicked (.picture or .video).
I'm a noob, so please be as gentle as possible.
Many Thanks
The markup:
<div>
<h3>Kenya portfolio</h3>
<p id="big-image"><a href=""><img src="big-images/image-1.jpg"></a></p>
<ul class="thumbs clearfix">
<li><a href="big-images/image-1.jpg" class="picture"><img src="thumbnails/thumb-1.jpg"></a></li>
<li><a href="big-images/image-2.jpg" class="video"><img src="thumbnails/thumb-2.jpg"></a></li>
<li><a href="big-images/image-3.jpg" class="video"><img src="thumbnails/thumb-3.jpg"></a></li>
<li><a href="big-images/image-4.jpg" class="picture"><img src="thumbnails/thumb-4.jpg"></a></li>
</ul>
</div>
The relevant css:
.media-type-picture,
.media-type-video {
code for a transparent overlay
containing a web icon...
}
.media-type-picture:before,
.media-type-video:before {
font-family: 'icomoon';
etc
}
.media-type-picture:before {content: "\e602";}
.media-type-video:before {content: "\e603";}
The jQuery:
This first bit works to initially swap out the corresponding images
$(function()
{
$(".thumbs li a").click(function(e){
var href = $(this).attr("href");
$("#big-image a img").attr("src", href);
e.preventDefault();
return false;
});
});
The following is where I have ended up... (after much hair tearing!!)
$(function(){
$('.thumbs li a').click(function(e){
var bigImage = $('#big-image');
var firstImage = $('bigImage').addClass('media-type-picture');
if ($(this).hasClass('picture')){
bigImage.removeClass(' ');
bigImage.addClass('media-type-picture');
} else {
bigImage.removeClass(' ');
bigImage.addClass('media-type-video');
}
e.preventDefault();
return false;
});
});