Hola a todos; necesito cargar en un contenedor dentro de un HTML mediante una llamada AJAX un flexslider externo que va en otro archivo HTML.
Uso este código para la llamada, este es el archivo AJAX:
<html>
<head>
<title>Ajax Simple</title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#destino").load("inner-zoom.html");
});
})
</script>
<style type="text/css">
#destino {
background-color: #F6C;
}
</style>
</head>
<body>
<a href="#" id="enlaceajax"><img src="images/01.png" width="220" height="169"></a>
<br>
<div id="destino"></div>
</body>
</html>
____________________________________
Y este el HTMl que contiene el flexslider:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="charset=utf-8">
<title>FlexSlider With Elevate Zoom Examples</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<style type="text/css">
#container {
max-width: 960px;
margin: auto;
background-color: #F00;
}
</style>
</head>
<body>
<div id="container" class="cf">
<div id="main" role="main">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img class="zoom" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
</li>
<li>
<img class="zoom" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
</li>
<li>
<img class="zoom" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
</li>
<li>
<img class="zoom" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
</li>
</ul>
</div>
</section>
</div>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- FlexSlider -->
<script defer src="jquery.flexslider.js"></script>
<script src='jquery.elevatezoom.js'></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade"
});
});
</script>
<script>
$(window).load(function(){
$('.zoom').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
});
</script>
</body>
</html>
_______________________________________
La cuestión es que no me muestra las imágenes del flexslider ni navegación ni nada más que el fonfdo del HTML y el contenedor del flexslider.
El código del flexslider lo saqué de aquí:
http://shhdesign.co.uk/blog/flexslider-zoom-using-elevate-zoom/
Ya no sé si es un conflicto de librerías JQuery, o de rutas o... ni idea, la verdad.
Alguien puede ayudarme? Mil gracias de antemano, saludos!