Este es un
carrusel de imágenes de
Brian R. Miedlar que muestra las imágenes con un efecto de deslizamiento y regresa al inicio una vez llegado a la última imagen. Está hecho con Scriptaculous así que quienes usen jQuery ya saben que deberán aplicar un
hack para que ambos scripts funcionen.
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->
<script language='javascript' src='URL del archivo os.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo carousel.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo application.js' type='text/javascript'/>
Si ya tienes Scriptaculous y Prototype no hace falta que agregues el código gris, pero el resto sí. Ahí coloca donde se indica en color rojo las URLs de los archivos que subiste previamente.Ahora antes de ]]></b:skin> pega los estilos..carousel {
position:relative;
clear:both;
left:20px; /* Distancia desde la izquierda */
margin-top:10px;
margin-bottom:20px; /* Margen inferior */
border:2px solid #D8D8D8; /* Borde del carrusel */
background-color:#F2F2F2; /* Color de fondo */
}
.carousel .navButton {cursor:pointer; display:block; text-indent:-9999px; background-repeat:none; z-index:10;}
.carousel .container { position:absolute; overflow:hidden; }
.carousel .items { position:absolute; }
#Carousel2 {
height:88px; /* Alto del contenedor */
width:685px; /* Ancho del contenedor */
}
#Carousel2 .container {
left:26px;
top:12px;
width:630px; /* Ancho del contenedor de las imágenes */
height:100px; /* Alto del contenedor de las imágenes */
}
#Carousel2 .items { top:0; left:2px;
width:1700px; /* Ancho total de todas las minaturas */
}
#Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
#Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}
#Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }
#Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJPuaZwgNeCrAAQZMzZ2PofyCUVcxwr9OI7AB8gDkeCo4WcJBnJgZe12-rFjdnHYbaoTiTdf_YTczqIqppb6PcuBLGUY62a5OVzcltyjImVTEDG2AMaWpDxu9eCnhwDh7DFW3v0C9OwAM/s87/button-left.png); }
#Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipQPFUwrqyi7KGGVcBjVXxLTLKlu-Q_2GnDvJYoSEAo4lFF2C6UrVo2iduXdVVRCLOM0rF2JPjBRyXlGUjjW26AQBaKUnISHuROMO9UZSBIe2uI7KHETrj-ZtrVrTCZLiRtIMOCU_WMi8/s87/button-right.png); }
#Carousel2 .item .key { display:none;}
#Carousel2 .item .picture { display:none;}
Después entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript, y ahí pega la estructura del carrusel:<div id="Carousel2" class="carousel">
<div class="button navButton previous" style="display:none;">Atrás</div>
<div class="button navButton next" style="display:none;">Adelante</div>
<div class="container">
<div class="items">
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
</div>
</div>
</div>
Ahí agrega las URLs de los enlaces y las URLs de las imágenes. La URL del enlace es opcional por si deseas que la imagen enlace a alguna entrada.
En el segundo código he puesto en color verde algunos estilos que puedes personalizar tales como el color del borde y el color de fondo. Las flechas son imágenes así que si quieres cambiarles su color o usar otras, tendrás que cambiar las dos URLs que se encuentran en ese código.
El tamaño.
El ancho del carrusel yo lo he puesto de 685px, así que debajo de la cabecera podría quedar muy bien. Si quieres cambiar la longitud entonces tendrás que cambiar el /* Ancho del contenedor */ (que es el tamaño de todo el carrusel), el /* Ancho del contenedor de las imágenes */ (que es el área donde se muestran las miniaturas), y el /* Ancho total de las miniaturas */ que es el ancho real que ocupan todas las miniaturas juntas.
Si agregas más imágenes o si quitas algunas, también tendrás que modificar el ancho total de las miniaturas, de lo contrario se mostrarán algunas imágenes debajo de otras.
Para añadir más imágenes agrega antes de los </div> en color azul un pedazo de código como este:<div class="item">
<div class="key caption">Thumb</div>
<div class="icon">
<a href="URL del enlace"><img width="65" height="65" src="URL de la imagen" /></a></div>
<div class="picture"></div>
</div>
Para alinear el gadget sólo cambia la distancia desde la izquierda (en color verde) por otro valor, uno más grande hará que se recorra hacia la derecha.
El carrusel muestra grupos de 5 imágenes en cada avance o retroceso, si deseas modificar este valor deberás editar el archivo application.js y ahí dentro buscar esta parte:
setSize: 5,
Ese 5 es el número de imágenes que se muestran en cada avance, sólo cámbialo por el que quieras.A modo de consejo: como los scripts son tres pueden ser lentos en cargar así que se recomiendaalojar los scripts en la plantilla.
Office 365, la suite de oficina basada en la nube de Microsoft , se está moviendo la guerra territorial contra Google Docs para el mundo de los negocios con el anuncio de hoy de suscripciones listos para la empresa . Pero usted necesitará una hoja de cálculo para averiguar cuál de las seis opciones diferentes que usted necesita - por no hablar de lo que va a cost.It ' s más fácil de explicar primero lo que las diferentes opciones de suscripción que tienen en común . Todos menos dos - Oficina 365 Pequeños Negocios y Empresa E1 - incluyen versiones de escritorio de Access, Excel , InfoPath , Lync , OneNote , Outlook , PowerPoint, Publisher, SkyDrivePro y Word . Del mismo modo , cada usuario tiene la capacidad de utilizar el servicio en un total de cinco PCs o Macs , a excepción de - de nuevo - Office 365 Pequeños Negocios y Empresa E1.
Si su hijo le preguntó si podía ver la televisión o jugar en el iPad por una hora , lo que usted que lo haga ? Naturalmente , depende de lo que su hijo está haciendo en el iPad , pero no le pedirá su instinto de responder de una manera determinada ? Esa pregunta se pide de mí todo el tiempo con mi hijo y mi primer pensamiento es siempre el televisor.
