post slider with content

<script>
$(document).ready(function() {
$('.1').show();
$('.member').click(function(){
var callss=this.id;
$('.ContentDiv').css('display','none');
$('.'+callss).show();
})

//for slider

 $('.sliderDiv').bxSlider({
    slideWidth: 200,
    minSlides: 2,
    maxSlides: 3,
    moveSlides: 3,
    slideMargin: 1,
   
  });

});
</script>

<script>
$(window).load(function() {
$('.sliderDiv img').each(function() {
$(this).wrap('<div style="display:inline-block;width:' + this.width + 'px;height:' + this.height + 'px;">').clone().addClass('gotcolors').css({'position': 'absolute', 'opacity' : 0 }).insertBefore(this);
this.src = grayscale(this.src);
}).animate({opacity: 1}, 500);
});

$(document).ready(function() {
$(".sliderDiv a").hover(
function() {
$(this).find('.gotcolors').stop().animate({opacity: 1}, 200);
},
function() {
$(this).find('.gotcolors').stop().animate({opacity: 0}, 500);
}
);
});

// http://net.tutsplus.com/tutorials/javascript-ajax/how-to-transition-an-image-from-bw-to-color-with-canvas/
function grayscale(src) {
var supportsCanvas = !!document.createElement('canvas').getContext;
if (supportsCanvas) {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageData, px, length, i = 0, gray,
img = new Image();

img.src = src;
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0);

imageData = context.getImageData(0, 0, canvas.width, canvas.height);
px = imageData.data;
length = px.length;

for (; i < length; i += 4) {
gray = px[i] * .3 + px[i + 1] * .59 + px[i + 2] * .11;
px[i] = px[i + 1] = px[i + 2] = gray;
}

context.putImageData(imageData, 0, 0);
return canvas.toDataURL();
} else {
return src;
}
}
</script>
<div class="mainDiv">
<div class="sliderDiv">
<?php
query_posts('post_type=staff&order=ASC');
$imgid=0;
?>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post();
$imgid++;
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
?>
 <div class="slide member" style="cursor: pointer;" id="<?php echo $imgid; ?>"><a href="javascript:void(0);"><img src="<?php echo $url; ?>"  class="desaturate"></a></div>
<?php endwhile; ?>
<?php endif; ?>
</div>

<?php
query_posts('post_type=staff&order=ASC');
$class=0;
?>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post();
$class++;
?>
<div id="meetCntDiv18" class="ContentDiv <?php echo $class; ?>"  style="display: none;">
<h1><?php the_title(); ?></h1>
<p><?php echo get_the_content(); ?></p>
</div>
<?php endwhile; ?>
<?php endif; ?>

</div>