Buenas, estoy intentando cargar diferentes partes de webs en divs, para crear un menu y que no tenga que cargar este todo al cambiar de elementos del menu. el problema es que al usar esta funcion:
Código:
<script type="text/javascript" language="javascript">
function cargarContenidos(urlDatos){
$.get(urlDatos, function(data) {
$('#idDiv').html(data);
});
</script>
<a href="javascript:cargarContenidos('index.php')">Boton 1</a>
El contenido del enlace se me muestra, pero no me carga un js que tengo incluido, es decir, las imagenes se muestran pero se cargan una encima de la otra y no me hacen el efecto slide que me haria si cargo el index. tal cual.
Mi pregunta es, de que forma puedo usar esta funcion para que me ejecute los js que tengo incluidos en esta?, he probado por todos los medios y no soy capaz. Os pongo el js y algo del html para que os hagais una idea.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<title>Juan Abril Photography</title>
</head>
<script type="text/javascript">
jQuery.fn.simpleSlide = function(a){
a = a || {};
a.duration = a.duration || 5000;
a.transition = a.transition || 1000;
a.stopAt = a.stopAt || false;
a.element = a.element || "img";
var c = $(this);
$(c).css("position","relative");
$(a.element,$(c))
.css({
'position' : 'absolute',
'top' : '0px',
'left' : '0px',
'z-index' : '8'
})
.find(":first")
.addClass("slide-active")
.css('z-index','10');
var cnt = 0;
var interval = setInterval(function(){
if(!isNaN(a.stopAt)){
cnt++;
if(cnt==a.stopAt){
clearTimeout(interval);
}
}
var $active = $(a.element+".slide-active",$(c));
if($active.length == 0) $active = $(a.element+":last",$(c));
var $next = $active.next().length ? $active.next() : $(a.element+":first",$(c));
$active
.addClass("slide-last-active")
.css('z-index','9');
$next
.css({opacity: 0.0})
.addClass("slide-active")
.css('z-index','10')
.animate({opacity: 1.0}, a.transition, function(){
$active
.removeClass('slide-active slide-last-active')
.css('z-index','8');
});
}, a.duration);
}
</script>
<body>
<audio controls loop style="visibility:hidden;">
<source src="1.mp3" type="audio/mpeg" >
<source src="1.ogg" type="audio/ogg">
</audio>
<div id="cabecera">
<div id="titulo">
<img src="nombre.jpg" /> </img>
</div>
<div id="menu">
<ul id="lista">
<li><h2>home</h2></li>
<li ><a href="portfolio/portmenu.php"><h1>portfolio</h1></a></li>
</ul>
</div>
</div>
<div id="centro">
<div id="slide" >
<script language="javascript">
$(document).ready( function(){
$("#slide").fadeIn(1500);
event.preventDefault();
$("#centro").simpleSlide();});
</script>
<img src="fotos/1.jpg" alt="Imagen 1" />
<img src="fotos/2.jpg" alt="Imagen 2" />
<img src="fotos/3.jpg" alt="Imagen 3" />
<img src="fotos/4.jpg" alt="Imagen 4" />
<img src="fotos/5.jpg" alt="Imagen 5" />
</div>
</div>
</div>
El menu, en principio lo cargaba como esta ahi puesto, pero al llamarlo con la funcion ya no se ejecuta el slide de fotos. Espero haberme expresado con claridad gracias.