Hola!!

Navegando por ahi me encontre con un sitio que nos muestra 8 trucos con JQUERY, que nos pueden ser util al momento de crear nuestro Sitio Web.

Chequenlos y pruebenlos!!!!

Les dejo aqui en Enlace.

Hola!! Esta vez les voy a mostrar como utilizar Jcrop es una libreria que junto a Jquery te permite cortar imagenes online (cortar imagenes tipo facebook :) ). La libreria es muy facil de usar!!
Les muestro como:

Paso 1: En nuestro archivo tenemos que colocar este codigo php para generar la imgen que vamos a recortar luego:

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

      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
      $targ_w = $targ_h = 150; // Es el tamaño que tendra nustra imagen al momento de cortarla.
      $jpeg_quality = 90;// Es la calidad que tendra nuestra Imagen.
      $src = 'demo_files/raphaxx3.jpg'; //En este paso seleccionamos que imagen vamos a cargar para luego cortarla.
      $img_r = imagecreatefromjpeg($src);
      $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
      imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
      $targ_w,$targ_h,$_POST['w'],$_POST['h']);
      header('Content-type: image/jpeg');
      imagejpeg($dst_r,null,$jpeg_quality);
      exit;
      }

Paso2 : Incluimos los archivos JavaScript y css de la libreria entre las etiquetas “head”. Sin esto obviamente no va a funcionar:

1

<script src="js/jquery.pack.js"></script> <!-- Incluimos la libreria de jQuery --> <script src="js/jquery.Jcrop.pack.js"></script> <!-- Incluimos la libreria de jQuery - Jcrop -->

Paso3: Tambien dentro de nuestro archivo en el

del archivo pegamos este codigo javascript para generar nuestro archivo para luego cortarlo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

      <script type="text/javascript">
                  jQuery(function(){       
                      jQuery('#cropbox').Jcrop({
                          aspectRatio: 1,
                          onSelect: updateCoords
                      });
 
                  });
 
                  function updateCoords(c)
                  {
                      jQuery('#x').val(c.x);
                      jQuery('#y').val(c.y);
                      jQuery('#w').val(c.w);
                      jQuery('#h').val(c.h);
 
                  };
 
 
                  function checkCoords()
 
                  {
 
                      if (parseInt(jQuery('#x').val())) return true;
 
                      alert('Porfavor seleccione un area de la imagen.'); <!  Configuramos msj de error si no seleccionamos que parte de la imagen vamos a cortar -->
 
                      return false;
 
                  };
</script>

Bueno eso fue todo!!!
Les paso el link del DEMO EN LINEA
Y el LINK de descarga de los Archivos.

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.

Hola!!!

Este tutorial explica cómo crear Hermoso Slide con jQuery,

Paso 1: página HTML:
Descargar los archivos jquery.js, scripts.js,y llamarlos en el HTML dentro de la etiqueta <head>

<script type="text / javascript">
var _siteRoot='index.html',_root='index.html'; //index.html archivo donde incluiremos nuestro slide
</script>
<script src="js/jquery.js" type="'text/javascript'"></script>
<script src="js/scripts.js" type="'text/javascript'"></script>

Paso 2: página HTML:

<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="images/nature-photo.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="images/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="images/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="images/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="images/nature-photo6.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>post: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>

Paso 3: codigo CSS:

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:11px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:993px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:993px;
height:52px;
margin:22px 0 0;
background:url url(images/nav-bg.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:683px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
background:url(images/header-bg.png) 50% 0 no-repeat;
}
div#header div#slide-holder{
z-index:40;
width:993px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:973px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
background:url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}

Por ultimo, guarden y prueben!!!!!!

Les paso el link de los archivos.

Link al DEMO

Bueno a la hora de revisar nuestros proyectos en diferentes navegadores y todos nos topamos con la inminente llegada del “FCK IE” y mas aun el IE6, siempre el enojo que por alguna razon que enverdad me la suda, no funcionan algunas propiedades CSS… y en este caso el ” *:hover ”

Si aveces… muchos implementadores con experiencia, ni saben que en el IE6 esta y otras propiedades CSS no andan, ya que maquetan a XHTML/CSS sin importarles si funciona o no en algun explorador, cumplen en tener sus codigos estandarizados (validos por la W3C); pero nosotros no somos asi (chiste) y nos gusta ser lo mas optimo para con nuestros clientes y/o visitantes de estos… asi que aqui les pongo 2 opciones o bien soluciones a este y otros problemas con el FKC IE…

Primera solución:
Whatever:hover
Link de la web del autor

Esta enfocada a solo resolver el “loquesea:hover” en IE6… es ligera, discreta y nos
vale para tener el famoso “li:hover” en nuestros menus y submenus… o igual nuestas “img:hover” en algunas ocaciones.

Descargar:
Esta ultima version nos arregla tambien el
:hover
:active
:focus

Descargar version ligera/paquetada

Descargar el codigo de fuente/sin empaquetar

Y como lo aplicamos?
Tan facil y sencillo como agregar esto en el body de nuestra hoja de estilos

1

body {behavior: url("csshover3.htc");}

Segunda Opcion:
En lo personal me gusta esta opcion ya que tiene mas arreglos… y aveces hace que nuestros proyectos, se vean casi igual en todos los IE…
:hover
:first-child
:background-image (transparencia PNG; pero no con imagenes en mosaico o bien que se repita)
:max-height – :min-height
:max-width – :min-width
position:fixed;
etc, etc… enfin una buena libreria js que nos ahorrara mucho tiempo y evitariamos miles de “Hacks” que solo nos dan un codigo CSS sucio, feo, e invalido… y diria que casi debe ser un complemento mas e imprescindible en nuestros proyectos.

Descargar:
La version actual es 2.0 beta 3
y podemos ver las otras versiones aqui del ie7 js en google

http://ie7-js.googlecode.com/svn/version/

Y como lo aplicamos?
Igual es sencillo si queremos una solucion rapida y externa podemos usar este codigo para actualizar cualquier version del IE anterior al IE7 con esto

1
2
3

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

tambien podemos usar esta libreria para actualizar cualquier version del IE anterior al IE8

1
2
3

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

si queremos podemos descargarnos la libreria e integrarla en nuestros proyectos y solo cambiamos la url del destino del archivo js ejemplo:

1
2
3

<!--[if lt IE 8]>
<script src="miproyecto/js/IE8.js" type="text/javascript"></script>
<![endif]-->

Ver demo enlinea