Anteriormente publicamos un tutorial sobre cómo agregar el control deslizante de nivo a blogger, pero muchos de ustedes tienen los problemas y lo agregan al blogger de blogger. .
Es por eso que consideré compartir un deslizador / galería de imágenes totalmente personalizable y fácilmente.
Este es un simple deslizador de imágenes con muchas opciones de personalización como dimensiones, reproducción, pausa, intervalo entre la diapositiva siguiente y anterior y algunas otras opciones.
El script de esta galería está tomada de dynamicdrive y he realizado algunos cambios para que pueda agregarlo fácilmente a su blog.
La instalación es un paso, solo tiene que copiar y pegar el código dentro de la sección de contenido de HTML / JavaScript widget, es decir, puede agregarlo como HTML / JavaScript Widget.
Presione el botón rojo a continuación para ver una demostración en vivo del control deslizante.
Si queréis verlo en acción podéis ir a la pagina Demo:
Si queréis instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:
¿Cómo agregar galería de imágenes simples a Blogger Blog?
Ir a Blogger
1-Un clic en “Diseño”
2-Clic en “Añadir un gadget”
3-Busca el widget que dice “HTML-Javascript” y ábrelo
4-Coloca el siguiente codigo en el interior
<style type="text/css">
#simplegallery2 {
//CSS for sample Gallery
position: relative;
visibility: hidden;
border: 5px solid black;
margin: auto;
}
#simplegallery2 .gallerydesctext {
//CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
font-family: calibri;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://helperblogger.ucoz.com/code/simple-img-gallery.js">
</script>
<script type="text/javascript">
var mygallery2=new simpleGallery({
wrapperid: "simplegallery2", //ID of main gallery container,
dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["IMAGE LINK 1 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],
["IMAGE LINK 2 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],
["IMAGE LINK 3 HERE","#", "_new", "IMAGE DESCRIPTION HERE"],
["IMAGE LINK 4 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],
["IMAGE LINK 5 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"]
],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: true,
fadeduration: 1000, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
</script>
<div id="simplegallery2"></div>
#simplegallery2 {
//CSS for sample Gallery
position: relative;
visibility: hidden;
border: 5px solid black;
margin: auto;
}
#simplegallery2 .gallerydesctext {
//CSS for description DIV of Example 1 (if defined)
text-align: left;
padding: 2px 5px;
font-family: calibri;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://helperblogger.ucoz.com/code/simple-img-gallery.js">
</script>
<script type="text/javascript">
var mygallery2=new simpleGallery({
wrapperid: "simplegallery2", //ID of main gallery container,
dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["IMAGE LINK 1 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],
["IMAGE LINK 2 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],
["IMAGE LINK 3 HERE","#", "_new", "IMAGE DESCRIPTION HERE"],
["IMAGE LINK 4 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"],
["IMAGE LINK 5 HERE", "#", "_new", "IMAGE DESCRIPTION HERE"]
],
autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: true,
fadeduration: 1000, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
</script>
<div id="simplegallery2"></div>
Ahora haz estos cambios,
Primero redimensiona todas tus imágenes a una dimensión fija.
Para cambiar la dimensión de la diapositiva simplemente este código en los códigos 400 y 365 anteriores, donde 400 es ancho y 265 es altura.
Reemplaza el ENLACE DE IMAGEN AQUÍ con tus propias imágenes
Reemplace # con el enlace que desea agregar a esa imagen en particular.
Reemplace la descripción de la imagen aquí con una descripción de la imagen. Esta descripción de la imagen aparecerá en la parte superior cuando cualquier usuario coloque el cursor del mouse sobre ella. Si no desea agregar ninguna descripción, simplemente elimine la IMAGEN AQUÍ
Si desea desactivar la reproducción automática de imágenes, simplemente cambie de verdadero a falso
Para cambiar el intervalo de tiempo entre la diapositiva siguiente y la anterior, edite 2500
Para cambiar la fuente de la descripción, luego cambie calibri con su propio nombre de fuente.
Finalmente guarda tus cambios y listo ...
Esa es una galería de imágenes sencilla, espero que le guste este pequeño gadget. Si necesita ayuda con las personalizaciones, no dude en preguntarme. Le responderé tan pronto como el tiempo lo permita.
Fuente; helperblogger
Publicado por;
0 comentarios: