SCRIPT PARA HACER UNA GALERÍA DE IMÁGENES VISOR DE IMÁGENES CSS


script-galeria-imagenes Ver Demostración de Galería de Imágenes


Colocar esta parte del script entre <head> y </head>:

(Editar lo que está en color azul)

<!-- Empieza GALERIA DE IMAGENES HEAD -->
<script type="text/javascript">
var photos=new Array();
var photoslink=new Array();
var textos=new Array() ;
var which=0;
var linkornot=0;
photos[0]="imagenes/foto-0.jpg";
photos[1]="imagenes/foto-1.jpg";
photos[2]="imagenes/foto-2.jpg";
photos[3]="imagenes/foto-3.jpg";
textos[0]="Esta es la Foto 0";
textos[1]="Foto-1";
textos[2]="Foto-2";
textos[3]="Foto-3";
var preloadedimages=new Array();
for (i=0;i<photos.length;i++) {
preloadedimages[i]=new Image();
preloadedimages[i].src=photos[i];
}
function applyeffect() {
if (document.all) {
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23);
photoslider.filters.revealTrans.stop();
photoslider.filters.revealTrans.apply();
}
}
function playeffect() {
if (document.all)
photoslider.filters.revealTrans.play();
}
function keeptrack() {
window.status="Image "+(which+1)+" of "+photos.length;
}
function backward(){
if (which>0) {
which--;
applyeffect();
document.images.photoslider.src=photos[which];
if (document.all) { // IE;
document.getElementById('elTExto').innerText=textos[which];
} else { //Mozilla;
document.getElementById('elTExto').textContent=textos[which];
}
playeffect();
keeptrack();
}
}
function forward() {
if (which<photos.length-1) {
which++;
applyeffect();
document.images.photoslider.src=photos[which];
if (document.all) { // IE;
document.getElementById('elTExto').innerText=textos[which];
} else { //Mozilla;//
document.getElementById('elTExto').textContent=textos[which];
}
playeffect();
keeptrack();
}
}
function transport() {
window.location=photoslink[which];
}
</script>
<!-- Termina GALERIA DE IMAGENES HEAD -->


Para agregar más imágenes, añadir nueva línea de

photos[4]="imagenes/foto-4.jpg";

y otra de

textos[4]="Foto-4";


Esta segunda parte entre <body> y </body> donde quiera que aparezca la galería de imágenes:

(Editar lo que está en color rojo)

<!-- Empieza Contenido GALERIA -->
<div class="galeria">
<p class="centrado"><script type="text/javascript">
if (linkornot==1)
document.write('<a href="javascript:transport()">');
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)">')
</script></p>
<p id="elTExto" class="centrado">Esta es la Foto 0</p>
</div>
<p class="centrado"><a href="#" onClick="backward();return false">Anterior</a>
---
<a href="#" onClick="forward();return false">Siguiente</a></p>
<!-- Termina Contenido GALERIA -->


Las palabras "Anterior" y "Siguiente" se pueden reemplazar por imágenes de flechas.


Y por último agregamos lo siguiente en la Hoja de estilo:

(Editar lo que está en color verde)

.galeria {height:201px}
.centrado {text-align:center}


Scripts

Adsense

Enlazar

¿Le ha sido útil esta Página? Ayúdenos a Difundirla...


mini-banner-crear y configurar JPG

mini-banner-crear y configurar GIF

Adsense