Interesante desarrollo con jQuery usando las propiedades de CSS3 que dan como lugar a este espectacular galería de Polaroids completamente dinámica. Por el momento únicamente funciona en Safari/Webkit, Chrome y Firefox 3.1.[Demo][Descargar]
Contenido
Crea una galería de polaroids con CSS3 y jQuery
aNieto2k hace 5377 días en: Asides, CSS, estandares, javascript, Programacion, web, webdev
Pixastic, librería JS para manipular imagenes
aNieto2k hace 5467 días en: estandares, javascript, Programacion, web, webdev
Pixastic es una librería desarrollada en Javascript con la que será posible hacer un Photoshop Online en tu propia web. Usando las propiedades del elemento <canvas />
que únicamente tienen disponible los navegadores como Firefox 2+, Opera 9.5+ y Safari/WebKit con la ultima versión disponible.
Esta librería nos permite aplicarle efectos a nuestras imagenes en tiempo real con una velocidad similar a la que nos ofrecen las herramientas de escritorio. Nos han montado un ejemplo para que podamos verlo funcionando y la verdad es que me ha sorprendido la velocidad con la que se aplicaban los efectos.
var img = document.getElement("myImage"); // get the image element
if (img.complete) { // make sure the image is fully loaded
Pixastic.process(
img,
"brightness", // brightness/contrast adjustment
{ // options object
"brightness" : 60, // set brightness option value to 60
"contrast" : 0.5, // set contrast option value to 0.5,
"rect" : { // apply the effect to this region only
"left" : 100,
"right" : 100,
"width" : 200,
"height" : 150
}
}
)
}
Galleriffic, plugin jQuery para crear galerías con los ojos cerrados
aNieto2k hace 5559 días en: javascript, Programacion, webdev
Si aún no has hecho una galería en condiciones es por que no has querido. Con la cantidad de plugis, aplicaciones y códigos que os he ido mostrando habéis tenido posibilidad, pero si así y todo nunca os habéis aventurado o simplemente no hacía falta hacerlas, os recomienda Galleriffic.
Se trata de un plugin desarrollado sobre jQuery, que permite que crear una galería de imagenes con los ojos cerrados.
¿Como montarla?
Primero hemos de crear el contendor en el que irán las imagenes y controles:
<div id="content"> <div id="controls"></div> <div id="slideshow"></div> <div class="embox"> <div id="download"><a id="download-link" class="download">Download Original</a></div> <div id="image-title"></div> <div id="image-desc"></div> </div> </div> <div id="navigation"></div>
Una vez ya declarada la estructura de nuestra galería únicamente tendremos que indicar las imagenes que queremos mostrar, para ello usaremos Javascript.
var data = [ { slide: 'http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg', thumb: 'http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg', original: 'http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg', title: 'Title #0', description: 'Description' }, ... ];
Así, todas las imágenes que deseemos, indicando un título y una descripción que veremos en parte inferior de la galería.
$(document).ready(function() { var gallery = $(document).galleriffic.init(data, { delay: 2000, numThumbs: 12, imageContainerSel: '#slideshow', thumbsContainerSel: '#navigation', controlsContainerSel: '#controls', titleContainerSel: '#image-title', descContainerSel: '#image-desc', downloadLinkSel: 'a#download-link' }); });
Una vez definidas las imágenes solo nos queda indicar mediante jQuery que elementos interfieren en la galería, el número de miniaturas y el tiempo que tarda la transición de los efectos.
Personalmente no es de las que más me gusten, pero es realmente fácil.
15 editores de imágenes online gratuitos
aNieto2k hace 5565 días en: webdev
Las aplicaciones online están invadiendo Internet, con la intención de convertirse en sustitutos de las aplicaciones de escritorio más famosas.
Los editores de imagenes intentan plantarle cara a aplicaciones como Photoshop, GIMP, Pixelmator,… aún les queda un largo camino para poder ofrecer las funcionalidades que sus parientes de escritorio, pero poco a poco van cogiendo forma y ofreciendo una funcionalidad básica (y en ocasiones no tan básica :D).
10 expositores de diapositivas desarrollados en Javascript
aNieto2k hace 5600 días en: javascript, Programacion, webdev
Cuando queremos mostrar una galería de imagenes, siempre podemos optar por un sistema que nos las vaya mostrando como si de diapositivas se trataran, sin necesidad de interactuar (o muy poco) e ir viendolas una a una. Javascript es el lenguaje perfecto para ello ya que nos permite añadir dinamísmo de una forma rápida y sencilla, además gracias a los frameworks de los que disponemos en la actualidad, esta tarea es todavía más fácil.
Veamos 10 galerías dinámicas para usar en nuestras aplicaciones:
- SpaceGallery / jQuery / 8kb
- noobSlide / MooTools / 4kb
- Accesible News Slider / jQuery / 4kb
- SmoothGallery / MooTools / 52kb
- jQuery Multimedia Portfolio / jQuery + dimensions + UI / 32kb
- jCarousel / jQuery / 12kb
- Glider / Prototype + Script.aculo.us / 5kb
- Carrousel / YUI / 24kb
- Carrousel Slideshow / No Framework / 8kb
- Carousel.us / Prototype + Script.aculo.us (o MooTools) / 8kb
Los pesos de los scripts solo hacen referencia al JS de la galería, los CSS, Imagenes, y frameworks no los he contado.
Crea una impresinante galería de imagenes con MooTools
aNieto2k hace 5604 días en: Asides, javascript, Programacion, webdev
Los chicos de NETTUTS nos explican paso a paso como hemos de desarrollar un impresionante galería de fotos usando MooTools. Como es de esperar, la galería está cargada de una gran cantidad de efectos y funcionalidades que hacen muy vistoso el resultado. [Demo][Descargar]
SpaceGallery, la galería al estilo TimeMachine de jQuery
aNieto2k hace 5613 días en: Asides, javascript, Programacion, webdev
SpaceGallery, es un plugin para jQuery que nos permite crear galerías de imagenes usando un efecto similar al usado en TimeMachine de Leopard para mostrar las diferentes pantallas salvadas. El efecto es realmente bonito aunque dependiendo del tamaño de las imagenes, la fluidez se vé resentida. [Demo][Descargar]
33 galerías de imagenes javascript y flash
aNieto2k hace 5729 días en: Asides, flash, javascript, Programacion, webdev
Si estás pensando en usar una galería de imagenes para tu proyecto, revisa estas 33 galerías de imagenes desarrolladas, algunas en Javascript y otras en Flash, que seguro te ayudarán a ahorrarte unos minutos de elección.
WordPress 2.5: Trabajando con Imagenes
aNieto2k hace 5743 días en: Wordpress
Unos de los puntos flacos de WordPress siempre ha sido la dificultad de trabajar con imagenes, por ello, plugins como MultiUploader 4 WordPress y ImagesControlSize han sido de los plugins más descargados de la web. Con ellos podíamos corregir de forma fácil y cómoda ciertas carencias de WordPress.
Este fin de semana he estado revisando el código de WordPress para ver como migraba estos plugins a la nueva versión. Tras 5 min revisando el código me ha dado por mirar el funcionamiento actual desde el Media Library para ver que tal funcionaba con los cambios de hoy y bueno, he llegado a la conclusión de que no he de hacer nada.
WordPress 2.5 integra todo lo que MultipleUploader 4 WordPress e ImagesControlSize pueda ofrecerle al usuario.
MultiUploader
Mediante SWFUpload y jQuery, consiguen que subir multiples imagenes a nuestro WordPress sea tan fácil como seleccionarlas desde el componente del navegador.
Tamaño de las miniaturas
Para solucionar el problema de las miniaturas, WordPress ha añadido una opción al dashboard para gestionar el tamaño de dos posibles miniaturas, thumbnail y medium size. Para encontrar dicha opción, nos iremos a Settings > Writing
Despues, desde el panel de insercción de imagenes, podremos seleccionar entre las 3 posibilidades existentes, thumbnail, medium y full.
¿Cuando saldrá?
Pues la verdad, es que desde que Alex publicó que no saldría la semana pasada, he visto como el SVN se ha revolucionado a la orden de 20-50 ficheros modificados diariamente. Personalmente lo veo muy justo para que este Lunes (osea mañana) salga, pero no pondría la mano el fuego en que no lo vayan a sacar… así que … tendremos que esperar y ver como evoluciona el tema.
Google Maps sin Javascript
aNieto2k hace 5764 días en: Curiosidades, Programacion, webdev
Google Maps es la herramienta de Google que ha revolucionado la idea de los mashups en Internet. Gracias a la geolocalicación, aplicaciones como Panorámio son posibles. Algo que se echaba en falta era la posibilidad de usar los mapas como imagenes estáticas, y ahora eso es posible.
Para usar estas imagenes necesitaremos disponer de una key, que obtendremos al registrar nuestro sitio en Google Maps API. Una vez con esta key, podremos obtener la imagene estática como si de una imagen externa a nuestro server se tratara.
<img src="http://maps.google.com/staticmap?center=47.238336,8.827171&zoom=12&markers=40.416741,-3.70325,red&size=512x512&key=MAPS_API_KEY">
Si descomponemos la URL veremos los diferente parámetros que intervienen y con los que podemos personalizar nuestro gráfico.
- center: //Centro de la imagen (ej: 0.0000,0.0000)
- zoom: //Zoom que se le aplica a la imagen, de 0 a 19 (0 más lejos, 19 más cerca)
- size: //Tamaño de la imagen en pixeles (máximo 512×512)
- maptype: //Tipo de mapa (roadmap => Mapa para páginas web, mobile => Mapa para bajas resoluciones)
- markers: //Marcadores dentro del mapa. (ej: markers=40.702147,-74.015794,blues|40.711614,-74.012318,green)