Cómo instalar un Slider con efectos multiples

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Coin Slider: Un slider de imágenes con múltiples efectos

9 de marzo de 2011 | Publicado por El Potro |   

Coin Slider es un slideshow de fotos hecho con jQuery que a diferencia de otros puede mostrar diversos efectos para las transiciones de las imágenes añadiéndole mayor dinamismo a las imágenes.

Estas animaciones podrán hacer una mejor presentación de las imágenes que deseas mostrar y que bien podrán servir para enlazarlas a tus entradas que deseas destacar.

El slider además de tener distintas animaciones, puede tener enlaces, descripciones de las fotos y se podrá navegar a través de ellas ya sea con los enlaces Anterior y Siguiente, o con los botones de abajo.

Para agregarlo en tu blog primero descarga este archivo, descomprímelo y sube el archivo descomprimido a un hosting.
Luego entra en Diseño | Edición de HTML y antes de </head> pega lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
< script src='URL del archivo js' type='text/javascript'/>
< script>$(document).ready(function() {
$(&#39;#CoinSlider&#39;).coinslider({
delay: 3000,
hoverPause: false,
navigation: true,
width: 565,
height: 290,
});
});
< /script>

Agrega donde se indica en color rojo la URL del archivo que subiste previamente.
Ahora antes de ]]></b:skin> pega estos estilos:

.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px;}

El siguiente paso es agregar la estructura del slider, para ello entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí agrega lo siguiente:

<center>
< div id="CoinSlider">

< a href="URL del enlace">
< img src="URL de la imagen"/>
< span>Descripción de la imagen.</span></a>


< a href="URL del enlace"> <img src="URL de la imagen" />
< span>Descripción de la imagen.</span></a>


< a href="URL del enlace"> <img src="URL de la imagen" />
< span>Descripción de la imagen.</span> </a>


< a href="URL del enlace"> <img src="URL de la imagen" />
< span>Descripción de la imagen.</span> </a>


< a href="URL del enlace" ><img src="URL de la imagen" />
< span>Descripción de la imagen.</span></a>


< a href="URL del enlace"> <img src="URL de la imagen" />
< span>Descripción de la imagen.</span></a>

< /div></center>

Cambia la URL del enlace y la URL de la imagen donde se indica. De igual forma puedes agregar una pequeña descripción a las fotos si así lo deseas, sino sólo elimina todo esto:

<span>Descripción de la imagen.</span>

Si quieres añadir más imágenes sólo agrega antes del último </div> otro fragmento como este:

<a href="URL del enlace" ><img src="URL de la imagen" />
< span>Descripción de la imagen.</span></a>

En el primer código hay unas opciones que podemos modificar:
delay: 3000, es el tiempo en milisegundos que durará cada imagen.
hoverPause: false, es el control de pausa que aparecerá al pasar el cursor sobre la imagen, con true se activa.
navigation: true, son los enlaces Anterior y Siguiente que aparecen al pasar el cursor, con false se desactivan.
width: 565, es el ancho del contendor.
height: 290, es el alto del contendor.

Si cambias el ancho del contendor también deberás cambiar el ancho en color verde de los estilos (width: 545px) que es el ancho del área de la descripción de las imágenes.
Si deseas cambiar los textos Anterior y Siguiente necesitarás editar el archivo coin-slider.min.js, buscar esas palabras y cambiarlas por otras.

Sin lugar a duda es un slider que no requiere mayor trabajo y que ofrece resultados bastante atractivos que bien podrán darle mayor presentación a tu blog o página Web.

Autor |WorkShop

Read More

Inserta un slider para artículos destacados

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.


S3Slider es una galería de imágenes para mostrar contenido destacado del blog. Quedan perfectos para los blogs tipo revista y sólo requiere de JQuery y S3Slider.
Puedes ver un ejemplo en este blog de pruebas.

Para ponerlo en tu blog sigue estos pasos:

1. Descarga este archivo, descomprímelo y el archivo S3Slider.js súbelo a un hosting.
2. Entra en Diseño > Edición de HTML y pega antes de </head> lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>< script src='URL del archivo s3Slider.js' type='text/javascript'/>< script type='text/javascript'> $(document).ready(function() { $(&#39;#slider&#39;).s3Slider({ timeOut: 3000 }); });< /script>

3. Cambia lo que está en color verde por la URL del archivo que descargaste y subiste previamente.
4. Ahora antes de ]]></b:skin> pega lo siguiente:

/* S3Slider ----------------------------------------------- */ #slider { width: 550px; /* Ancho del gadget */ height: 300px; /* Alto del gadget */ background:#FFF; position: relative; overflow: hidden; margin-bottom:10px; border:1px solid #d7d0c0; } #sliderContent { width: 550px; /* Ancho del gadget */ position: absolute; top: 0; margin: 0; padding:0; } #sliderContent li{ list-style-type:none; } .sliderImage { float: left; position: relative; display: none; } .sliderImage span { position: absolute; font: 11px Arial, Helvetica; /* Tamaño y tipo de letra */ padding: 10px 13px; width: 550px; /* Ancho del gadget */ background-color: #000; /* Color de fondo del texto */ filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; color: #fff; /* Color del texto */ display: none; } .clear {clear: both;} .bottom { bottom: 0; left: 0; } .top { top: 0; left: 0; }

5. Por último en un elemento HTML/Javascript pega esto:

<div id="slider">< ul id="sliderContent">< li class="sliderImage">< a href="URL de la entrada">< img src="URL de la imagen" /></a>< span class="bottom">Aquí va la descripción de la entrada.</span>< /li>< li class="sliderImage">< a href="URL de la entrada">< img src="URL de la imagen" /></a>< span class="bottom">Aquí va la descripción de la entrada.</span>< /li>< li class="sliderImage">< a href="URL de la entrada">< img src="URL de la imagen" /></a>< span class="bottom">Aquí va la descripción de la entrada.</span>< /li>< div class="clear sliderImage"></div>< /ul>< /div>

6. Ya sólo cambia la URL de la entrada y de la imagen que será la que se muestre en el slide.

Si quisieras agregar más imágenes añade este código por cada imagen que quieras poner:

<li class="sliderImage">
< a href="URL de la entrada">
< img src="URL de la imagen" /></a>
< span class="bottom">Aquí va la descripción de la entrada.</span>
< /li>

Las imágenes cambian cada tres segundos, si quieres modificar el tiempo entre cada una busca en el primer código donde dice timeOut: 3000 y cambia ese número por otro, por ejemplo en cinco segundos sería timeOut: 5000

En el código que pegamos antes de ]]></b:skin> están las indicaciones de dónde se debe modificar el color del texto, el color de fondo, etc.
Si te das cuenta en el caso del tamaño aparece tres veces, por lo que si cambias el tamaño deberás poner el mismo tamaño en los tres lugares donde se pide.

La descripción de la entrada se muestra en la parte de abajo; si deseas que se muestre en la parte de arriba cambia en el último código donde dice class="bottom" por class="top"

Por último toma en cuenta que este gadget trabaja con JQuery así que si ya tienes Scriptaculous no funcionará.

Read More

Instala banners que se rotan en el blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.

Slide o rotador de banners / imágenes en tu blog
Ya hemos visto una forma de introducir una galería de imágenes en el blog para mostrar un grupo de fotografías a modo de slide o presentación.

En esta entrada te presentaré una nueva forma de presentar las imágenes en tu blog y esta vez, crearemos un rotador para banners (logotipos de otros sitios web) de manera que podamos aprovechar el espacio de nuestra barra lateral lo máximo posible.

Para ver el truco en funcionamiento accediendo a este blog de pruebas.


Diseño>Edición de HTML>expandimos artilugios

Diseño - Edición de HTML


Busca la etiqueta </head> y encima añade este código que contiene el CSS necesario y el script:

<style type='text/css'>
#blslideimg {border:1px solid #CCCCCC; height:60px; margin:10px; overflow:hidden; padding:2px; position:relative; width:200px;
}
#blslideimg img{border: none;}</style>
<script src='http://sites.google.com/site/scriptsbalcon/b/blslideimg.txt' type='text/javascript'/>

Ahora guarda la plantilla. Accede a la sección de Diseño, Elementos de página y en un gadget html-javascript introduce esto:

<div id="blslideimg">
<a href="URL BLOG"><img src="URL IMAGEN" title="" /></a>
<a href="URL BLOG"><img src="URL IMAGEN" title="" /></a>
<a href="URL BLOG"><img src="URL IMAGEN" title="" /></a>
<a href="URL BLOG"><img src="URL IMAGEN" title="" /></a>
</div>

Reemplaza URL BLOG por la dirección del blog o la web a enlazar y URL IMAGEN por la dirección del banner o logotipo, en cada línea (que corresponde a un banner).

Si deseas añadir más banners a la "galería" incluye líneas como esta, siempre antes del cierre </div>...

<a href="URL BLOG"><img src="URL IMAGEN" title="" /></a>

Si te fijas bien en el código, las líneas tienen una etiqueta denominada title="". Esto te servirá para mostrar un tooltip o cartelito con texto editable al dejar el cursor un tiempo sobre la imagen. Para mostrar dicho mensaje escríbelo entre las comillas (" y ").

Guarda el gadget una vez hayas terminado de editarlo.

Notas:

Puedes personalizar el ancho y el alto de la galería dependiendo de los banners que vayas a mostrar. Para ello edita el valor 60 de height:60px; (altura) y el valor 200 de width:200px; (anchura).

- El rotador mostrará un borde gris. Para eliminarlo tan solo debes cambiar el valor 1px por 0px en border:1px solid #CCCCCC; (el color, #CCCCCC puedes editarlo usando la tabla de colores, si se da el caso de que prefieres mantenerlo).

Read More

El Slider J Query más sencillo de instalar

Artículo por Olo Man escrito para OloBlogger, visita su blog



¿Tenéis jQuery en vuestro blog y espacio para insertar 10 líneas de código? Sí la respuesta es afirmativa y además queréis tener un carrusel de imágenes automático, este es el código más simple que he visto hasta la fecha y seguro que no hay otro que lo sea mucho más. Si acaso con algún que otro carácter menos, pero pocos, pocos menos.

Ese código que después veremos y una sucesión de imágenes simples metidas dentro de una caja, con un contenedor general común, nos daría este resultado:

1. Instalación JavaScript necesario

Por empezar desde cero, si no tenemos jQueryprimero añadimos esta línea justo después de }]]></b:skin> para cargar esta conocida librería:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>

Una vez seguros de que tenemos la librería en nuestra plantilla, a continuación de esa misma línea añadimos lo que hace que la serie de imágenes funcionen como slider:

<script type="text/javascript">//<![CDATA[
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});
//]]></script>

Podemos guardar los cambios en la plantilla porque eso es todo. Es simple pero veréis que funciona y hace lo que tiene que hacer. Ahora ya sólo tenemos que poner las imágenes dónde queremos que aparezcan, de la manera que veremos a continuación.

2. Crear el slider

Con esto anterior en nuestra plantilla (aunque nada impide ponerlo directamente en un gadget, en una página o incluso en una entrada como veis aquí) ya podremos crear un visor como el que habéis visto arriba. Sólo tenemos que usar esta estructura HTML para añadir las imágenes:

<div id="slider">
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
    <div><img src="URL_IMAGEN1"/></div>
</div>

No sé cómo lo veis pero ya está todo lo necesario.

Para mí esto es bastante ligero y eficiente, mucho más que la mayoría de librerías que se usan quizás demasiado habitualmente.

Ajustes

Los tres últimos números del plugin permiten ajustar algunas cosillas. Todos van expresados en milisegundos (4000 = 4 segundos)

• fadeOut(0): Tiempo en desaparecer la imagen saliente
• fadeIn(1000): Tiempo en aparecer la imagen entrante
• ('#slider');},4000): Tiempo de permanencia de cada imagen

Cómo funciona

Y para los curiosos que quieren aprender cosas...

$('#slider div:gt(0)').hide();
Con gt(x) seleccionamos todos los div a partir del número x. En este caso 0 es el primero, así que lo que hacemos con esta línea es esconder (hide) todas las cajas excepto la primera, que será la imagen inicialmente visible.

setInterval(function(){ [lo que haremos] }, 4000);
Necesitamos reiterar una serie de cosas cada cierto tiempo y eso lo hacemos con setInterval, indicando el tiempo de retardo entre cada serie.

$('#slider div:first-child').fadeOut(0)
Dentro de cada uno de esos intervalos hacemos desaparecer (fadeOut) la primera caja (div:first-child) que haya en la relación de imágenes...

.next('div').fadeIn(1000)
... y hacemos que la siguiente caja (next) aparezca poco a poco (fadeIn).

.end().appendTo('#slider');
Por último tomamos la que hasta ese momento es la primera imagen y la situamos al final (appendTo) de la "lista".

end() resetea el contador de elementos que hicimos avanzar con next(). De esa manera, el primer hijo que antes hicimos desaparecer es el que enviamos al final de la pila y no la imagen que ahora tenemos visible. Para el siguiente ciclo la que hasta este momento era visible (que era la segunda) será la primera y por tanto la que haremos desaparecer.

Referencias sobre las funciones usadas:

• :gt()
• .hide()
• setInterval()
• :first-child
• .fadeOut()
• .fadeIn()
• .end()
• .appendTo()

Variantes y personalización

Como habéis visto no es necesario CSS para que el slider funcione, pero si lo usamos podremos cambiar su aspecto, permitir el uso de imágenes de diferente tamaño, incluir rótulos e incluso mejorar la transición. A continuación algunas ideas.

Cuestión de centímetros

No sabe hablar, pero se fija mucho

Limitar el tamaño del contenedor general y evitar el desbordamiento para que las imágenes más grandes no ocupen más espacio. Y ya que estamos le ponemos unas esquinas redondeadas, un borde y lo centramos. El position:relative nos vendrá bien para otra cosa que haremos después.

#slider {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
border:10px solid #333;
border-radius: 40px;
margin: 0 auto;
padding: 0;
}

Si situamos las cajas padre de las imágenes de manera absoluta con respecto al contenedor general (para eso pusimos antes el relative), estas se dispondrán solapadas una encima de otra. De esta manera al fadeOut le podremos dar un tiempo para que sea "visible" (hemos cambiado el 0 por un 1000) y la transición entre imágenes más suave. Es esa mezcla de imágenes que se produce en la segunda demo.

En las imágenes, el max-width nos sirve para que siempre ocupen todo el ancho y el min-height para que aunque sean deformadas, no se nos quede hueco por debajo cuando sean de menos de 300px de alto.

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0;
border:0;
}

Y ya si queremos añadir otros elementos sobre las imágenes (en este ejemplo un texto), sólo tendremos que etiquetarlos con un span o como párrafo (p) y en el CSS posicionarlos de manera absoluta, ubicándolos en el lugar exacto dónde queramos con top/bottom - left/right.

#slider p {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 400px;
height: 24px;
margin:0;
padding: 5px 0;
color: #eee;
background: #990000;
font-size: 22px;
line-height:22px;
text-align:center;
}

El marcado en el HTML para esto último, incluyendo además un enlace sobre la imagen, sería tal que así:

<div id="slider">
<div><a href="URL_ENLACE1"><img src="URL_IMAGEN1" /></a><p>TEXTO1</p></div>
<div><a href="URL_ENLACE2"><img src="URL_IMAGEN2" /></a><p>TEXTO2</p></div>
<div><a href="URL_ENLACE3"><img src="URL_IMAGEN3" /></a><p>TEXTO3</p></div>
</div>

-Redactado por Olo Man para OloBlogger Link

Read More