Slideshow es una manera práctica
y sencilla para presentar imágenes dentro del blog, por si necesitamos hacer
una demostración en la que se requiera más de una imagen. Nos ahorra espacio y
la presentación puede ser bastante llamativa, sin contar con el hecho de que su
implementación es por demás sencilla y no requiere de muchos conocimientos.
Puedes ver una demostración de las imágenes con slideshow en este demo.
Para implementarlo en el blog
solo debes ir a Diseño, Añadir Gadget, Html Javascript, y pegar el siguiente
código:
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh39JiJ-swZgbJJ0cmyqelGcVzYremVpizwVVaqYoTvipDc4jYpKV6o3yZxxJ0_BkHKmh7Oo6PBikSdYAohrCX_wFINqefxPerTWkRPA094oCjyH1UaMBU7mjmURCEMMBYMnVpVP80rX_c/s300/bloger%2520y%2520bloger%25202.jpg"
var image2=new Image()
image2.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ege-YWI4HcsU5-eCWVNWZf-_ZQrR0MwDLJBaLIAx_Uzv5vK3CDZwsXAkVcaH35yxJJCq8vCh2JmCGNSfuHlqRDb-5IwC8lvG8pauIRKj38Lw6gs-oHKUOBpAr97SRNxK9bLemxEYofs/s300/bloger%2520y%2520bloger.jpg"
var image3=new Image()
image3.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Ck3XJL84MzIf2CcXTfgzwNK2kQkkjdTf88NSfhNaz77Nl5Ee4NhuGJdzXnAaNPyoZOz-boLd_sKoMNKiqWxoK2iD_lRK5spNvrTB9Jx-uBJYQAlsGTDQ-l-CZq4IjPP2ghWe86uDTAU/s300/bloger%2520y%2520bloger.jpeg"
var image4=new Image()
image4.src="https://lh3.googleusercontent.com/-6jBskoWDEwQ/Tz3y2pn_u4I/AAAAAAAAALA/yIcPbUdLmG4/s300/bloger%2520y%2520bloger%25204.jpg"
//-->
<!--
var image1=new Image()
image1.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh39JiJ-swZgbJJ0cmyqelGcVzYremVpizwVVaqYoTvipDc4jYpKV6o3yZxxJ0_BkHKmh7Oo6PBikSdYAohrCX_wFINqefxPerTWkRPA094oCjyH1UaMBU7mjmURCEMMBYMnVpVP80rX_c/s300/bloger%2520y%2520bloger%25202.jpg"
var image2=new Image()
image2.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-ege-YWI4HcsU5-eCWVNWZf-_ZQrR0MwDLJBaLIAx_Uzv5vK3CDZwsXAkVcaH35yxJJCq8vCh2JmCGNSfuHlqRDb-5IwC8lvG8pauIRKj38Lw6gs-oHKUOBpAr97SRNxK9bLemxEYofs/s300/bloger%2520y%2520bloger.jpg"
var image3=new Image()
image3.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-Ck3XJL84MzIf2CcXTfgzwNK2kQkkjdTf88NSfhNaz77Nl5Ee4NhuGJdzXnAaNPyoZOz-boLd_sKoMNKiqWxoK2iD_lRK5spNvrTB9Jx-uBJYQAlsGTDQ-l-CZq4IjPP2ghWe86uDTAU/s300/bloger%2520y%2520bloger.jpeg"
var image4=new Image()
image4.src="https://lh3.googleusercontent.com/-6jBskoWDEwQ/Tz3y2pn_u4I/AAAAAAAAALA/yIcPbUdLmG4/s300/bloger%2520y%2520bloger%25204.jpg"
//-->
</script>
<img src="http://dl.dropbox.com/u/25944020/images11.jpg" name="slide" width="300" height="250" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<4)
step++
else
step=1
//call function "slideit()" every 3 seconds
setTimeout("slideit()",3000)
}
slideit()
//-->
</script>
<img src="http://dl.dropbox.com/u/25944020/images11.jpg" name="slide" width="300" height="250" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<4)
step++
else
step=1
//call function "slideit()" every 3 seconds
setTimeout("slideit()",3000)
}
slideit()
//-->
</script>
Solo debes cambiar lo que aparece
en naranja con la url de tus imágenes.
Para personalizar el gadget
recuerda:
Width es el ancho y
Height es el alto de las
imágenes. No olvides que todas deberán tener el mismo valor en pixeles.
setTimeout("slideit()",3000)
3000 es el valor en milisegundos que demora en cambiar las imágenes; esto aquivale a 3 segundos.
Si quieres aumentar más imágenes
solo deber incluir antes del primer:
//-->
Lo siguiente:
var image5=new Image()
image5.src="http://url-de-tu-nueva-imagen-aqui"
Y cambiar el número 5:
if (step<5)
Sumándole el número de imágenes que
aumentes.
hola y como se hace para que se repita las imagenes? porque cuando sale la ultima imagen , se queda parada
ResponderEliminarjorge gallurt. la repetición de las imágenes es automática, solo asegúrate de copiar bien el código tal como se muestra aquí. Gracias por tu comentario
Eliminar