JavaScript

Presentation Cycle: Presentaciones dinámicas con barra de progreso

Comments
publicado el 25 de January del 2010 bajo , , , , , .

Presentation Cycle es un plugin de jQuery creado por Gaya Kessler que nos hará presentaciones o transiciones de imágenes con texto y una barra de progreso.

En el ejemplo podemos ver el funcionamiento de este plugin en 3 diferentes formas, la básica, una minimalista y otra aún mas minimalista.

Para implementarlo en una página debemos de incluir en el header las hojas de estilo y archivos del script y del jQuery: Continuar »

Tutoriales

Menú superior desplegable con jQuery

Comments
publicado el 18 de May del 2008 bajo , , , , , , .

 

Las ventajas de un menú superior desplegable es que nos permite ofrecerle al usuario una serie de accesos directos a los enlaces más importante de nuestra web de forma que no estén continuamente en pantalla si no que solo se desplieguen cuando el usuario desee.

Para hacer este menú hemos utilizado la librería jQuery, para conseguir ese efecto. Para aplicarlo en nuestra web tenemos que incluir el código Javascript y la llamada a la librería entre las etiquetas <head></head> de la siguiente forma:

[COPIAR]
Código PHP (Copiar):
  1. <script type="text/javascript" src="jquery.js"></script>  <!-- Libreria jQuery -->
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4.  
  5.     $(".btn-slide").click(function(){
  6.         $("#panel").slideToggle("slow");
  7.         $(this).toggleClass("active"); return false;
  8.     });
  9.    
  10.     
  11. });
  12. </script>

El código html quedaría de la siguiente forma:

[COPIAR]
Código HTML (Copiar):
  1. <div id="panel">
  2.     <ul class="list">
  3.         <li><a href="#">Inicio</a></li>
  4.         <li><a href="#">Contacto</a></li>
  5.         <li><a href="#">Portafolio</a></li>
  6.         <li><a href="#">Sobre...</a></li>
  7.         <li><a href="#">Ayuda</a></li>
  8.         <li class="buscar"><input value="Buscar" /></li>
  9.     </ul>
  10.     <div class="clear"></div>
  11. </div>
  12.  
  13. <p class="slide"><a href="#" class="btn-slide">Men&uacute;</a></p>

Y por último necesitamos darle estilo mediante CSS quedando de la siguiente forma:

[COPIAR]
Código CSS (Copiar):
  1. #panel {
  2.     background: #CCC093;
  3.     height: 50px;
  4.     display: none;
  5. }
  6. .slide {
  7.     margin: 0;
  8.     padding: 0 0 0 5px;
  9.     border-top: solid 4px #825948;
  10.     height: 40px;
  11. }
  12. .btn-slide {
  13.     float: left;
  14.     background: #825948 url(white-arrow.gif) no-repeat right -50px;
  15.     text-align: center;
  16.     width: 144px;
  17.     height: 31px;
  18.     padding: 10px 10px 0 0;
  19.     margin: 0 auto;
  20.     display: block;
  21.     font: bold 120%/100% Arial, Helvetica, sans-serif;
  22.     color: #fff;
  23.     text-decoration: none;
  24. }
  25. .active {
  26.     background-position: right 12px;
  27. }
  28.  
  29. ul.list {margin: 0px; padding: 16px 0px 0px 10px; list-style: none;}
  30. ul.list li {float: left; width: auto;}
  31. ul.list a {text-decoration: none; background: #453027; margin: 5px; padding: 4px;}
  32. ul.list a:hover {text-decoration: none; background: #825948;}
  33.  
  34. ul.list li.buscar {float: right; margin-right: 5px;}
  35. ul.list li.buscar input {background-color: #453027; border: 0px; color: #CCC093; font-size: 18px; margin: 0px; width: 300px;}

Si queréis ver un ejemplo de como queda, tenéis esta página disponible. La librería jQuery la tenéis aquí.

JavaScript Recursos

FancyBox, un sustituto de Lightbox con estilo

Comments
publicado el 31 de March del 2008 bajo , , , , , .

Después de Lightbox han salido muchas alternativas similares que no merece la pena nombrar, pero FancyBox a sabido destacar un diseño increíble.

FancyBox funciona con la librería jQuery y funciona en la mayoría de los navegadores. Esta testado en Intrenet Explorer 6 y 7 además de Firefox.

Permite hacer grupos de imágenes ,galerías, e ir cambiando de una a otra con dos flechas situadas en la parte inferior del recuadro, además permite añadir descripción a las imágenes y configurar varias animaciones a la hora de cerrar las imágenes.

Por ahora se encuentra en versión beta 2, como todo en internet, pero funciona correctamente. Por cierto, aqui teneís una demo.

Más noticias & Buscar »