Adaptar código a Wordpress
Publicado por Mario (1 intervención) el 02/02/2021 10:04:28
Buenos días,
he creado el siguiente código, es un visor de imágenes que cargan al hacer clic en unas miniaturas. Aunque no tengo muchos conocimientos en javascript lo he conseguido montar con aportaciones de foros, pero al subirlo a una página en Wordpress, por muchas vueltas que le doy no consigo hacer que funcione el script y no se muy bien como adaptarlo. Utilizo WPBAKERY y supongo que por ahí vendrá el error, que cambien algunas rutas.
Dejo un enlace a la publicación y el código en HTML más abajo:
https://delaoliva.com/just/
¿Alguien puede ayudarme con la solución? Muchas gracias de antemano
he creado el siguiente código, es un visor de imágenes que cargan al hacer clic en unas miniaturas. Aunque no tengo muchos conocimientos en javascript lo he conseguido montar con aportaciones de foros, pero al subirlo a una página en Wordpress, por muchas vueltas que le doy no consigo hacer que funcione el script y no se muy bien como adaptarlo. Utilizo WPBAKERY y supongo que por ahí vendrá el error, que cambien algunas rutas.
Dejo un enlace a la publicación y el código en HTML más abajo:
https://delaoliva.com/just/
¿Alguien puede ayudarme con la solución? Muchas gracias de antemano
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Visor de imágenes</title>
<style type="text/css">
* { margin: auto; padding: 0; text-align: center }
#cab-title { font: bold 1.3em verdana; background-color: #feffe4; padding-left:3%;margin-bottom:20px; }h1 { text-align: left ; padding: 0.5em }
#menu-miniaturas { display:block; float: left; width: 60%; text-align: left;padding-left:3%;}#menu-miniaturas img { width: 19%; margin: 0; cursor: pointer; }#principal {display:block; float: left; width: 35%; }#visor { width: 95%; margin:0px 1px 1px 0px }#visor img { width: 100% } #titulo {font-family: sans-serif; font-size: 20px;margin-top: 10px; text-align: left;}</style>
<script type="text/javascript">
window.onload = function() { //tras cargar la página ...
visor1=document.getElementById("visor"); //referencia al visor
mititulo=document.getElementById("titulo"); //referencia al pie de foto
}function mifoto(num) { //cambiar la imagen
f="https://delaoliva.com//acabados-/grupo-b/just/Just_"+num+".png"; //ruta de la nueva imagen
document.images["fotoVisor"].src=f; //cambiar imagen
t=document.images["fotos"+num].alt; //texto de pie de foto
mititulo.innerHTML=t; //cambiar pie de foto
}</script>
</head>
<body>
<div id="cab-title">
<h1>JUST</h1>
</div>
<div id="menu-miniaturas">
<img src='https://delaoliva.com//acabados-/grupo-b/just/Just_60119.png' alt='Ref. JU60119' name='fotos60119' onclick="mifoto(60119)"/>
<img src='https://delaoliva.com//acabados-/grupo-b/just/Just_66180.png' alt='Ref. JU66180' name='fotos66180' onclick="mifoto(66180)"/>
<img src='https://delaoliva.com//acabados-/grupo-b/just/Just_68201.png' alt='Ref. JU68201' name='fotos68201' onclick="mifoto(68201)"/>
<img src='https://delaoliva.com//acabados-/grupo-b/just/Just_68200.png' alt='Ref. JU68200' name='fotos68200' onclick="mifoto(68200)"/>
<img src='https://delaoliva.com//acabados-/grupo-b/just/Just_63095.png' alt='Ref. JU63095' name='fotos63095' onclick="mifoto(63095)"/>
<img src='https://delaoliva.com//acabados-/grupo-b/just/Just_63094.png' alt='Ref. JU63094' name='fotos63094' onclick="mifoto(63094)"/>
<img src='https://delaoliva.com//acabados-/grupo-b/just/Just_64206.png' alt='Ref. JU64206' name='fotos64206' onclick="mifoto(64206)"/>
<img src='https://delaoliva.com//acabados-/grupo-b/just/Just_61178.png' alt='Ref. JU61178' name='fotos61178' onclick="mifoto(61178)"/>
</div>
<div id="principal">
<div id="visor">
<img src='https://delaoliva.com//acabados-/grupo-b/just/Just_60119.png' alt='Ref. JU60119' name='fotoVisor'/>
<div id="titulo">Ref. JU60119</div>
</div>
</div>
</body>
</html>
Valora esta pregunta
0