Fotonotes – JavaScript para agregar notas en imágenes online al estilo Flickr

Publicado por Nikko el dia 6 Nov 2007 - Guardado en Fotografia, Javascript, Scripts Leido 1,384 Veces

Photo Notes es una librería JavaScript que nos permite agregar pequeñas notas a nuestras imágenes al estilo Flickr, pero lo mejor es que nos permite visualizar en tiempo real, actualizar, y manipular nuestras notas online.

Ver demo - Descarga Completa Version Oficial - Ver demo oficial

Descarga JavaScript - PhotoNotes.js
Descarga CSS - PhotoNotes.css

Utilizando el código es bastante sencillo: En nuestro ejemplo..demo

En nuestro encabezado

HTML:
<script src="foot/PhotoNotes.js" type="text/javascript"></script>
</p>
<link href="foot/PhotoNotes.css" rel="stylesheet" type="text/css">

Estructura
Boton agregar texto

HTML:
<input name="button" type="button" style="margin-left: 30px;" onClick="AddNote();" value="agregar texto" />

Nuestra imagen y nuestro script

HTML:
<br>
            <div class="Photo fn-container" id="PhotoContainer">
                <img src="foot/0.jpg" width="300" height="243" galleryimg="no">
            <br>
            <script>
                /* create the Photo Note Container */
                var notes = new PhotoNoteContainer(document.getElementById('PhotoContainer'));
               
                /* create a couple of notes, and add them to the container */
                var note1 = new PhotoNote('boca',3,new PhotoNoteRect( 180,113,60,60));
                note1.onsave = function (note) { return 1; };
                note1.ondelete = function (note) { return true; };
               
                var note2 = new PhotoNote('nariz',3,new PhotoNoteRect(259,111,15,15));
                note2.onsave = function (note) { return 1; };
                note2.ondelete = function (note) { return true; };
               
                notes.AddNote(note1);
                notes.AddNote(note2);
               
                function AddNote()
                {
                    var newNote = new PhotoNote('Agrega tu texto y acomodalo en una seccion.',-1,new PhotoNoteRect(10,10,50,50));
                    newNote.onsave = function (note) { return 1; };
                    newNote.ondelete = function (note) { return true; };
                    notes.AddNote(newNote);
                    newNote.Select();
                }
               
       
            </script>
</div>

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1142 posts en Xyberneticos - Leer todos mis articulos Nikko

  1. zap - Gravatar

    zap

    06-11-2007

    Permalink

    esta chulo, pero como se hace para que se queden grabados los comentarios?

    Un saludo!

  2. [...] nos recomienda y nos enseña a usar Fotonotes, una librería JavaScript que nos permite agregar pequeñas notas de texto a las [...]

  3. Luis - Gravatar

    Luis

    06-11-2007

    Permalink

    Podriamos conbinar esto con las galerias creadas con piccasa?? si es posible podias esplicarnos como

  4. Starky - Gravatar

    Starky

    06-11-2007

    Permalink

    Interesante! Justo estaba buscando algo así para un proyecto.

    Para grabar comentarios habrá que hacer uso del evento onsave, y entonces utilizar AJAX para enviar los datos y grabarlos en una BD...

  5. Diego Lozano - Gravatar

    Diego Lozano

    06-11-2007

    Permalink

    ¿COMO SE HACE PARA GUARDAR LOS TEXTOS?... ALGUIEN QUE SUGIERA UN STEP-BY-STEP...
    MUY BUEN PROYECTO... ENHORABUENA...

  6. [...] mouseover para imagenes conosco de esa variable, pero estoy buscando un script... estaba viendo



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: