[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: jQuery

  • ColorBox – Plugin jQuery de 12kb para montar lightbox

    colorbox.jpg

    Es realmente magnifico poder contar con diversas opciones a la hora de agregar efectos a nuestros proyectos online. Y es el caso particular de los lightbox, cada día surgen cantidad de alternativas con tantas ventajas como desventajas, y seguramente el motivo, será que es uno de los efectos mas utilizados en el desarrollo web. ColorBox es otro plugin para jQuery 1.3, ligero y personalizable que nos permitirá atractivos lightbox.Características interesantes de ColorBox

    • Soporta la utilización de fotos de forma individual o en grupos, Soporta ajax en línea, y contenido iframed.
    • Diversos Estilos. Apariencia completamente controlada a través de CSS, para que los usuarios puedan dar nuevos estilos a la caja.
    • EL comportamiento de los ajustes puede ser sobre-escrito, sin alterar el archivo de Javascript ColorBox.
    • HTML Totalmente discreto, no requiere cambios en los existentes HTML
    • Efecto atractivo, con discreto degradado.
    • Precarga de imágenes de fondo para evitar la inflamación de unstyled
    • Ligero: sólo 12kbs de JavaScript – sólo 2kbs gzip y minified!
    • Escrito en jQuery .
    • Genera XHTML y CS S válido

    Ver Demos: 1234 – Mas info y Descarga ColorBox lightbox

  • Javascript | jQuery

    24 /02 / 2009 - 11:01 pm

    Publicado por Nikko.

    • 15
    • 2.621

    Social Link

    Mensajes personalizados según la URL de referencia

    jQuery Fun: Greeting Your Site Referrals, un articulo donde encontraran una bonita practica en javascript para detectar desde donde provienen tus visitas y personalizar masajes o saludos sobre la base de la dirección URL de referencia. El estilo del ejemplo notaran que no es muy bonito, pero basándose en este idea pueden hacerlos mucho mas atractivos por su cuenta.

    1. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
    2. <script type="text/javascript">
    3.      // URLs usando expresiones regulares que quieres que detecte
    4.    var msgs = [
    5.    // null url : tráfico directo
    6.    {'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
    7.   // Mi url!
    8.    ,{'url':/^http:\/\/(\w+\.)?midominio\.com/, 'msg':null}
    9.    // Otras
    10.    ,{'url':/^http:\/\/(\w+\.)?google\.com/, 'msg':'Welcome googler, Hope you will find what you looking for'}
    11.    ,{'url':/^http:\/\/(\w+\.)?dzone\.com/, 'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
    12.    ,{'url':/^http:\/\/(\w+\.)?digg\.com/, 'msg':'Welcome digger, if you like it please digg it'}
    13.    ,{'url':/^http:\/\/(\w+\.)?propeller\.com/, 'msg':'Welcome propeller user, hope you will like it here'}
    14.    //generic pattern: to show generic message for referrers that you did not specify one for
    15.    // URL genéricas
    16.    ,{'url':/^http:\/\//, 'msg':'Hello their.. Hope you will find what you looking for'}
    17.    ];
    18.    function DetectReferrer(){
    19.       var div = $('#WelcomePlaceHolder');
    20.       // Si no existe la capa no se muestra el mensaje
    21.       if (!div.length) return;
    22.       var ref = document.referrer.toLowerCase();
    23.       var msg = findMatch(ref);
    24.      // Si existe mensaje
    25.       if(msg) {
    26.      // Añade un botón para cerrar
    27.      div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
    28.     $('.CloseButton',div).click(function(){ div.hide() })
    29.      });
    30.       }
    31.    }
    32.    function findMatch(ref) {
    33.       for(var i=0; i<msgs .length; i++)
    34.      if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
    35.     return msgs[i].msg;
    36.       return null;
    37.    }
    38.    
    39.    // Llama al detector de referrers cuando se carga en DOM
    40.    $(DetectReferrer);
    41. </msgs></script>

    Agregamos el siguiente codigo donde mostraremos los mensajes

    1. <div id="WelcomePlaceHolder"></div>

    Leer MAS →

  • Galerias | jQuery | Scripts

    17 /02 / 2009 - 6:50 pm

    Publicado por Nikko.

    • 15
    • 8.812

    Social Link

    Moving Boxes – Más contenido deslizante con jQuery

    movinboxes.jpg

    Moving Boxes, otra interesante opción para montar cajas con contenido deslizante. La ida original sigue siendo la base de Start/Stop slider que también comentamos. Botones de control a sus laterales para navegar por el contenido de nuestra caja, pero con la diferencia que al encontrase en el centro de la caja el contenido que hayamos introducido, se producirá un Zoom que lo hace muy llamativo.

    Ver DemoDescarga – Mas info  Moving Boxes

  • jQuery | Scripts

    16 /02 / 2009 - 7:09 pm

    Publicado por Nikko.

    • 15
    • 3.498

    Social Link

    Listas secuenciales con jQuery & Css

    listas1.jpg

    jQuery Sequential List, un simple Tips con el que aprenderás a crear listas Secuenciales utilizando jQuery y CSS. Podrás encontrar un tips para crear listas Generales muy vistosas y otro para incorporar estas listas a nuestros bloques de de comentarios.

    Ver Demo – Mas info jQuery Sequential List

    Uso:

    1. <script type="text/javascript" src="jquery.js"></script>
    2.  
    3. <script type="text/javascript">
    4. $(document).ready(function(){
    5.  
    6.   $("#step li").each(function (i) {
    7.     i = i+1;
    8.     $(this).addClass("item" i);
    9.    });
    10.  
    11. });
    12. </script>

    Leer MAS →

  • Simpletip – Plugin jQuery para generar tooltips

    simpletip.jpg

    Si se encuentran con ganas de añadir tooltips a sus proyectos, pero a su vez un poco indecisos de cómo generarlos, o en base a que librería desarrollarlos, tómense un tiempo también para analizar simpletip, una plugin Jquery que permite generar tooltips muy simples pero con muchas opciones como pueden ser los efectos, ubicación, tiempo de muestreo y demás. Es muy liviano, fácil de implementar y puedes cargarlo mediante Ajax si lo deseas. Sin duda lograra cubrir tus necesidades.
    Demos, usos y Descargas en Simpletip

    via pixelco
    Leer MAS →

  • jQuery | Scripts

    07 /02 / 2009 - 8:59 pm

    Publicado por Nikko.

    • 15
    • 2.323

    Social Link

    BigTarget – Ampliar las zonas de Click

    bigtarget.jpg

    Seguramente habrán visto muchos diseños web o Themes WordPress, sobre todo en los estilos Magazine o Newspapers que los artículos se suelen presentar en pequeñas cajas donde encontramos el titulo, una imagen miniatura y un pequeño fragmento de texto que nos da una leve idea de lo que trata el artículo en cuestión. Si deseamos ampliar la lectura de estos artículos por lo general debemos pararnos con nuestro Mouse sobre el titulo o alguna otra opción como puede ser “leer mas”. Si bien estos pequeños link no pasan desapercibido, no estaría mal permitirles a nuestros usuarios dar click en cualquier parte de la caja, sin importar si existe un hipervínculo o no. Si bien hay varias maneras de hacerlo, hay una manera muy práctica utilizando BigTarget.js un script que hará que nuestros usuarios puedan hacer clic en cualquier parte del contenido y navegar a través de la página de destino – que básicamente contiene todo el contenido del bloque de enlace.

    Mas Info y demos  BigTarget

  • Accesible News Slider 2 (v1.4 ) – Noticias Accesible con jQuery

    newslide2.jpg

    Ya hemos hablado de Accesible News Slider, hace largos meses, pero hace días he notado que se ha lanzado la nueva versión Accesible News Slider 2 con muchas mejoras que vale la pena observar. Para aquellos que no han leído el artículo en su momento, Accesible News Slider 2 es una alternativa para montar Slide Horizontales basados en jquery en espacios reducido, ya que nos permite esconder gran parte de los post dejando a la vista solo los últimos 3. Encontraremos un botón que nos dará acceso al resto de los artículos, acompañado de un simple efecto, que lo hace aun más atractivo. Su diseño también ha sido mejorado, lo que es una ventaja para aquellos un poco flojos que escapan al trabajo pesado. Accesible News Slider 2 ha sido testeado en IE 6+, FF 2+, Opera 9+, Safari 3+ | Mac: (I’m looking for testers.)

    Enlace Accesible News Slider 2  – Ver demoDescarga


Pagina 6 de 9123456789