Galería de imagenes con Jquery no funciona
Publicado por Jhon Jairo (6 intervenciones) el 30/06/2018 03:43:04
Hola, estoy siguiendo un tutorial que no funciona. Quien lo hizo no muestra bien todas las partes del código, así que no se si me faltó algo. Se supone que al hacer click una imagen debería verse grande y luego al hacer click nuevamente se deberían ver las imagenes pequeñas.
Les agradezco cualquier ayuda que puedan darme.
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
<html>
<head>
<title>Galería de imágenes2</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script>
$(document).on("ready",inicio);
{function inicio(){
$("#container img").on("click", mostrarFull);
$("#imgFull").on("click", ocultarFull);
}function abrirFull(){
var nombre = $(this).attr('alt') + "_big";
var direccion = "img/" + nombre + ".jpg";
$("#imgFull").attr("src", direccion);
$("#previa").fadeIn();
}function cerrarFull(){
$("#previa").fadeOut();
}function mostrarFull(){
var nombre = $(this).attr('alt') + "_big";
var direccion = "img/" + nombre + ".jpg";
$("#imgFull").attr("src", direccion);
$("#previa").fadeIn();
}function ocultarFull(){
$("#previa").fadeOut();
var nombre = $(this).attr('alt') + "_big";
var direccion = "img/" + nombre + ".jpg";
$("#imgFull").attr("src", direccion);
}});
</script>
<style>
body{background-img: url("img/fondo.jpg");
} #container {
width:850px; margin:150px auto; } #container img{
cursor:pointer; } #previa {
background: rgba(0,0,0,0.5);
display: none;height: 100%;
left 0;
position: fixed; top:0;width:100%;
} #previa div{
margin:30px auto; width:381px; }</style>
</head>
<body>
<div id="previa">
<div>
<img src="" id="imgFull"/>
</div>
</div>
<div id="container">
<img src="img/yoda_small.jpg" alt="yoda" width="162" height="244"/>
<img src="img/amidala_small.jpg" alt="amidala" width="162" height="244"/>
<img src="img/3cpo_small.jpg" alt="3cpo" width="162" height="244"/>
<img src="img/darthvader_small.jpg" alt="darthvader" width="162" height="244"/>
<img src="img/bobafett_small.jpg" alt="bobafett" width="162" height="244"/>
</div>
</body>
</html>
Les agradezco cualquier ayuda que puedan darme.
Valora esta pregunta
0