Hola, he insertado una galería de imágenes en javascript en mi html, perome gustaría tener el código en un archivo externo y vincularlo. Tengo que añadir algo o cambiarlo pero no sé que es, se muy poco de javascript, Muchas gracias.
aquí el código html:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="1.js"></script>
<style type="text/css">
div.demoSW {
margin: 0 auto;
position: relative;
text-align: center;
width: 326px;
background-color: #333;
}
div.demoSW img {
background-color: #FFF;
border: 3px solid #BBB;
height: 190px;
outline: 1px solid #FFF;
padding: 10px;
width: 300px;
}
div.demoSW span {
color: #EEE;
display: block;
font-family: Georgia;
font-size: 20px;
letter-spacing: -1px;
outline: 1px solid #444;
padding: 5px 0;
}
div.demoSW div a {
color: #AAA;
font-family: Georgia;
text-decoration: none;
}
div.demoSW div {
margin:5px 0 0 0;
}
div.demoSW div a:hover {
color:#FFF;
text-decoration: none;
}
</style>
</head>
<body>
<div class="demoSW"><img id="misfotos" src="Galería prueba/Fotos_africa/01.jpg" />
<span id="mistextos"> la primera de las imagenes </span>
<div>
<a href="javascript:mover(-1);"> anterior </a> | <a href="javascript:mover(1);"> siguiente </a>
</div>
</div>
</body>
</html>
Y aquí el código javascript que me tengo en otro archivo:
Código:
<script language="javascript" type="text/javascript">
var foto = new Array();
foto[0] = "Galería prueba/Fotos_africa/01.jpg";
foto[1] = "Galería prueba/Fotos_africa/02.jpg";
foto[2] = "Galería prueba/Fotos_africa/03.jpg";
foto[3] = "Galería prueba/Fotos_africa/04.jpg";
foto[4] = "Galería prueba/Fotos_africa/05.jpg";
var texto = new Array();
texto[0] = "la primera de las imagenes";
texto[1] = "esta es la segunda";
texto[2] = "esta es al tercera";
texto[3] = "y casi vamos a terminar";
texto[4] = "la ultima de las imagenes";
var cantidad = foto.length;
var cualvemos = 0;
function mover(direccion) {
// accedemos al objeto que contiene la imagen
var laimagen = document.getElementById("misfotos");
// accedemos al objeto que contiene el texto
var eltexto = document.getElementById("mistextos");
// ¿cuál es el indice de la última imágenes en nuestra array?
var ultima = foto.length - 1; // en el ejemplo, será el 4
// antes de cambiar los datos, en un auxilar, verificamos cuál sería la imagen a mostrar
var auxiliar = cualvemos + direccion; // se sumará 1 o se restará 1 al índice
// si el resultado es menor que cero, le decimos que vaya al otro extremo y muestre la ultima
if(auxiliar < 0) { auxiliar = ultima; }
// si el resultado es mayor que la última, le decimos que vaya al otro extremo y muestre la primera
if(auxiliar > ultima) { auxiliar = 0; }
// listo, ahora ya podemos cambiar el dato sin problemas
cualvemos = auxiliar;
// ponemos la dirección URL de la imagen en la etiqueta IMG
laimagen.src = foto[cualvemos];
// ponemos el texto en la etiqueta SPAN
eltexto.innerHTML = texto[cualvemos];
}
</script>