Ayuda con un ligthbox no logro que funcione correctamente
Publicado por Oscar Enrique (1 intervención) el 09/09/2016 01:12:03
Estoy haciendo una pagina web de fotografía y para la galería quiero implementar un ligthbox que pase las imagenes en orden, el problema es el siguiente: al abrir la imagen que quiero visualizar los botones de atrás y siguiente pasan las imágenes en el orden correcto sin problemas pero al cerrar la ventana modal y abrir otra vez la imagen pierde completamente el orden y pasa las imagenes de manera desordenada y aun no consigo el error aqui les adjunto el link de a pagina demo y el código que utilice:
http://oscarenriquegarcia.neocities.org/riocaribe/personajes.html
codigo:
HTML
Jquery:
http://oscarenriquegarcia.neocities.org/riocaribe/personajes.html
codigo:
HTML
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Río Caribe - Incio</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/style.css">
<link href="https://fonts.googleapis.com/css?family=Bitter|Oswald:700|Roboto:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Coming+Soon|Rock+Salt" rel="stylesheet">
</head>
<body id="fotos">
<div class="container">
<div class="control-regreso">
<a href="galeria.html"><span class="icon-arrow-long-left"></span>Regresar a Galeria</a>
</div>
<div id="modal-container" class="modal-container">
<div id="modal-categorias" class="modal-wrapper">
<img id="modal-img " class="modal-img">
<div class="caption">
<h3 id = "caption-title" class="caption-title"></h3>
<p class= "parrafo"></p>
</div>
</div>
<div class="control-da">
<span id ="atras" class="icon-chevron-thin-left"></span>
<span id="delante" class="icon-chevron-thin-right"></span>
</div>
<div class="modalboton-cerrar">
<span id="cerrarmodal" class="icon-cross"></span>
</div>
</div>
<div class="logo">
<a href="index.html" id="logo"><h1>Rio Caribe</h1><h3>un pueblo mil colores</h3></a>
</div>
<header>
<div class="menu_bar">
<span class="icon-menu"></span>
</div>
<nav>
<ul>
<li><a href="#">inicio</a></li>
<li><a href="#">acerca de</a></li>
<li><a href="#">ubicación</a></li>
<li><a href="#">galeria</a></li>
</ul>
</nav>
</header >
<section class="img-sp">
<ul id="img-wrapper" class="img-wrapper">
<li class="img-items">
<img class="img-img" src="img/fotosprueba-01.jpg" height="600" width="900" alt="Imagen 1">
<p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li class="img-items">
<img class="img-img" src="img/fotosprueba-02.jpg" alt="Imagen 2">
<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li class="img-items">
<img class="img-img"src="img/fotosprueba-03.jpg" alt="Imagen 3">
<p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li class="img-items">
<img class="img-img" src="img/fotosprueba-04.jpg" alt="Imagen 4">
<p>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li class="img-items">
<img class="img-img" src="img/fotosprueba-05.jpg" alt="Imagen 5">
<p>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li class="img-items">
<img class="img-img" src="img/fotosprueba-06.jpg" alt="Imagen 6">
<p>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
</ul>
</section>
<footer>
</footer>
<!-- controles slider--></div>
<!-- Scripts --><script type="text/javascript" src="js/jquery-3.1.0.min.js" ></script>
<script type="text/javascript" src="js/menu.js" ></script>
<script type="text/javascript" src="js/slider2.js" ></script>
</body>
</html>
Jquery:
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
$(document).ready(function(){
//Variables globales
var img_active;
var url_img;
//Abrir y cerrar el lightbox
$('.img-img').stop().click(function(e){
url_img = $(this).attr('src');
titulo = $(this).attr('alt');
modal2 = document.getElementById('modal-container');
parrafo = $(this).next().text();
$('#modal-container #modal-categorias img').attr('src',url_img);
$('.caption-title').html(titulo);
$('.parrafo').html(parrafo);
$('#modal-container').fadeIn(500);
img_active = $(this);
//BOTON SIGUIENTE
$('#delante').stop().click(function(){
ud_next_img(img_active);
});
function ud_next_img(UD_OBJEKT) {
if($(UD_OBJEKT).parent().next().children().is('img')){
img_active = $(UD_OBJEKT).parent().next().children('img');
url_img= $(UD_OBJEKT).parent().next().children('img').attr('src');
parrafo = img_active.next().text();
titulo = img_active.attr('alt');
$('#modal-container #modal-categorias img').attr('src',url_img);
$('.parrafo').html(parrafo);
$('.caption-title').html(titulo);
console.log('if '+url_img);
console.log('if '+img_active);
} else {
img_active = $(UD_OBJEKT).parent('li').parent('ul').children('li').first().children('img');
url_img = $(UD_OBJEKT).parent('li').parent('ul').children('li').first().children('img').attr('src');
parrafo = img_active.next().text();
titulo = img_active.attr('alt');
$('#modal-container #modal-categorias img').attr('src',url_img);
$('.parrafo').html(parrafo);
$('.caption-title').html(titulo);
console.log('else '+img_active);
console.log('else '+url_img);
} } //Boton atras
$('#atras').stop().click(function(){
ud_prev_img(img_active);
});
function ud_prev_img(UD_OBJEKT) {
if($(UD_OBJEKT).parent().prev().children().is('img')){
img_active = $(UD_OBJEKT).parent('li').prev().children('img');
url_img= $(UD_OBJEKT).parent('li').prev().children('img').attr('src');
parrafo = img_active.next().text();
titulo = img_active.attr('alt');
$('#modal-container #modal-categorias img').attr('src',url_img);
$('.parrafo').html(parrafo);
$('.caption-title').html(titulo);
console.log('if '+img_active);
console.log('if '+url_img);
} else {
img_active = $(UD_OBJEKT).parent('li').parent('ul').children('li').last().children('img');
url_img = $(UD_OBJEKT).parent('li').parent('ul').children('li').last().children('img').attr('src');
parrafo = img_active.next().text();
titulo = img_active.attr('alt');
$('#modal-container #modal-categorias img').attr('src',url_img);
$('.parrafo').html(parrafo);
$('.caption-title').html(titulo);
console.log('esle '+img_active);
console.log('esle '+url_img);
} } //CERRAR
$('.modalboton-cerrar').stop().click(function(){
$('#modal-container').fadeOut(500);
url_img = undefined; titulo = undefined;});
window.onclick = function(event) {
if (event.target == modal2) {
$('.modalboton-cerrar').trigger('click');
} } //TECLADO FUNCIONES
$(document).keyup(function(e){
switch(e.which){
case 37:$('#atras').trigger('click')
break;
case 39:$('#delante').trigger('click')
break;
case 27:$('.modalboton-cerrar').trigger('click')
break;
}})
});
});
Valora esta pregunta
0