Ayuda con galeria con ajax/jquery utilizando Colorbox
Publicado por Nicolás (8 intervenciones) el 25/11/2016 23:45:55
Hola. Estoy haciendo un código que envíe un dato a una página php y que devuelva una galería a través de colorbox con ajax y jquery. Colorbox es un plugin para galerías con jquery http://www.jacklmoore.com/colorbox/guide/.
Primero estoy enviando un valor, en este caso un directorio y eso funciona bien, lo que no tengo claro es como recibir la lista de imágenes obtenidas en la pagina2.php y abrirlas con este plugin. El array de imágenes obtenido esta codificado con json, pero no sé como pasarlo de nuevo a la página inicial e iniciar colorbox con los datos de este array.
pagina1.php
pagina2.php
Gracias.
Primero estoy enviando un valor, en este caso un directorio y eso funciona bien, lo que no tengo claro es como recibir la lista de imágenes obtenidas en la pagina2.php y abrirlas con este plugin. El array de imágenes obtenido esta codificado con json, pero no sé como pasarlo de nuevo a la página inicial e iniciar colorbox con los datos de este array.
pagina1.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<title>Pagina 1</title>
<!--URL a hoja de estilo de colorbox--><link rel="stylesheet" href="colorbox.css">
<!--URL a colorbox--><script src="jquery.colorbox-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//al enviar desde pagina1.php
$('form').submit(function(e) {
e.preventDefault();
//variable con array codificado por json
var data1 = json_encode($miArray);
//variable para iniciar colorbox
var data2 = .Capitulo1(data1).colorbox();
//inicio ajax para obtener datos de pagina2.php con colorbox
$.ajax({
url: 'pagina2.php',
type: 'post',
dataType: 'json',
data: data2,
});
});
});
</script>
</head>
<body>
<div class="articulo">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam felis mi, pellentesque at scelerisque eu, consectetur quis felis. Aliquam mollis
</p>
</div>
<div class="formulario">
<!--inicio variable--><?php
$a = "Capitulo1";
?>
<!--envío variable por formulario--><form action="pagina2.php" method="post">
<input type="hidden" name="var" value="<?php echo $a; ?>">
<input type="submit" name="submit" value="Capitulo1">
</form>
</div>
<!--muestro datos de pagina.php con ajax jquery en esta etiqueta--><div class="Capitulo1">
</div>
</body>
</html>
pagina2.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<title>Pagina 2</title>
</head>
<body>
<?php
//inicio array para imágenes
$miArray=Array();
//traigo variable de sesión anterior
$variable = $_POST['var'];
//inicio funcion glob y agrego imágenes en array
foreach(glob($variable . '/*.jpg') as $image) {
$miArray[]=$image;
}
$json_encode($miArray);
?>
</body>
</html>Gracias.
Valora esta pregunta
0