Una genial galería de gravedad de Instagram

Hoy vamos a hacer algo totalmente divertido:una galería de "gravedad". Este será un script que ejecuta una búsqueda en Instagram, obtiene y muestra las fotos en una cuadrícula y luego usa la biblioteca Box2D para simular interacciones físicas entre ellas. ¡Y todo esto en menos de 40 líneas de JS!

Veamos cómo se hace esto.

La idea

Usaremos dos complementos jQuery para hacer el trabajo pesado por nosotros:

  • Spectragram:este complemento manejará la comunicación con la API de Instagram (solo necesitamos darle un token de acceso, más sobre eso en un momento). Solo lo usaremos para buscar fotos recientes, pero puede hacer mucho más;
  • jQuery Gravity:este complemento es un envoltorio amigable para la biblioteca de física Box2D de código abierto, escrito originalmente en C++ y adaptado a muchos otros lenguajes, incluido JavaScript.

Todo lo que queda es escribir el código adhesivo que hará que funcionen bien juntos.

Obtención de un token de acceso a Instagram

Instagram requiere que cada solicitud a su API esté firmada con un token de acceso válido. Para obtener dicho token, debe registrar una aplicación desde su consola de desarrollador (instrucciones). Introduce la URL de tu sitio en los campos "Sitio web" y "OAuth redirect_uri". No los usaremos, pero son necesarios para el registro. Cuando envíe su formulario, obtendrá una identificación de cliente y un secreto de cliente . Copie la identificación del cliente en algún lugar, ya que la necesitará en un momento.

Ahora puede obtener un token de acceso. No se preocupe, esto no es nada difícil:simplemente abra una nueva pestaña en su navegador y visite esta URL:

https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

Reemplace la parte CLIENTE-ID con la id del cliente que copió arriba y REDIRECT-URL con la dirección de su sitio. Esto lo llevará a una pantalla de permiso. Después de dar su autorización, será redirigido a una dirección como esta:

http://your-redirect-uri#access_token=27600791.f59def8.2d064937f95f42d6a782f831faaa50f1

¡Felicitaciones, ahora tiene un token de acceso! Lo usaremos en breve.

El HTML

El HTML no puede ser mucho más simple que esto:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Instagram "Gravity" Gallery | Tutorialzine Demo</title>

        <!-- CSS Includes -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Cookie" />
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <h1>Instagram Gallery</h1>

        <ul id="gallery">
            <!-- The instagram photos will go here as <li> elements -->
        </ul>

        <a href="#" id="gravityButton">Start!</a>

        <!-- JavaScript includes -->
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="assets/js/spectragram.min.js"></script>
        <script src="assets/js/jGravity-min.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

Todo lo que tenemos son algunos archivos CSS vinculados en el encabezado (incluida una fuente de Google Web Fonts) y algunos archivos JS en el pie de página (jQuery con dos complementos y el archivo script.js que escribiremos a continuación).

Las fotos se insertarán en la #gallery div, y el #gravityButton activará el complemento jQuery Gravity.

El código jQuery

Y aquí está el código para hacer que la galería funcione:

activos/js/script.js

$(function(){

    // Configure the Spectragram plugin. Follow the instructions
    // in the tutorial on how to generate an access token
    jQuery.fn.spectragram.accessData = {
        accessToken: 'YOUR-ACCESS-TOKEN',
        clientID: 'CLIENT-ID'
    };

    // Run a search about 'coffee' on instagram
    // and display the results
    $('#gallery').spectragram('getRecentTagged',{
        query: 'coffee',
        max:6
    });

    $('#gravityButton').click(function(e){
        e.preventDefault();

        // Turn on the gravity!
        $('body').jGravity({
            target: '#gallery li',
            ignoreClass: 'ignoreMe',
            weight: 25,
            depth: 5,
            drag: true
        });

        // Disable clicking on the photos (so they can
        // be dragged without redirecting the browser)
        $('#gallery li').click(function(e){
            e.preventDefault()
        });

        // Remove some of the elements as they get in the way
        $('footer, #gravityButton').remove();
    });

});

En la parte superior de este archivo, debe pasar su token de acceso y la identificación del cliente que obtuvo anteriormente, para que el complemento de espectrograma pueda hacer su trabajo. Después de esto, llama al complemento con una cadena de búsqueda y un número máximo de resultados para devolver.

Por último, escuchamos los clics en el #gravityButton y llame al complemento jGravity. Es una buena idea evitar hacer clic en las fotos, ya que de lo contrario es casi imposible arrastrarlas sin abrirlas en una pestaña nueva.

¡Con esto, nuestra genial galería de "gravedad" está completa!

¡Listo!

Normalmente trato de dar algunos usos prácticos de nuestros tutoriales en la conclusión, pero esta vez simplemente no hay ninguno. Sin embargo, ¡seguro que fue un experimento divertido!