Tag Archive for: jquery

19Nov 2010 4 Comments

Jquery: Mini galería de imágenes

Categories: AJAX - Tags:

Esta es una pequeña galería de imágenes ideal para mostrar por ejemplo varias fotos de un producto en una tienda virtual, pero con una pequeña animación para hacerlo más atractivo.

La implementación es muy sencilla como pueden ver:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="gallery">
    <div id="gallery_nav">
        <a rel="img1" href="javascript:;"><img src="iphone_1.png" /></a>
        <a rel="img2" href="javascript:;"><img src="iphone_2.png" /></a>
        <a rel="img3" href="javascript:;"><img src="iphone_3.png" /></a>
        <a rel="img4" href="javascript:;"><img src="iphone_4.png" /></a>
    </div>
 
    <div id="gallery_output">
        <img id="img1" src="iphone_1b.jpg" />
        <img id="img2" src="iphone_2b.jpg" />
        <img id="img3" src="iphone_3b.jpg" />
        <img id="img4" src="iphone_4b.jpg" />
    </div>
 
    <div class="clear"></div>
</div>

Y el javascript para hacerla funcionar:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
    $("#gallery_output img").not(":first").hide();
 
    $("#gallery a").click(function() {
        if ( $("#" + this.rel).is(":hidden") ) {
            $("#gallery_output img").slideUp();
            $("#" + this.rel).slideDown();
        }
    });
});

Puedes descargar el código fuente AQUI y ver una demo AQUI

19Oct 2010 0 Comments

Jquery: Simple WYSIWYG editor

Categories: html, javascript - Tags: , ,

Jquery es sin lugar a dudas uno de los mejores sino el mejor framework ajax principalmente por lo sencillo que es de aprender y por la enorme variedad de plugins que le dan más potencia.

Les presento un plugin interesante llamado jWYSIWYG fue desarrollado teniendo como metas hacerlo liviano, rápido, que aproveche las ventajas de ajax y que sea fácil de implementar.

Si cuentas con un sitio que requiere un editor sencillo con las funciones básicas entonces este es el editor ideal, para cosas así no tendría sentido usar el bastante pesado CKEditor o similares.

Lo puedes descargar AQUI

11Oct 2010 1 Comment

Jquery: Invocar dinamicamente JSONP

Categories: AJAX, javascript - Tags: ,

Hace poco encontré un interesante tutorial en nettuts que explica como usar jsonp para mostrar los último en twitter sin embargo este mismo script puede ser usado con cualquier origen de datos jsonp para ello basta con cambiar los nombres de las variables.

La estructura

Lo primero es crear nuestro esqueleto HTML donde vamos a mostrar los datos

1
2
<h2> Latest Tweets </h2>
    <ul id="tweets"> </ul>

AJAX para mostrar JSONP

Luego de incluir la librería jquery debemos buscar los últimos mensajes en twitter para esto usamos el siguiente script:

1
2
3
4
5
6
7
8
9
10
(function() {    
        var UpdatePanel = {
            init : function(options) {
                this.options = $.extend({
                    interval : 5000,
                    number : 3                 
                }, options);

                this.updater();
            },

Aqui vamos definiendo algunos parámetros como por ejemplo el tiempo para actualizarse (5000), la cantidad de elementos (3)

1
2
3
4
5
6
7
updater : function() {
                (function updateBox() {
                    this.timer = setTimeout(function() {
                        updateIt();
                        updateBox();
                    }, UpdatePanel.options.interval);
                })();

El sgte. paso es definir la función updater la cual a su vez va a invocar a updateIt y updateBox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
updateIt();

                function updateIt() {
                    $.ajax({
                                                /// tipo de llamada AJAX, url, y tipo JSONP
                        type : 'GET',
                        url : UpdatePanel.options.url,
                        dataType : 'jsonp',

                        error : function() {},
                                                // Si se consiguen los datos debe actualizar los resultados
                        success : function(results) {
                            var theTweets = '',
                                 elem = UpdatePanel.options.elem.empty();

                            $.each(results.results, function(index, tweet) {                       
                                if ( index === UpdatePanel.options.number ) {
                                    return false;
                                }
                                else {
                                                                        // Definimos lo que vamos a mostrar
                                    theTweets += '<li>' + tweet.text + '</li>';
                                }
                            });
                                                        // Finalmente añadimos los ultimos comentarios
                            elem.append(theTweets);
                        }
                    });

Aqui invocamos y definimos la función updateIt();

1
2
3
4
5
6
UpdatePanel.init({
        interval : 5000,
        number : 5,
        url : "http://search.twitter.com/search.json?q=batman",
        elem : $('#tweets')
    });

Finalmente vamos a inicializar nuestro objeto, definiendo los parámetros respectivos además del lugar donde se mostrarán los útimos mensajes

Pueden ver el código completo AQUI

Y el ejemplo funcionado AQUI

04Oct 2010 0 Comments

Jquery: Chat estilo Facebook o Gmail

Categories: javascript - Tags: ,

Yo prefiero el messenger o los sistemas de asistencia en línea pero si estás buscando algo menos complicado que no requiera instalar ningún software adicional puedes probar con este práctico chat al estilo Facebook o Gmail usando jquery.

Cuenta con algunas funciones interesantes como:

  • Mantener la conversación aunque se recargue la página
  • Opciones de minimizar y cerrar
  • Autoresize para los cuadros de texto
  • Fácil de integrar

Pueden descargarlo AQUI

27Sep 2010 1 Comment

Jquery: Autocompletar Estilo Facebook

Categories: AJAX - Tags:

He probado varios plugins de autocompletar usando jquery lo interesante de este es que permite hacer listados como cuando enviamos un correo en hotmail y además de autocompletar lo va agregando a una lista de la que podemos borrarlo de forma simple.

Personalmente me parece muy intuitivo y fácil de implementar, pueden leer un poco más y descargarlo con un ejemplo AQUI

Y pueden dar una mirada a la demo AQUI

Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi