jquery content replacement (html) - images don't load?
Hello everybody,
This is my first post in the jQuery forum. I am quite a beginner, and I'm still figuring out how jQuery and javaScript works. I find it increasingly interesting, though.
I have made a website, where everything stays (header, footer, menus) and only a <div> changes, in this <div> is the changing content (other html files, like if this was a iframe).
I have used the method below to change the content of a <div> named "texto", it seems to work, but it doesn't load the images! only the text! See an example here: http://tinyurl.com/5rwlgdo
Main page index.html//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
- <div id="nav">
- <p id="menu1">BUTTON1</p>
- <p id="menu2">BUTTON2</p>
- <p id="menu3">BUTTON3</p>
- </div>
- //this is the div where I am going to change the contents
- <div id="texto"></div>
my script dynamic-content.js ////////////////////////////////////////////////////////////////////////////////////////////////////
- $(document).ready(initialize);
function initialize(){
$("#texto").hide();
$("#texto").load("es/index_content.html", function(){
$("#texto").fadeIn("slow");
});
$("#menu1").click(function(){
$("#texto").fadeOut("normal", function(){
$("#texto").load("es/index_content.html", function(){
$("#texto").fadeIn("slow");
});
});
});
$("#menu2").click(function(){
$("#texto").fadeOut("normal", function(){
$("#texto").load("es/cuarteto_content.html", function(){
$("#texto").reload();
$("#texto").fadeIn("slow");
});
});
});
$("#menu3").click(function(){
$("#texto").fadeOut("normal", function(){
$("#texto").load("es/andres_content.html", function(){
$("#texto").fadeIn("slow");
});
});
});
}
Any clues? Thanks!