Sebastián Orellana - Diseñador Gráfico http://www.seballero.com Diseñador Gráfico Sebastián Orellana Sun, 06 May 2012 00:33:55 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Fácil Tooltip jQuery sin plugin http://www.seballero.com/blog/facil-tooltip-jquery-sin-plugin/ http://www.seballero.com/blog/facil-tooltip-jquery-sin-plugin/#comments Sun, 06 May 2012 00:21:50 +0000 Seballero http://www.seballero.com/?p=277 En esta ocasión les quiero compartir 2 tipos de tooltip que pueden usar con pocas lineas de código y sin plugins. Solo deben crear el objeto que llamará al Tooltip, en este caso hice 2 links los cuales tienen un div oculto al lado con la clase .tooltip. En el ejemplo que aparece a continuación pueden observar el efecto básico de tooltip que muestra al div oculto que se encuentra después del “<A>”. El segundo efecto es el mismo tipo de tooltip pero con seguimiento. Pueden descargar este ejemplo aquí para que lo usen donde deseen.

El Código del Efecto jQuery:

Selec All Code:
<script type="text/javascript">
            $(document).ready(function() {
 
					  $("#tooltip1").mouseover(function(){
						 eleOffset = $(this).offset();
 
						$(this).next().fadeIn("fast").css({
 
									left: eleOffset.left + $(this).outerWidth(),
									top: eleOffset.top
 
								});
						}).mouseout(function(){
							$(this).next().hide();
						});
 
						$("#tooltip2").mouseover(function(){
							$("#tooltip2").mousemove(function(e){
								 $(this).next().css({left : e.pageX , top: e.pageY});
							  });
							eleOffset = $(this).offset();
							$(this).next().fadeIn("fast").css({
 
									left: eleOffset.left + $(this).outerWidth(),
									top: eleOffset.top
 
								});
						}).mouseout(function(){
							$(this).next().fadeOut("fast");
						});
 
			});		
 
</script>

El código HTML:

Selec All Code:
<a id="tooltip1" href="#">Ejemplo básico de Tooltip</a>
<div class="tooltip">Contenido del Tooltip 1</div>
<a id="tooltip2" href="#">Ejemplo básico de Tooltip con seguimiento</a>
<div class="tooltip-seg">Contenido del Tooltip 1</div>

]]> http://www.seballero.com/blog/facil-tooltip-jquery-sin-plugin/feed/ 0 Tu wordpress más social con los plugins: Disqus y AddThis http://www.seballero.com/blog/tu-wordpress-mas-social-con-disqus-y-add-this/ http://www.seballero.com/blog/tu-wordpress-mas-social-con-disqus-y-add-this/#comments Mon, 26 Sep 2011 03:59:45 +0000 Seballero http://www.seballero.com/?p=256 A veces nos complicamos un poco al intentar hacer que nuestro wordpress sea más social e interactúe mejor con las redes que conocemos para lograr que nuestros contenidos sean mas fácil de compartir y de esta manera tengamos mejor visibilidad en internet.

Para lograr este objetivo hay algunos plugins que nos pueden ayudar mucho y de manera bastante rápida y sencilla, ya que requieren una configuración básica, amigable y personalizable. En esta ocasión les presentaré Disqus (plugin de comentarios) y AddThis (plugin para compartir en las redes).

Disqus: Este plugin es muy útil si deseas conocer a los usuarios que comentan en tus entradas, ya que para escribir deben logearse a través de una cuenta google, facebook, twitter, yahoo u openID. Además ya que estarán identificados con su cuenta, ellos podrán compartir lo que comentaron en sus propias redes.

AddThiss: Este plugin ayuda a agregar los botones sociales en tus entradas y páginas, solo debes seleccionar los botones que deseas agregar, elegir un estilo y donde irán.

]]> http://www.seballero.com/blog/tu-wordpress-mas-social-con-disqus-y-add-this/feed/ 4 jCarousel mi mejor aliado como carrusel jQuery http://www.seballero.com/blog/jcarousel-mi-mejor-aliado-como-carrusel-jquery/ http://www.seballero.com/blog/jcarousel-mi-mejor-aliado-como-carrusel-jquery/#comments Mon, 20 Jun 2011 04:47:55 +0000 Seballero http://www.seballero.com/?p=240 jCarousel es un plugin Jquery que sirve muchísimo para crear carruseles de ítems y galerías o slides, lo mejor es que es muy personalizable, tiene opciones de dar acciones antes, entre y después de cada transición. En este demo hice un carrusel con botones hacia delante y atrás, espero les sirva como ejemplo.

Demo:

Código:

Selec All Code:
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

 <script type="text/javascript">
function mycarousel_initCallback(carousel) {
 
    jQuery('#forw').bind('click', function() {
        carousel.next();
        return false;
    });
 
    jQuery('#prev').bind('click', function() {
        carousel.prev();
        return false;
    });
};
 
jQuery(document).ready(function() {
    jQuery("#carrusel").jcarousel({
       scroll :1,
	   auto: 3,
       wrap : "both",
       initCallback: mycarousel_initCallback,
	     buttonNextHTML: null,
        buttonPrevHTML: null
	   });
 });
</script>
Selec All Code:
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
32
33
34
35
36

 
 
 
<div id="wrap">
<a id="prev" href="#"><</a><a id="forw" href="#">></a>
 
 
 
<ul id="carrusel">
	<li><img src="http://farm3.static.flickr.com/2267/2067440740_dc5a27c7af_z.jpg?zz=1" alt="" /></li>
 
 
 
	<li><img src="http://farm3.static.flickr.com/2060/2067440172_a378297bfb_z.jpg?zz=1" alt="" /></li>
 
 
 
	<li><img src="http://farm3.static.flickr.com/2019/2066641497_4bf621e1a5_z.jpg?zz=1" alt="" /></li>
 
 
 
	<li><img src="http://farm3.static.flickr.com/2252/2066595607_03f9c04d37_b.jpg" alt="" /></li>
 
 
 
	<li><img src="http://farm3.static.flickr.com/2059/2066594223_d87b4a10e1_z.jpg?zz=1" alt="" /></li>
 
 
 
	<li><img src="http://farm3.static.flickr.com/2309/2066593657_cb96aaa9e9_z.jpg?zz=1" alt="" /></li>
 
 
</ul>
 
 
</div>
Selec All Code:
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

*{
	margin: 0;
	padding: 0;
 
	border: none;
}
.jcarousel-clip{
	width: 630px;
	position: relative;
	overflow: hidden;
}
 
.jcarousel-clip li{
	width: 630px;
	float: left;
}
 
.jcarousel-clip li img{
	width: 630px;
}
#wrap{
	width: 630px;
	position: relative;
}
 
#prev, #forw{
	padding: 30px 0;
	background: #000;
	text-align: center;
	width: 30px;
	color: #fff;
	text-decoration: none;
	font-size: 25px;
	font-family: arial, sans-serif;
	display: block;
}
#prev{
	position: absolute;
	z-index: 10;
	top: 42%;
}
 
#forw{
	position: absolute;
	z-index: 10;
	right: 0;
	top: 42%;
}

Enlace a página del autor

Descarga mi demo

 

]]> http://www.seballero.com/blog/jcarousel-mi-mejor-aliado-como-carrusel-jquery/feed/ 10 Punta de Lobos – Pichilemu (video) http://www.seballero.com/blog/punta-de-lobos-pichilemu-video/ http://www.seballero.com/blog/punta-de-lobos-pichilemu-video/#comments Mon, 20 Jun 2011 02:39:14 +0000 Seballero http://www.seballero.com/?p=232 Un nuevo hobbie, el primer video realizado por mi, y que mejor que mostrar un maravilloso lugar como Punta de Lobos en Pichilemu, la capital del surf en Chile. Nunca imaginé que era tan complejo filmar y editar correctamente pero de a poco iré aprendiendo, pronto subiré más videos de Pichilemu porque hay muchos otros lugares igualmente atractivos que mostrar.

 

]]> http://www.seballero.com/blog/punta-de-lobos-pichilemu-video/feed/ 0 Smart3D, efecto jquery para hacer elementos 2d con profundidad http://www.seballero.com/blog/smart3d-efecto-jquery-para-hacer-elementos-2d-con-profundidad/ http://www.seballero.com/blog/smart3d-efecto-jquery-para-hacer-elementos-2d-con-profundidad/#comments Sun, 22 May 2011 22:43:12 +0000 Seballero http://www.seballero.com/?p=215 Smart 3D, es un efecto muy interesante ya que puedes generar profundidad 3D simulada con todas las capas que desees 2D, además este plugin es muy sencillo y casi no necesita edición.

Para lograr este efecto debes crear una lista con imágenes, estás se verán una delante de otra y al pasar encima con el mouse se generará el efecto de profundidad.

les dejo un Demo que eh preparado, el link del autor del plugin y los archivos adjuntos para descarga.

Demo:

Codigo:

Selec All Code:
1
2
3
4
5
6
7
8
9

  <script type="text/javascript"> 
 $(document).ready(function() {
                $('#smartdemo').smart3d({
				invertHorizontal: true,
				invertVertical: true
	        }); 
 
}); 
</script>
Selec All Code:
1
2
3
4

<ul id="smartdemo">
	<li><img src="img/s3d.jpg" alt="" /></li>
	<li><img src="img/s3d2.png" alt="" /></li>
</ul>
Selec All Code:
1
2
3
4
5
6
7
8
9
10
11

#smartdemo {
    width: 600px;
    height: 450px;
    overflow: hidden;
    border:2px solid #444444;
	margin: 0;
}
#smartdemo li{
    width: 800px;
    height: 600px;
}

Sito web del autor

Descarga mi Demo

]]> http://www.seballero.com/blog/smart3d-efecto-jquery-para-hacer-elementos-2d-con-profundidad/feed/ 7