<div id="imageBig"></div>

    <div id="diapo">
	<div id="sliderDiapo">
        <img src="photos/album1/001.JPG" style=" width:150px;" alt="image" />
        <img src="photos/album1/002.JPG" style=" width:150px;" alt="image" />
        <img src="photos/album1/003.JPG" style=" width:150px;" alt="image" />
        <img src="photos/album1/004.JPG" style=" width:150px;" alt="image" />
        </div>
    </div>

$(document).ready(function() {
	
	$('#imageBig').hide();
	
	
	$('#sliderDiapo img').click(function(){
	
		$('#imageBig').html('<img src="'+ $(this).attr('src') +'" alt="" />');
		//$('#imageBig img').addClass('active');
		$('#imageBig').fadeIn('slow');
		
	});
	
});

$(function() { // C'est plus court et performant comme ça
	$('#imageBig').hide(); // cette ligne ne devrait pas être là et se trouver dans ton CSS
	$('#sliderDiapo').find('img').click(function(){ // utiliser .find() dans ce cas est plus rapide car tu vise tout d'abord un id
		// ici on met nos éléments en cache pour des raisons de performances
		var element  = $(this),
			imageBig = $('#imageBig')
			;
		imageBig.fadeOut(function () {
			imageBig
				.html(element) // ce sera plus facile d'y copier seulement ton élément au lieu d'écrire une chaine de caractère (note, il faudra peut-être utiliser element.clone() mais je ne suis pas sûr. Essaie sans pour commencer)
				.fadeIn('slow')
				;
		});
	});
});

a écrit :
et ne pas disparaître dans mon slide qui défile en dessous

$('#sliderDiapo').on('click', 'img', function () {
  // ton code
});