I have a page index.html with a menu that dynamically loads content from pages 1.html, 2.html, 3.html, etc via AJAX into a DIV in index.html.
The content in 1.html has a Flexslider built in, which does not get initalized after it is loaded via AJAX. If I make a direct call / refresh the page, the slider loads perfectly!
I call the slider in index.html via
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
manualControls: ".flex-control-nav li"
});
});
</script>
My AJAX call is in a external .js and looks like this
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav2mobile li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content2';
$('#content2').load(toLoad)
}
});
$('#nav2mobile li a').click(function(){
var toLoad = $(this).attr('href')+' #content2';
$('#content2').hide('normal',loadContent);
$('#load').remove();
$('#load').fadeIn('slow');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content2').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content2').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
I can't figure out how to start the slider after it has been loaded into index.html
I tried putting the Slider call into the .click(funktion() but that didn't work either..
Anyone an idea?
Thanks, any help is appreciated!
