como puedo seleccionar la misma imagen?
Publicado por informatic (10 intervenciones) el 11/10/2016 05:54:53
Hola que tal, estoy tratando de realizar una galeria de imagen, lo que quiero realizar es que al pulsar con el click la imagen se expanda al div que es superior a esta.
Mi problema es que nose como seleccionar dicha imagen o mencionar que la imagen esta seleccionada
este es mi codigo
Lo que hago es colapsar un div con un efecto de slideDown, pero quiero que al seleccionar cualquiera de las imagenes esta se muestre en el div contenido y en el div titulo, y al volver apretar cualquier otra imagen esta se cargue nuevamente en el div titulo.
Espero haberme explicado bien.
Intente realizarlo con document.getElementsByTagName("img"), pero al recorrer no logro obtener el valor de la imagen que estoy pulsando.
Mi problema es que nose como seleccionar dicha imagen o mencionar que la imagen esta seleccionada
este es mi codigo
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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset=utf-8" />
<title>Galeria</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style type="text/css">
#titulo{
background:#479E49;
padding:5px;}#contenido{
background:#8BD76A;
padding:20px 10px;}</style>
<script>
$(document).ready(function(){
$("#titulo").css("display","none");
$(".pulsa").click(function () {
if($("#titulo").css("display") == "none")
{$("#titulo").slideDown("slow");
$("#titulo").css("display","block");
$("#contenido").css("display","block");
}else
{$("#titulo").css("display","block");
$("#contenido").css("display","block");
}});
});
</script>
</head>
<div id="titulo">
<img id="nueva">
</div>
<div id="contenido">
<a href="#"><img class="pulsa" src="img/leon.jpg" width="250" height="150"></a>
<a href="#"><img class="pulsa" src="img/gato.jpg" width="250" height="150"></a>
<a href="#"><img class="pulsa" src="img/lobo.jpg" width="250" height="150"></a>
<a href="#"><img class="pulsa" src="img/oso.jpg" width="250" height="150"></a>
</div>
<body>
</body>
</html>
Lo que hago es colapsar un div con un efecto de slideDown, pero quiero que al seleccionar cualquiera de las imagenes esta se muestre en el div contenido y en el div titulo, y al volver apretar cualquier otra imagen esta se cargue nuevamente en el div titulo.
Espero haberme explicado bien.
Intente realizarlo con document.getElementsByTagName("img"), pero al recorrer no logro obtener el valor de la imagen que estoy pulsando.
Valora esta pregunta
0
