CSS - Ayuda con galerias

 
Vista:
sin imagen de perfil
Val: 2
Ha aumentado su posición en 25 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con galerias

Publicado por Mauro (2 intervenciones) el 05/12/2018 19:42:05
Estimados,
he conseguido este template, y lo que quiero hacer es que aparezca una galeria diferente por cada seccion que existe en el index
ejemplo una galeria para NATURE
otra galeria para EVENTS
cada una con fotos diferentes.

podrian ayudarme,-?
muchas gracias.!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con galerias

Publicado por ScriptShow (125 intervenciones) el 16/12/2018 16:56:14
Saludos Mauro,

no he visto la template que tienes... Los Frameworks y Librerías de terceros, mejor reservarlos para casos que lo requieran, si los hay.

Veamos un ejemplo sencillo y muy compatible:

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
<!DOCTYPE html>
 
<html>
<head>
<title>Galerias</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width">
<style type="text/css">
<!--
body {
font:normal 18px/1.0 sans-serif;
-webkit-user-select:none;
user-select:none;
color:#000000;
}
#imgfull {
position:absolute;
display:none;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
cursor:zoom-out;
}
a {
text-decoration:none;
color:#D4D4D4;
}
p {
margin:0px;
padding:8px;
}
//-->
</style>
<script type="text/javascript">
<!--
function init(s) {
e=document.getElementById("imgfull");
if (s) {e.src=s; e.style.display="block";}
}

var actual=null;
function showhide(id) {
if (actual != null) document.getElementById(actual).style.display="none";
actual=id;
document.getElementById(id).style.display="inline";
}
//-->
</script>
</head>
<body>
<img id="imgfull" src="transparent.png" onclick="this.style.display='none'">
<p align="left">
<br>Galerías: / <a href="javascript:void(0)" onclick="showhide('sec1')"> NATURE</a> / <a href="javascript:void(0)" onclick="showhide('sec2')"> EVENTS</a> /<br><br>
<span id="sec1" style="display:none">
<img src="nat_01.jpg" onclick="init(this.src)" width="102" height="78" border="0">
<img src="nat_02.jpg" onclick="init(this.src)" width="102" height="78" border="0">
<img src="nat_03.jpg" onclick="init(this.src)" width="102" height="78" border="0">
<img src="nat_04.jpg" onclick="init(this.src)" width="102" height="78" border="0">
</span>
<span id="sec2" style="display:none">
<img src="evt_01.jpg" onclick="init(this.src)" width="102" height="78" border="0">
<img src="evt_02.jpg" onclick="init(this.src)" width="102" height="78" border="0">
<img src="evt_03.jpg" onclick="init(this.src)" width="102" height="78" border="0">
<img src="evt_04.jpg" onclick="init(this.src)" width="102" height="78" border="0">
</span>
</p>
</body>
</html>

Puedes implementarlo en cualquier proyecto con pequeños cambios.

Espero se útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar