[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: jQuery

  • Galerias | jQuery | Scripts

    21 /03 / 2009 - 12:01 am

    Publicado por Nikko.

    • 15
    • 8.710

    Social Link

    Simple Slideshow

    simples.jpg

    Simple Slideshow, otra opción que les permitirá montar sus Slideshow o diapositivas animadas de la forma más simple. Si deseas animar sus encabezados, pero no les agrada la idea de utilizar animaciones en flash, Simple Slideshow puede ser una buena opción a tener en cuenta.

    Ver DemoDescarga – Mas Info Simple Slideshow

    Leer MAS →

  • jQuery | Scripts

    18 /03 / 2009 - 7:54 pm

    Publicado por Nikko.

    • 15
    • 8.088

    Social Link

    jQuery and Google Maps

    jgmaps.jpg

    jQuery and Google Maps, un interesante tutorial para aprovechar aun mas las características que posee Jquery y puedan crear en base a ellas un mashup de Google Maps. El tutorial explica muy bien como comenzar a implementar jQuery en el Interior de los mapas provistos por google. Sin bien los mapas de algunas regiones son realmente muy completos, aquí podremos añadir aun más información, lo que puede ser interesante para algún tipo de proyecto en los cual nos encontremos trabajando, algunos quizás relacionados a Turismo o Sociales en los cuales deseemos añadir aun mas información sobre la ubicación que intentemos mostrar.

    • Paso # 1: Obtener clave API
    • Paso # 2: Carga de Google Maps y jQuery
    • Paso # 3: Crear el Mapa de Google
    • Paso # 4: Cargar el ejemplo de Google Maps
    • Paso # 5: A través de marcadores de Loop y Básicos; Haga clic en Añadir marcadores de eventos

    Ver Demo - Mas Info y Tutorial jQuery and Google Maps by Marc Grabanski

  • 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.514

    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.

    JavaScript:
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
    <script type="text/javascript">
         // URLs usando expresiones regulares que quieres que detecte
       var msgs = [
       // null url : tráfico directo
       {'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
      // Mi url!
       ,{'url':/^http:\/\/(\w+\.)?midominio\.com/, 'msg':null}
       // Otras
       ,{'url':/^http:\/\/(\w+\.)?google\.com/, 'msg':'Welcome googler, Hope you will find what you looking for'}
       ,{'url':/^http:\/\/(\w+\.)?dzone\.com/, 'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
       ,{'url':/^http:\/\/(\w+\.)?digg\.com/, 'msg':'Welcome digger, if you like it please digg it'}
       ,{'url':/^http:\/\/(\w+\.)?propeller\.com/, 'msg':'Welcome propeller user, hope you will like it here'}
       //generic pattern: to show generic message for referrers that you did not specify one for
       // URL genéricas
       ,{'url':/^http:\/\//, 'msg':'Hello their.. Hope you will find what you looking for'}
       ];
       function DetectReferrer(){
          var div = $('#WelcomePlaceHolder');
          // Si no existe la capa no se muestra el mensaje
          if (!div.length) return;
          var ref = document.referrer.toLowerCase();
          var msg = findMatch(ref);
         // Si existe mensaje
          if(msg) {
         // Añade un botón para cerrar
         div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
        $('.CloseButton',div).click(function(){ div.hide() })
         });
          }
       }
       function findMatch(ref) {
          for(var i=0; i<msgs .length; i++)
         if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
        return msgs[i].msg;
          return null;
       }
       
       // Llama al detector de referrers cuando se carga en DOM
       $(DetectReferrer);
    </msgs></script>

    Agregamos el siguiente codigo donde mostraremos los mensajes

    HTML:
    <div id="WelcomePlaceHolder"></div>

    Leer MAS →

  • Galerias | jQuery | Scripts

    17 /02 / 2009 - 6:50 pm

    Publicado por Nikko.

    • 15
    • 8.537

    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 Demo - Descarga - Mas info  Moving Boxes

  • jQuery | Scripts

    16 /02 / 2009 - 7:09 pm

    Publicado por Nikko.

    • 15
    • 3.405

    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:

    JavaScript:
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){

      $("#step li").each(function (i) {
        i = i+1;
        $(this).addClass("item" i);
       });

    });
    </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 →


Pagina 5 de 8«12345678»