Templates y Plantillas Gratis – CSS – Flash – FREE

Hola!!!

Navegando por Ahi me tope con una pagina de Templates Gratis, tanto en Flash como de CSS, esta bastante decente, hay uno que otro que si vale la pena, sobre todo en las de Flash, que tambien puede encontrar galerias para utilizar en tu Sitio Web.

Les dejo los Links!!

Templates Flash
Templates CSS

Hola de nuevo!!!
Hoy les voy a mostrar un lightbox que esta muy xido, llamado Sexy LightBox!!!
lo puedes utilizar con jquery o con mootols

Les muestro como!

Lightbox Con Mootols!!

1
2
3

<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.mootools.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

Lightbox Con jQuery!!

1
2
3
4
5

 
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.jquery.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

Por ultimo, llamamos a nustra Funcion!!!

Funcion del Lightbox Para mootols!!!

1
2
3
4
5

<script type="text/javascript">
  window.addEvent('domready', function(){
    SexyLightbox = new SexyLightBox();
  });
</script>

Funcion del Lightbox Para jQuery

1
2
3
4
5

<script type="text/javascript">
  $(document).ready(function(){
    SexyLightbox.initialize();
  });
</script>

Ahora vamos a aplicarlo en nuestro html

Para usarlo en un link de imagen

1

<a href="imagen.jpg" title="some title" rel="sexylightbox">View image</a>

Para usarlo en una galeria de imagenes!!!!

1
2
3

<a href="senorms.jpg"     rel="sexylightbox[galeria]">Link 1</a>
<a href="imagen.jpg"      rel="sexylightbox[galeria]">Link 2</a>
<a href="cualquiera.jpg"  rel="sexylightbox[galeria]">Link 3</a>

Ahora aplicamos el fondo

Fondo CSS Para mootols!!

1
2
3
4
5
6

SexyLightbox = new SexyLightBox({
  OverlayStyles:{
    'background-color':'#fff',
     'opacity': 0.6
  }
});

Fondo CSS Para Jquery!!!

1
2
3
4
5
6

SexyLightbox.initialize({
  OverlayStyles:{
    'background-color':'#fff',
     'opacity': 0.6
  }
});

Podemos utilizar dos colores para nuestro Sexy LightBox (negro y blanco)

Para aplicarlo!!

Color de Fondo con mootols!!!

1

SexyLightbox = new SexyLightBox({color:'white'});

Color de Fondo con jQuery!!!

1

SexyLightbox.initialize({color:'white'});

Eso fue todo!!!

Les dejo el link de los demos con Mootols y jQuery

Y por ultimo los archivos de descarga!!!!

Hola amigos esta ves navegando me encontre con una nueva galeria en flash muy buena por cierto, me gusto los efectos que hace, y lo mas importante que es facil de implementarla,

La dichosa Galeria se llama TiltViewer (http://www.simpleviewer.net).

Has click aqui para ver el demo
Descarga Aquí o en la web de Autor

Tiltviewer Flash es una aplicación de visualización de imágenes en 3D de estilo. Puede acercar y alejar el zoom, y la tapa las imágenes para ver un texto descriptivo (título), entró en Picasa. La galería es completamente personalizable mediante la edición de los parámetros en el archivo index.html

Con esta galeria en 3d flash puedes controlar tanto con el mouse como con el teclado

Descarga un plantilla tambien para el Picasa

jQuery Cycle plugin proporciona un mecanismo para hacer transiciones animadas de imágenes. El plugin soporta pausas al pasar el ratón por encima de la imágen, paradas automáticas, retrollamadas (callbacks) antes y después, disparadores (triggers) y una gran cantidad de efectos para las trasiciones.

La última versión estable (2.34), publicada en esta misma semana, requiere, como mínimo, la versión 1.2.3 de jQuery.

Es un plugin muy ligero, tan solo ocupa 18 KB en su versión para entornos de producción.

Como casi todo en jQuery, es muy fácil de usar. Aquí pongo un breve ejemplo básico:

HTML

1
2
3
4
5

<div id="s1" class="pics">
    <img src="images/beach1.jpg" width="200" height="200" />
    <img src="images/beach2.jpg" width="200" height="200" />
    <img src="images/beach3.jpg" width="200" height="200" />
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.pics {
    height:  232px;
    width:   232px;
    padding: 0;
    margin:  0;
} 
 
.pics img {
    padding: 15px;
    border:  1px solid #ccc;
    background-color: #eee;
    width:  200px;
    height: 200px;
    top:  0;
    left: 0
}

JavaScript:

1

$('#s1').cycle('fade');

Puedes acceder a la web oficial para obtener más información, la descarga, ejemplos de códigos fuentes y ejemplos en funcionamiento desde el siguiente enlace:

jQuery Cycle Plugin.