Cierra bien los div en galeria.html y en galeria[1, 2 y 3].php
galeria.htmlCódigo HTML :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BLOG</title>
<link href="estilo-pagina-css" rel="stylesheet" type="text/css" /><script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script language="javascript">
$(document).on("ready", Slider);
function Cargar(url) {
$.ajax({
type: "GET",
url: url,
success: function(data) {
$('#centro_galeria').html(data);
Slider();
}
});
}
function Slider() {
$('#slider1').cycle({
fx: 'fade',
speed: '600',
timeout: '7000',
next: '#next',
prev: '#prev',
pager: '#thumb',
pauseOnHover: false,
startClockOnMouseOut: false,
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="43" height="29" /></a></li>';
}
});
}
</script>
<style type="text/css">
#contenedor {
width: 900px;
margin: 0 auto;
height: 100%;
background-color: #000000;
}
</style>
<link href="estilo-galeria.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contenedor">
<div id="cabecera" ></div>
<div id="botonera"><?php include($_SERVER['DOCUMENT_ROOT']."/botonera.php"); ?></div>
<div id="sombra-galeria-botonera">
<div class="botonera-galeria">
<ul class="menu-galeria">
<li><a href="#" onclick="Cargar('galeria1.php');">CONTENIDO 1</a></li>
<li><a href="#" onclick="Cargar('galeria2.php');">CONTENIDO 2</a></li>
<li><a href="#" onclick="Cargar('galeria3.php');">CONTENIDO 3</a></li>
</ul>
</div>
</div>
<!-- -->
<div id="para-contenido"></div>
<!-- // centro_galeria -->
<div id="centro_galeria">
<div class="container">
<div class="slider">
<div id="slider1">
<img src="imagenes-galeria/1.jpg" />
<img src="imagenes-galeria/2.jpg" />
<img src="imagenes-galeria/3.jpg" />
</div>
<ul id="thumb"></ul>
<div id='next' class="slider_next"><img src="imagenes-presentacion/next.png" width="78" height="100" alt="next image" /></div>
<div id='prev' class="slider_prev"><img src="imagenes-presentacion/prev.png" width="78" height="100" alt="previous image" /></div>
</div>
</div>
</div>
<!-- // FIN centro_galeria -->
</div>
</body>
</html>
Ej:
galeria1.phpCódigo HTML :
<div id="centro_galeria">
<div class="container">
<div class="slider">
<div id="slider1">
<img src="imagenes-galeria/7.jpg" />
<img src="imagenes-galeria/2.jpg" />
<img src="imagenes-galeria/3.jpg" />
<img src="imagenes-galeria/4.jpg" />
<img src="imagenes-galeria/5.jpg" />
<img src="imagenes-galeria/6.jpg" />
</div>
</div>
<ul id="thumb"></ul>
<div id='next' class="slider_next"><img src="imagenes-presentacion/next.png" width="78" height="100" alt="next image" /></div>
<div id='prev' class="slider_prev"><img src="imagenes-presentacion/prev.png" width="78" height="100" alt="previous image" /></div>
</div>
</div>