Galerias, Fotografia, Diseño Web

Spacegallery, plugin jQuery que nos permitirá montar a nuestros proyectos una galería de imágenes al mejor estilo time machine de Leopard.
Ver Demo - Descarga jQuery, Javscript files, CSS files, images, examples and instructions.
Instalacion:
Realizar la llamada desde nuestro encabezado. Copiando y pegando el siguiente código dentro de nuestras etiquetas < Head >…
JavaScript:
-
<link rel="stylesheet" media="screen" type="text/css" href="css/spacegallery.css" />
-
<script type="text/javascript" src="js/eye.js"></script>
-
<script type="text/javascript" src="js/utils.js"></script>
-
<script type="text/javascript" src="js/spacegallery.js"></script>
La estructura
HTML:
-
<div id="myGallery" class="spacegallery">
-
<img src="images/foto.jpg" />
-
<img src="images/foto.jpg" />
-
<img src="images/foto.jpg" />
-
<img src="images/foto.jpg" />
-
</div>
Compartelo
Galerias, Herramientas, Fotografia, Generadores

Para aquellos que disfrutarían compartiendo sus imágenes de Flickr de una forma totalmente diferente les presento PicsViewr, una aplicación online que nos permitirá crear slideshows a partir de nuestras imágenes de Flickr. Simplemente es necesario ingresar nuestro nombre de usuario en Flickr, dar al botón “GO”, y ya comenzaremos a ver diferentes opciones y diversos efectos para compartir muestras imágenes. Cada opción que se nos presenta tendrá una URL única, por lo tanto, en caso de desearlo, podremos compartir todas ellas intercalando estas direcciones con nuestros amigos. Los resultados son muy bonitos, y para aquellos que deseaban conseguir resultados similares y no tenían los conocimientos para hacerlo o bien el tiempo para investigar al respecto, PicsViewr es una opción extraordinaria, ya que podremos generarlos en tan solo 7 segundos (comprobados).
Enlace PicsViewr - Demos
Compartelo
Javascript, Scripts, Galerias, Diseño Web

DhoniShow otro script desarrollado para montar slideshows a tus proyectos Web. Utilizarlo es realmente simple, requiere para su buen funcionamiento prototype 1.5+ y Script.aculo.us (opcional), sin olvidar el script "dhonishow.js". Algo interesante, es que si als transiciones que realizara Dhonishow por defecto consideras que no son suficientes, podrás manipular algunos parámetros dentro del script o por supuesto todo el archivo CSS.
Ver Demos
Instalación: Descargamos DhoniShow y prototype 1.5+. Opcional: Script.aculo.us. Realizamos la llamada a ellos desde nuestro encabezado.
JavaScript:
-
<script src="prototype.js" type="text/javascript"></script>
-
<script src="scriptaculous.js" type="text/javascript"></script>
-
<script src="dhonishow.js" type="text/javascript"></script>
-
-
<link rel="stylesheet" href="dhonishow.css" type="text/css"
-
media="screen" />
la estructrura
HTML:
-
-
<img src="img/fotoNumero1.jpg" alt="Numero1" />
-
<img src="img/fotoNumero2.jpg" alt="Numero2" />
-
<img src="img/fotoNumero3jpg" alt="Numero3" />
-
</div>
Algunos parametros que podremos configurar :
Transition style: Permite configurar el estilo de los efectos que se generaran para las transiciones.
HTML:
-
<div class="dhonishow effect_appear">
-
-
<!-- Choose between effect_appear, effect_blind,
-
effect_slide, effect_horizontal -->
Transition duration: La duracion de cada transicion.
HTML:
-
<div class="dhonishow duration_0dot6">
-
<!-- For 0.6 seconds -->
Autoplay: Auto comenzar animación a los segundos estipulados
HTML:
-
<div class="dhonishow autoplay_5">
-
<!-- For 5 seconds -->
Hide things: Ocultar elementos, ej: Navegacion, etc
HTML:
-
<div class="dhonishow hide_paging">
-
<!-- Choose between hide_paging, hide_alt (Sublines),
-
hide_navigation -->
Compartelo
Galerias, Flash, Recursos Web, Video, Diseño Web

ToobPlayer es un extraordinario FLV Player que permitirá montar a tu Web aquellos videos youtube que disfrutas ver, pero dando al reproductor un aspecto mucho mas personalizado o simulando haberlos alojado en nuestro propio servidor. ToobPlayer no solo se caracteriza por ser un mecanismo para reproducir videos de YouTube, sino que también podremos crear con el, vistas previas de imágenes al mejor estilo galerías. Encontraremos cinco Skin ya prediseñados, lo que será toda una ventaja, y asegurara que la integración a nuestro blog sea lo mas bonita posible, permite visualización a pantalla completa, puede manipularse en caso de desearlo con nuestro ratón (controlar volumen, etc), y mas haya de ser súper liviano, es totalmente personalizable, lo que hace que sea una alternativa genial.
Mas Demos - Descarga ToobPlayer 1.0.0
Via pixelco
Compartelo
Galerias, WordPress, Plugin, Diseño Web

The Featured Content Gallery, es un agradable plugin wordpress desarrollado por wpelements, el mismo nos permitirá montar en nuestros themes wordpress, de una forma sumamente simple, una galería muy agradable que hemos comentado en alguna oportunidad: SmoothGallery de JonDesigns. Lo genial de esta galería, transformada en plugin wordpress, es que una vez integrada a nuestro theme la podremos actualizar desde nuestro propio administrador wordpress, donde básicamente gestionaremos las 5 imágenes a mostrar, el titulo que llevara cada una de nuestras imágenes, acompañada de una breve descripción, e inclusive nos permite añadir el link hacia un post especifico donde redireccionaremos a nuestros usuarios al hacer clic sobre una imagen en particular. Sin duda, este plugin es una muy buena opción para generar Featured o post destacados en nuestros themes wordpress, sin complicarnos tanto la vida.
Instalar The Featured Content Gallery Plugin
- Descargamos el plugin “content-gallery.zip” by wpelements
- Subimos el plugin a la carpeta /wp-content/plugins/ de tu Wordpress ej: p-content/plugins/content-gallery/
- Activamos el plugin desde el panel de administración Wordpresss
- Añadimos el siguiente código dentro de algún archivo de nuestro theme donde deseamos mostrar la galería. (sidebar, index, etc)
PHP:
-
<?php include (ABSPATH . '/wp-content/plugins/content-gallery/gallery.php'); ?>
Gestionamos
Nos dirigimos dentro de nuestro Panel administrador Wp a la opción “setting” u opciones generales, una vez allí buscamos la opción “Featured Content Gallery” y comenzamos a gestionar nuestra galería. La cual es muy simple de entender.
Ajustar el ancho y altura de nuestra galería (Opcional)
Para modificar el ancho y el alto de la galería, editar el archivo "jd.gallery.css" que se encuentra dentro de la carpeta "css" del plugin de Galería. EJ:
CSS:
-
#myGallery, #myGallerySet, #flickrGallery
-
{
-
width: 460px; /* this is the width of your gallery */
-
height: 345px; /* this is the height of your gallery */
-
z-index:5;
-
border: 1px solid #000;
-
}
Para ampliar Informacion The Featured Content Gallery by wpelements
Gracias Cesar
Compartelo
Javascript, Scripts, Galerias, Diseño Web

Seguramente recordaran el articulo sobre mooSlideBox comentado hace meses aquí, básicamente un script que nos permitía generar una especie de "lightbox", aunque esto es muy contradictorio, porque es realmente muy diferente o pensado para otro tipo de cosas. Pero en fin, lo cierto es mooSlideBox posee un efecto realmente agradable y acaba de ser lanzada su versión MooSlideBox 3,2, que será inclusive mas simple de usar y la cual nos permitirá jugar con una mayor cantidad de opciones con respecto a la anterior. Lo mejor: El deslizador que puede contener cualquier contenido, a fin de poner vídeos, flash, imágenes, texto o html. Los efectos, que son agradables y a la vez muy simples. Y una de las nuevas opciones, la posibilidad de definir ahora desde donde deseamos aparezca nuestros contenedores: de arriba o de abajo. Definitivamente MooSlideBox es sin duda ese tipo de script que vale la pena tener en cuenta para algún proyecto online en el cual te encuentras trabajando.
Ver demos - Info y descarga MooSlideBox 3,2
Fuente visual-blast
Compartelo
Javascript, Scripts, Galerias, Flash, Diseño Web

JW Image Rotator es un Flash que nos permitirá montar una especie de diapositivas o galería de imágenes donde las mismas irán cambiando luego de una secuencia de tiempo determinado. Los resultados que se pueden lograr con JW Image Rotator son realmente muy agradables, mas aun, la cantidad de efecto que descubrirás al producirse la rotación de imágenes.
- Permite rotar RSS, XSPF o listas de reproducción ASX con JPG, GIF y PNG
- Posee un amplio rango de variables (Javascript API) para personalizar el comportamiento y la apariencia;
- Además en su sitio ofrecen un asistente (Wizard) que permite generar el Flash listo para agregarlo a una página.
- y mucho mas...
Ver Demo - Mas info y descarga JW Image Rotator
Via pixelco - webresourcesdepot
Compartelo
Scripts, Galerias, CSS, Diseño Web

CSS Decorative Gallery, un agradable tips que servirá básicamente para inspirar o enseñar como decorar completamente nuestras galerías de imágenes o darles un estilo completamente diferente (la idea es añadir pequeños objetos). El truco es realmente simple de seguir, y prácticamente se basa en el uso de algunas etiquetas y la superposición de algunas de las imágenes. Podrán ver unos 20 estilos diferentes aproximadamente, desde un simple icono, a resultados aun mas complejos, y cantidad de opciones mas. Sin duda, un articulo recomendado, mas aun, si estas pensando en crear tu porfolio o galería personal.
Ver Demos - Mas info y descargas CSS Decorative Gallery
Conceptos Basicos
CSS:
-
/* ---------- gallery styles start here ----------------------- */
-
.photo {
-
margin: 30px;
-
position: relative;
-
width: 180px;
-
height: 130px;
-
float: left;
-
}
-
.photo img {
-
background: #fff;
-
border: solid 1px #ccc;
-
padding: 4px;
-
}
-
.photo span {
-
width: 20px;
-
height: 18px;
-
display: block;
-
position: absolute;
-
top: 12px;
-
left: 12px;
-
background: url(images/digg-style.gif) no-repeat;
-
}
estructura
HTML:
-
-
<a href="#"><span></span><img src="images/11.jpg" alt="image" /></a>
-
</div>
Compartelo
Galerias, Flash, Recursos Web, Fotografia, Diseño Web

En estos meses, debo decir que he visto galería de imágenes realizadas en flash muy originales, inclusive gran parte de ellas muy simple de utilizar y fáciles de adaptar a nuestros proyectos. Debo admitir que todo lo relacionado a animaciones en flash no es mi punto fuerte, si tuviera que realizar un trabajo muy complejo a pedido donde todo se basara únicamente en flash y la idea sea lograr efectos y animaciones muy originales, dudo que pueda lograrlo, supongo que es por eso siempre suelo tener recursos que me ayuden a tener una base al trabajar, o en el mejor de los casos trabajar en conjunto con alguien experto en esta área que se dediqué de lleno a trabajar en elementos flash. Aunque esto no quiere decir, que no suela animarme a jugar con algunas aplicaciones y crear bonitas animaciones por mi cuenta. Pero repito, no es mi punto fuerte.
Hoy acabo de ver en Webdesignerwall un bonito tutorial y una buena alternativa para montar nuestras galerías de imágenes en flash con desplazamientos con una originalidad extraordinaria. Parallax Gallery utiliza en gran mayoría animación 2D donde las imágenes del fondo y las imágenes del primer plano suelen desplazarse a diferente velocidad. Con esto se crea una ilusión de profundidad, donde las imágenes del fondo se mueven más lento que las imágenes del primer plano. A esto sumarle, que al hacer clic sobre una sección o foto a mostrar, se genera una especie de Lightbox mostrando en mayor resolución la imagen que contiene ese elemento. Parallax Gallery se puede descargar de forma libre, inclusive el pack posee el trabajo final, y los archivos necesarios para modificar cuanto desees de esta galería. Inclusive en el post original, podrás aprender desde cero como crear algo similar, algo que será muy útil si realmente deseas aprender a crear este tipo de trabajos por tu cuenta, y te lleve a lograr otro tipo de resultados.
Ver DEMO - Mas Info y Descarga Parallax Gallery
Compartelo
Scripts, Galerias

jQuery virtual tour una extensión para simple panorama viewerr que nos permite jugar un poco más con jQuery añadiendo interactividad al transformar algunas vistas panorámicas en una visita virtual. jQuery virtual tour tiene la particularidad de ser accesible y puede funcionar incluso si el javascript no se ha activado. Para la navegación utiliza las etiquetas estándar < map > y < area /> con las cuales crearemos áreas en nuestro Tour virtual con información adicional. Quizas lo mejor sea que no hay necesidad de utilizar Flash, Quicktime o Java.
Ver Demo - Mas info jQuery virtual tour
Uso
En Nuestro encabezado < head >, realizamos las llamadas correspondientes
JavaScript:
-
<link rel="stylesheet" type="text/css" href="css/thickbox.css" media="screen" />
-
<link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" media="screen" />
-
<script type="text/javascript" src="js/jquery.js"></script>
-
<script type="text/javascript" src="js/jquery.panorama.js"></script>
-
<script type="text/javascript">
-
$(document).ready(function(){
-
$("img.advancedpanorama").panorama({
-
auto_start: 0,
-
start_position: 0
-
/* add your execution parameters here */
-
});
-
});
-
</script>
-
<script type="text/javascript" src="js/cvi_text_lib.js"></script>
-
<script type="text/javascript" src="js/jquery.advanced-panorama.js"></script>
-
<script type="text/javascript" src="js/thickbox.js"></script>
En nuestro contenido añadimos la imagen panorámica, y creamos las áreas interactiva mediante coordenadas. Añadimos la clase “thickbox” si se trata de imágenes.
HTML:
-
<img src="img/sculpteur.jpg" class="advancedpanorama" width="2448" height="375" usemap="testmap" alt="Atelier du sculpteur" />
-
<map id="testmap" name="testmap">
-
<area shape="rect" coords="1653,72,1839,255" href="index.html" alt="vers la salle de formation" />
-
<area shape="rect" coords="2013,114,2091,210" href="img/statue1.jpg" alt="statues" class="thickbox" />
-
<area shape="rect" coords="1920,276,2070,351" href="img/gouges.jpg" alt="gouges" class="thickbox" />
-
</map>
Compartelo