
Si querias insertar una galería de imágenes ahora es muy fácil con este script.
Te dejo el código:
(Dentro del mismo está aclarado como se configura)
[+/-]Abrir código 1
<center><script type="text/javascript">
//Especificar el ancho (en pixeles)
var sliderwidth="250px"
//Especificar el alto
var sliderheight="150px"
//Podes configurar la velocidad de 1-10)
var slidespeed=2
//configurar el color fondo:
slidebgcolor="#000000"
//Aca pones la dirección de la imagen, mirá que antes se puede poner el vinculo
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img border="0" src="http://img83.imageshack.us/img83/691/37649011bn2.jpg"></a>'
leftrightslide[1]='<a href="http://"><img border="0" src="http://img141.imageshack.us/img141/2835/95022256af9.jpg"></a>'
leftrightslide[2]='<a href="http://"><img border="0" src="http://img156.imageshack.us/img156/7954/56711110sv8.jpg"></a>'
leftrightslide[3]='<a href="http://"><img border="0" src="http://img155.imageshack.us/img155/8238/93160771tx9.jpg"></a>'
leftrightslide[4]='<a href="http://"><img border="0" src="http://img511.imageshack.us/img511/4858/72744070yq2.jpg"></a>'
var imagegap=""
var slideshowgap=5
////ACA NO TOCAR////////////
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width="+sliderwidth+" height="+sliderheight+" name="ns_slidemenu" bgcolor="+slidebgcolor+">')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu2"></layer>')
write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu3"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script></center>
Nota: Se usa desde añadir un elemento de página.
Respuesta: Para modificar alto y ancho mirar al principio del código:
//Especificar el ancho (en pixeles)
var sliderwidth="250px"
//Especificar el alto
var sliderheight="150px"
12 comentarios :
HOLA CESAR SOY UNA FIEL VISITANTE DE TU BLOG APLIQUE ESTE CODIGO Y ME RESULTO PERO ES DEMASIADO PEQUEÑO QUIERO HACERLO MAS GRANDE MODIFICO EL ANCHO Y EL ALTO PERO NOMAS ME SALE UNA FRANJA NEGRA SI ME PUDIERAS HECHAR UNA MANITO DE ANTE MANO GRACIAS.
Hola Kenia!
En el post te aclare donde esta la parte para modificar el tamaño.
Buena suerte!
hola e segido todos tus tutoriales pero no se como insertar los codigos al blogger si puedes ayudarme escribeme a "ruiz2282@hotmail.com" pxfa o mandame un correo para comunicarme con tigo
att luis
hola! estoy casi a punto de llegar a lo que deseo para mi blog: básicamente es lo mismo que esto que acabas de poner aquí pero con flechitas en los lados que te hagan pasar adelante o atrás. Vaya, lo que quisiera tener para mi blog es lo que se puede ver en www.muchocine.net (el menú de estrenos de cartelera).
Crees que puedes ayudarme?
muchas gracias!
Felicitaciones Cesar, por tu blog, tu altruismo y todo lo demás.
Poca gente ayuda a otros de esta manera.
Si me puedes enviar el banner para "Linkearte" en mi blog, te lo agradezco, y de esa forma visitar el blog siempre en busca de cosas nuevas.
Abrazos.
Romer
Hola César. Gracias por todos tus consejos. Resulta que quiero hacer una galería de fotos en una web hecha con dreamwaver. Quisiera poner las fotos pequeñas y cuando se da click a una, se hace grande en la misma página, ya sea en el centro de la página o a un lado de las fotos pequeñas y no he encontrado la forma de hacerlo. Te agradezco de antemano lo que puedas aconsejarme.
hola trate de poner la galeria de images, me resulta todo bien hasta el momento de cliquear la imagen... me sale un mensaje de "ladireccion web no es valida y no puede cargarce", al rpincipio en tu pagina si me funcionaba, pero ahora en el ejemplo que das tambien me sale lo mismo...¿?
que hago mal, que la imagen no se agranda?
Hola!
Suelo venir seguido cuando necesito ayuda de scrips y esas cosas que no entiendo
Andaba necesitando una galeria de imagenes, intenté hacer esto, pero... en la sidebar me sale. Pero, hay alguna manera de hacerla en una entrada en especial?
Es que verás, tengo una entrada por pagina y cada entrada es una seccion ( estilo web ), y necesitaba que la galeria se encahje en una entrada en particular. Lo intenté desde "crear pagina nueva" y no sale. Si en la sidebar
Saludos
Hola, estoy empezando en esto y me gusto mucho el ejemplo, estuve solo tratando de copiar el código a un gadget html java, pero solo me muestra una pantalla negra totalmente, estaré
haciendo algo mal???
Hola cesar, me gusta mucho tu blog! hace poco acabo de implantar es gadget muy interesante y util, con el unico problema esq cuando lo ejecuto en mi blog solo me muestra la primer imagen y las otras no ¿tienes alguna idea de cual podria ser el problema?, saludos y gracias... este ees mi blog: http://softfireinspirat.blogspot.com/
Hola cesar, me gusta mucho tu blog! hace poco acabo de implantar es gadget muy interesante y util, con el unico problema esq cuando lo ejecuto en mi blog solo me muestra la primer imagen y las otras no ¿tienes alguna idea de cual podria ser el problema?, saludos y gracias... este ees mi blog: http://softfireinspirat.blogspot.com/
Hola y gracias por compartir este recurso! en mi blog funciona perfecto en Chrome y en Firefox, pero no así en IE. Te agradezco publiques ayuda! De nuevo gracias desde Uruguay.