Contenido

Crea una galería de polaroids con CSS3 y jQuery

18 mar

+ 2

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]

Pixastic, librería JS para manipular imagenes

18 dic

+ 1

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.

pixastic

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
			}
		}
	)
}

Documentación / Descargar

Galleriffic, plugin jQuery para crear galerías con los ojos cerrados

17 sep

+ 9

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.

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

11 sep

+ 12

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).

  1. Pixer.Us
  2. Photoshop Express
  3. Pixenate
  4. Picture2Life
  5. Snipshot
  6. Picnik
  7. Cellsea
  8. Pixlr
  9. Improve Your Images
  10. EasyCropper
  11. Phixr
  12. FlauntR
  13. Splashup
  14. Resizr
  15. Online Image Editor

10 expositores de diapositivas desarrollados en Javascript

7 ago

+ 5

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:

  1. SpaceGallery / jQuery / 8kb
  2. noobSlide / MooTools / 4kb
  3. Accesible News Slider / jQuery / 4kb
  4. SmoothGallery / MooTools / 52kb
  5. jQuery Multimedia Portfolio / jQuery + dimensions + UI / 32kb
  6. jCarousel / jQuery / 12kb
  7. Glider / Prototype + Script.aculo.us / 5kb
  8. Carrousel / YUI / 24kb
  9. Carrousel Slideshow / No Framework / 8kb
  10. 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.

Via

Crea una impresinante galería de imagenes con MooTools

3 ago

+ 1

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

25 jul

+ 1

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

31 mar

+ 7

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

17 mar

+ 7

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.

wordpress25_images_control.jpg

WordPress 2.5 integra todo lo que MultipleUploader 4 WordPress e ImagesControlSize pueda ofrecerle al usuario.

MultiUploader

wordpress_multi_uploader.jpg

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

wordpress25_image_size1.jpg

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

wordpress25_image_size_selector.jpg

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

25 feb

+ 15

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.

staticmap.gif

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)