Managed to get this working pretty well. Just need to add an extra div plus the following jquery.
$('a.test').click(function() {
var address = $(this).attr('href');
var slider_outer = $('#slider');
var loadarea = $('#slider-inner');
var current_height = slider_outer.innerHeight();
slider_outer.css({
"height": (current_height)
});
slider_outer.addClass('spinner');
$('html,body').animate({
scrollTop: slider_outer.offset().top
}, 200, function() {
loadarea.animate({
opacity: 0,
display: 'block',
visibility: 'hidden'
}, 500, function() {
loadarea.load(address + ' .flexslider', function() {
$(this).animate({
opacity: 1.0
}, 500, function()
slider_outer.removeClass('spinner');
$('.flexslider').flexslider({
animation: 'slide',
smoothHeight: true,
easing: 'swing',
animationSpeed: 500,
slideshowSpeed: 10000,
touch: true,
prevText: '',
nextText: '',
start: function(slider) {
$('.flex-control-nav').fadeIn(500);
$('.total-slides').text(slider.count);
$('.current-slide').text(slider.currentSlide + 1);
slider_outer.removeAttr('style');
},
after: function(slider) {
$('.current-slide').text(slider.currentSlide + 1);
}
});
});
});
});
});
return false;
});
and the html
<div id="slider">
<div id="slider-inner">
<div class="flexslider">
IMAGES / CONTENT
</div>
</div>
</div>
I'd like it to be smoother so if anyone can see a better / smoother way of doing this that would be great. I'll try and get a demo working for Googlers.