Banner Rotator

Este efecto que veremos a continuación no es nada nuevo, sin embargo es un efecto que me gusta porque resulta vistoso y nada cansino ya que se añade a imágenes muy puntuales como por ejemplo la publicidad tal el ejemplo de Tutorialzine
 

Para ponerlo en práctica necesitamos jQuery. Si ya estamos utilizando la librería no tendremos que añadirla, si por el contrario no la usamos añadiremos justo antes de </head>

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

A continuación añadimos el siguiente script:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

 // Lowering the opacity of all slide in divs
 $('.banner div').css('opacity',0.4);

 // Using the hover method
 $('.banner').hover(function(){

  // Executed on mouseenter
  
  var el = $(this);
  
  // Find all the divs inside the banner div,
  // and animate them with the new size
  
  el.find('div').stop().animate({width:200,height:200},'slow',function(){
   // Show the "Visit Company" text:
   el.find('p').fadeIn('fast');
  });

 },function(){

  // Executed on moseleave

  var el = $(this);
  
  // Hiding the text
  el.find('p').stop(true,true).hide();
  
  // Animating the divs
  el.find('div').stop().animate({width:60,height:60},'fast');

 }).click(function(){
  
  // When clicked, open a tab with the address of the hyperlink
  
  window.open($(this).find('a').attr('href'));
  
 });
});
//]]>
</script>

Los estilos los añadimos como de costumbre justo antes de ]]></b:skin> y veremos que se ha marcado el lugar para poder personalizar a gusto de cada uno respecto a colores:

.bannerHolder {
   background: none repeat scroll 0 0 #ccc; /* color - fondo - bloque */
   border: 1px solid #EEEEEE; /* color de borde del bloque */
   border-radius: 12px 12px 12px 12px;
   float: left;
   height: 310px; /* altura - bloque */
   margin: 20px ;
   padding: 10px 25px;
   width: 270px; /* anchura - bloque */
}
.bannerHolder li {
   display: inline;
   list-style: none outside none;
}
.banner {
   float: left;
   height: 125px;
   margin: 5px;
   overflow: hidden;
   position: relative;
   width: 125px;
   padding:  5px;
}
.banner img {
   border: medium none;
   display: block;
}
.banner div {
   background-color: #000; /* color - efecto */
   border-radius: 100px 100px 100px 100px;
   cursor: pointer;
   height: 60px;
   position: absolute;
   width: 60px;
   z-index: 100;
}
.banner .cornerTL {
   left: -63px;
   top: -63px;
}
.banner .cornerTR {
   right: -63px;
   top: -63px;
}
.banner .cornerBL {
   bottom: -63px;
   left: -63px;
}
.banner .cornerBR {
   bottom: -63px;
   right: -63px;
}
.banner p {
   color: white; /* color del texto */
   text-shadow: 1px 1px 1px #505050; /* sombra - texto */
   cursor: pointer;
   display: none;
   font-family: Tahoma,Arial,Helvetica,sans-serif; /* fuente - texto */
   font-size: 11px; /* tamaño del texto */
   left: 0;
   position: absolute;
   text-align: center;
   top: 57px;
   width: 100%;
   z-index: 200;
}

Añadimos el html justo en el lugar que deseamos mostrar las imágenes con el efecto.

Tenemos un bloque contenedor que es "bannerHolder" y dentro de ese bloque tenemos las imágenes.

<ul class="bannerHolder">

Imágenes

</ul>

Si queremos añadir este mismo ejemplo sin el bloque de fondo simplemente no añadimos bannerHolder ni su respectiva etiqueta de cierre.

<ul class="bannerHolder">
       <li>
  <div class="banner">
  <a href="url-enlace">
 <img src="url-imagen" alt="imagen" width="125" height="125" /></a>

  <p class="companyInfo">Ejemplo-1</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
   </div></li><li>

</ul>

En "Ejemplo-1" es el lugar para añadir un pequeño texto tipo título.

El anterior código es suficiente para una imagen, si deseamos añadir más imágenes añadiremos ese mismo código tantas veces como imágenes deseamos añadir teniendo en cuenta que en caso de añadir el bloque de bannerHolder siempre termina cerrándose con la etiqueta </ul> al final.

Visto en:Tutorialzine