Tumblr nos permite subir imágenes a su servidor y luego utilizarlas dentro de nuestro, siempre en Tumblr. Pero que sucede cuando queremos utilizar esas imágenes fuera de esa plataforma? La respuesta es simple: Debemos recurrir al método JSON para poder leer y acceder a las imágenes.

Mediante jQuery podemos realizar un simple llamado para lograr lo que buscamos:

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

$(document).ready(function(){ 
  $.getJSON("http://eliseos.tumblr.com/api/read/json?callback=?", 
  function(data) {
     $.each(data.posts.slice(0, 10), function(i,posts){
    var type = this["type"];
    var photo = this["photo-url-75"];
    if(type === "photo"){
      $('ul#tumblr').append('<li><img src="' + photo + '" \/><\/li>'); 
    } else {
      return;
    }
    }); 
  }); 
});

Solo resta que introduzcas tu usuario en la linea 2 y que establezcas que imagen querés utilizar. Recordá que Tumblr permite usar imágenes en 75px, 100x, 250px, 400px y 500px respectivamente; por lo que podes ajustar el valor a utilizar en la linea 6.

Este llamado solo mostrara las ultimas 10 imágenes, si necesitas cambiar el valor lo podes hacer especificando la cantidad de imágenes a mostrar en la linea 4.

Ahora solo resta el llamado correspondiente dentro de nuestro HTML

<ul id="tumblr"></ul>

Esta es una opción si utiliza Tumblr a modo de Portfolio y querés mostrar tus ultimas creaciones en otra plataforma, o simplemente hacer uso de algunas fotos en concreto.

Modificado desde Js do.it

Su principal característica por llamarla de algun modo es la que ofrecer un paquete en el que podemos, por ejemplo mostrar nuestros Tweets, mostrar resultados de una búsqueda, integrar/mostrar un Tweetbox, mostrar el botón de Twitter Connect y autentificar usuarios de manera segura via el API.

Su uso es de lo mas simple, una vez integrados los archivos necesarios solo debemos hacer el llamado correspondiente:

$('#twts').jTweetsAnywhere({
    username: 'tbillenstein',
    count: 5
});

jTweetsAnywhere cuenta con muchas opciones y servicios, por lo cual te recomiendo que veas la pagina con todos los ejemplos para ver como se comporta este plugin.

Quizás suena un tanto confuso de explicar por lo creo que es mejor dirigirse a la pagina del plugin para poder apreciar el efecto.Las funcionalidades de este plugin nos permiten que en el hovering se muestre el atributo href o title, segun nuestras necesidades y poder controlar también (un poco) la animación.

Otra de sus opciones es la de poder resaltar un parte de la URI, ideal para cuando queremos centrar la atención en una sección importante de la URI. También limitar el numero de caracteres en la URI a mostrar, algo pensado para cuando nos referimos a la URI de una búsqueda.

Uso

HoverAttribute cuenta con un puñado de opciones para confiurar, entre ellas se encunetra:

$(".mi_selector").hoverAttribute({
   attribute: "href", // atributo a mostrar, puede ser cualquier atributo
   animationTime: 0.3, // tiempo de la animación
   animationEase: "linear", // easing en al animacion, puede ser linear o swing
   tweenInFrom: "left", // posicion de la animacion, right, left etc.
   parseAsURL: null, // true y el elemento es tratado como URI
   removeProtocol: true,// remover el protocolo en URI por ej: http://
   removeWWW: false, // remover www de la URI
   wrapLink: "after", // recortar caracteres, puede ser desdde after, middle, before o none
   wrapLength: 60, //  cantidad de caracteres en la URI
   highlightURLPart: "host", // texto a resaltar, domain path, query o lastURIPart
   cssSettings: {
      canExpandFullWidth: true // expandir al 100% dentro del elemento padre
   }
});

Este pequeño plugin se encarga de hacer trabajo por nosotros, es decir creara la cantidad de columnas que se le indiquen devolviendo un código HTML valido y sin necesidad de añadir o modificar nuestro hoja de estilo, es decir no se añaden ningún tipo de elemento innecesario o elemento inline.

Caracteristicas

• Crea columnas a partir de listas ordenadas (<ol>) y desordenadas (<ul>)
• Podemos definir la cantidad de columnas en las que se dividirá la lista
• Todo lo referido al CSS es independiente del plugin (fácil de controlar)
• Se añade un class last al ultimo <ol> o <ul> para controlar el padding o margin
• Podemos ordenar nuestras columnas vertical u horizontalmente

Uso

Como lo mencione anteriormente, su uso es de lo mas sencillo, por ejemplo podemos tener este markup:

<ul class="my-list">
	<li><a href="#">Lorem ipsum 1</a></li>
	<li><a href="#">Donec pede 2</a></li>
	<li><a href="#">Fringilla vel 3</a></li>
	<li><a href="#">Eget arcu 4</a></li>
	<li><a href="#">In enim 5</a></li>
	<li><a href="#">Lorem farem 6</a></li>
</ul>

Para dividir nuestra lista en tres columnas diremos:

$('.my-list').easyListSplitter({ colNumber: 3 });

Lo que nos mostrar esta nueva lista

list item 1      list item 4      list item 7
list item 2      list item 5      list item 8
list item 3      list item 6

Por defecto la alineación es vertical, si necesitamos lograr una alineación horizontal, escribiremos:

$('.my-list').easyListSplitter({ 
   colNumber: 3, 
   direction: 'horizontal' 
});

Lo que se vera reflejado como:

list item 1      list item 2      list item 3      list item 4
list item 5      list item 6      list item 7      list item 8

Hermoso, no?

En el site del plugin encontraras algunos ejemplos más, junto con toda la documentación necesaria para que puedas implementar este plugin en tu diseño

Es plugin esta pensado para lograr un width para los child elements (<li>) de una lista, ya sea ordenada (<ol>) o desordenada (<ul>), pero no se limita a estos elementos ya que podemos integrarlo con lo que necesitemos.

En esta captura vemos como funciona el plugin:

Por defecto el plugin no eliminara el padding de nuestros elementos, pero si lo necesitamos se puede indicar que elimine el padding izquierdo, el derecho o ambos.

Su uso es de lo mas simple. Tenemos 3 opciones:

$('ul#main-nav').equalWidths({'stripPadding': 'child'});
 
$('ul#main-nav').equalWidths({'stripPadding': 'grand-child'});
 
$('ul#main-nav').equalWidths({'stripPadding': 'both'});

Asumiendo que vamos a aplicar equalWidths a una lista (<ul>) con una estructura como la siguiente: ul > li > a Entonces el elemento “child” será LI y se eliminara su padding. El elemento “grand-child” sera A y se eliminara su padding. Y si seleccionamos “both” evidentemente, se eliminara el padding de ambos elementos.

El plugin se encuentra en el código fuente de la pagina, pero te lo transcribo para que este más a mano:

		/*!
		 * equalWidths jQuery Plugin
		 * Examples and documentation at: hhttp://aloestudios.com/tools/jquery/equalwidths/
		 * Copyright (c) 2010 Andy Ford
		 * Version: 0.1 (2010-04-13)
		 * Dual licensed under the MIT and GPL licenses:
		 * http://www.opensource.org/licenses/mit-license.php
		 * http://www.gnu.org/licenses/gpl.html
		 * Requires: jQuery v1.2.6+
		 */
		(function($){
			$.fn.equalWidths = function(options) {
				var opts = $.extend({
					stripPadding: 'none' // options: 'child', 'grand-child', 'both'
				},options);
				return this.each(function(){
					var child_count = $(this).children().size();
					if (child_count > 0) { // only proceed if we've found any children
						var w_parent = $(this).width();
						var w_child = Math.floor(w_parent / child_count);
						var w_child_last = w_parent - ( w_child * (child_count -1) );
						$(this).children().css({ 'width' : w_child + 'px' });
						$(this).children(':last-child').css({ 'width' : w_child_last + 'px' });
						if((opts.stripPadding == 'child') || (opts.stripPadding == 'both')){
							$(this).children().css({
								'padding-right': '0',
								'padding-left': '0'
							});
						}
						if((opts.stripPadding == 'grand-child') || (opts.stripPadding == 'both')){
							$(this).children().children().css({
								'padding-right': '0',
								'padding-left': '0'
							});
						}
					}
				});
			};
		})(jQuery);
 
 
		$(function(){
 
			$('#ejemplo-2').equalWidths(); // config por defecto
 
			$('#ejemplo-3').equalWidths({'stripPadding': 'both'}); //sin padding
 
		});

Este es un plugin que te solucionara muchos problemas en unas simples lineas, y hará que tu barra de navegación se luzca todavía más.

Debo decir que esta galería es extremamente fácil de implementar y ajustar a nuestras necesidades. jQuery.popeye toma las capturas y links proporcionados y rápidamente los transforma en un Slider/Galería.

Uso básico

Su estructura es muy simple de comprender, por ejemplo podes escribir:

<ul class="ppy-imglist">
    <li>
        <a href="URI_de_la_imagen"><img src="URI_de_la_Captura" alt="" /></a>
        <span class="ppy-extcaption">
            Textto a modo de introducción
        </span>
    </li>
    <li>...</li>
</ul>

Luego iniciar la librería:

$(document).ready(function () {
    var options = {
        caption:    false,
        navigation: 'permanent',
        direction:  'left'
    }
    $(ID_del_Selector).popeye(options);
});

Como veras es muy simple de integrar y la cantidad de opciones que se nos proporcionan son mas que suficientes. Por ejemplo podemos controlar el menu de navegación, mostrar o no mostrar una introducción a la imagen, decidir de que lado se abrirá el menu del Slider; y mucho mas.

No te olvides de visitar los demos de este Slider donde encontraras mas detalles de como personalizar y modificar este librería.

A mi entender es un técnica muy buena para cuando disponemos de muy poco espacio y queremos añadir un poco más de funcionalidad a nuestro diseño.

Demo

Antes de empezar quizás quieras mirar un poco lo que vamos a crear,  el demo para este ejemplo es bien sencillo y contundente.

Introducción

Como ya lo remarque anteriormente esta es una técnica de lo mas sencilla que no te dará mayores complicaciones. Este footer al que hago referencia, se encuentra potenciado por jQuery (solo unas pocas lineas) y CSS.

Markup

Para este ejemplo, me encuentro trabajando con una grilla, pero vos podes utilizarlo dentro de tu diseño sin problemas. La única parte que debe llamar tu atención es el footer que es lo que vamos a construir.  Para esto he creado el siguiente markup solo focalizandome en el footer

<div id="footer">
    <div class="row container">
      <ul class="column grid_12">
        <li><strong>&copy; Tumblr, Inc.</strong></li>
 
        <li><a href="#">Help</a></li>
 
        <li><a href="#">About</a></li>
 
        <li><a title="Tumblr Themes" href="#">Themes</a></li>
 
        <li><a href="#">Meetups</a></li>
 
        <li><a href="#">What's New</a></li>
 
        <li><a href="#">API</a></li>
 
        <li><a href="#">Content Policy</a></li>
 
        <li><a href="#">Terms of Service</a></li>
 
        <li><a href="#">Privacy Policy</a></li>
      </ul>
    </div>
  </div>

En este caso he decido llamar el container footer, esto queda en vos, lo único importante es que debe ser el ultimo bloque antes de la etiqueta body para que el efecto funcione correctamente.

CSS

Daré por sentado que ya sabemos como trabajar con listas y como darles formato, y pasare al bloque más importante

#footer {
color:#fff;
font:11px 'Lucida Grande',Verdana;
font-weight:700;
text-align:center;
line-height:80px;/* centramos el texto verticalmente */
height:56px;
background:url("/images/gradient.png") repeat-x scroll center bottom transparent;
position:fixed; /* footer siempre visible */
bottom:0; /* footer siempre al pie */
width:100%; /* 100% del viewport */
text-shadow:1px 1px 2px #000; /* sombras a modo de detalle */
opacity:0; /* nunca visible hasta activar el hover */
margin:0;
}

Como veras el código esta fuertemente comentado, lo único relevante es que estamos usando la posición fixed para que nuestro bloque este siempre visible y bottom en 0 para que se ubique al pie siempre. Luego liberamos cualquier margin que podamos haber heredado.

jQuery

Como siempre la magia para el final. Lo que vamos a buscar es que el bloque este siempre oculto (anteriormente lo ocultamos en nuestro CSS) y que al posicionar el mouse sobre él este se muestre con un bonito efecto.

$(document).ready(function() {
 
 $("div#footer").mouseover(function(){
		$(this).stop().fadeTo("slow", 1.0);
	}).mouseout(function(){
		$(this).stop().fadeTo("slow", 0.0);
	});
 
});

Cuando se hace hover la visibilidad del bloque se degrada desde 0 a 100 para lograr un lindo efecto. Esta es la pieza final de este pequeño rompecabezas

Consideraciones Finales

EL contenido del bloque puede ser casi cualquiera, un guía de navegación, algunos anuncios de texto, lo que necesites incluir. Espero que este mini tutorial les sea de utilidad, cualquier duda no tienen mas que preguntar

Sinceramente nunca le había prestado demasiada atención a esa barra, por la que me puse a investigar un poco mas sobre su comportamiento y como funciona. Después de mirar un poco pude recrear el efecto sin demasiadas complicaciones con un poco de CSS y jQuery.

Surgieron dos alternativas, la replica exacta (solo me tome el trabajo de explicar el código) de Mashable y otro un poco mas simple.

Si entramos a cualquier post en Mashable, veremos que la barra se acompaña al Scroll sin animaciones. Al usar valores negativos en el margin, esta barra no es visible en resoluciones menores (1024), por lo cual mediante jQuery se transforma en otra barra horizontal para mostrar el contenido; lo mismo sucede si redimencionamos la ventana.

La alternativa mas simple ofrece las mismas funcionalidades y un efecto en el scroll, pero si te excedes en el viewport, los visitantes que tengan una resolución de pantalla menor, no podrán apreciarla. A que me refiero con el exceso en el viewport? Simple, si tu container es de 960px de ancho y posicionamos la barra a unos -80px, nos excedimos en el viewport (960px + 80px = 1040) para resoluciones menores o iguales a 1024×768; ya que el safe area para esta resolución es de 975px de ancho.

Cualquiera de las dos alternativas es válida y funcional, queda en vos utilizar la que creas que mejor se adapte.

Replica de Mashable

Esta opción requiere un poco mas de código dada la complejidad. Al utilizar la posición fixed, esta opción no sera compatible con IE6 ya que este navegador desconoce esta propiedad.

Demo Replica de Mashable

No te olvides de redimensionar la ventana para apreciar el efecto completo

HTML

Como lo podemos apreciar en Mashable tenemos botones para sindicar contenido en Twitter, Google Buzz, Facebook y otras. Cada botón funciona por medio de un script para que les sea mas sencillo de integrar, podes usar e incluir los botones que necesitas por medio de algún plugin o simple código, eso queda en vos.

			<div id="social_bar">
				<div class="botones_grandes">
					<div class="gbuzz s_boton">
						<script type="text/javascript" src="http://button.njuice.com/buzz.js">
</script>
					</div>
					<div class="tweetmeme s_boton">
						<script type="text/javascript">
//<![CDATA[
tweetmeme_source = 'baires'; // Mi usuario en Twitter //
tweetmeme_url = '<?php the_permalink(); ?>'; // URL a socializar en este caso para Wordpress //
//]]>
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
					</div>
					<div class="faceboook s_boton">
						<script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">
</script>
					</div>
				</div>
				<div class="botones_chicos">
					<div class="s_boton_small gbuzz_small">
						<script type="text/javascript">
//<![CDATA[
var njuice_buzz_size = 'small';
//]]>
</script> <script type="text/javascript" src="http://button.njuice.com/buzz.js">
</script>
					</div>
					<div class="s_boton_small twwetmeme_small">
						<script type="text/javascript">
//<![CDATA[
tweetmeme_style = 'compact';
//]]>
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
					</div>
					<div class="s_boton_small facebook_small">
						<script type="text/javascript">
//<![CDATA[
var fbShare = {
size: 'small',
}
//]]>
</script> <script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">
</script>
					</div>
					<div class="s_boton_small">
						<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=EliseosNet&amp;loc=es_ES" id="s_email" class="social_sprites" name="s_email">email</a>
					</div>
					<div class="s_boton_small">
						<a class="a2a_dd social_sprites" id="s_share" href="http://www.addtoany.com/share_save?linkname=Eliseos%20Net&amp;linkurl=eliseos.net" name="s_sharethis">Share</a><script type="text/javascript">
//<![CDATA[
a2a_linkname="My Sitio";a2a_linkurl="mi-url.com";
//]]>
</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js">
</script>
					</div>
				</div>
				<div class="s_boton">
					<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=EliseosNet&amp;loc=es_ES" id="s_email" class="social_sprites" name="s_email">email</a>
				</div>
				<div class="s_boton">
					<a class="a2a_dd social_sprites" id="s_share" href="http://www.addtoany.com/share_save?linkname=My%20Sitio&amp;linkurl=mi-url.com" name="s_sharethis">Share</a><script type="text/javascript">
//<![CDATA[
a2a_linkname="My Sitio";a2a_linkurl="mi-url.com";
//]]>
</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js">
</script>
				</div>
			</div>

Nuestro markup es de lo mas sencillo, como se puede hay dos clases de botones: grandes y chicos. Los botones grandes son los que se aprecian a simple vista, los chicos se encuentran escondidos para las resoluciones inferiores o en caso de redimensioanarse la pantalla. Es necesario que edites los datos de cada botón para que coincida con los tuyos, en URL, Nombre del Sitio, etc.

Recomiendo introducir la barra justo después del titulo y antes del contendido para poder desplazarnos sin problemas. Para el caso de WordPress dentro del archivo single.php

CSS

Esto es parte de la magia, otra vez es algo extremadamente simple de entender. Intente comentar lo mas posible el código para que sea de fácil entendimiento.

 
#social_bar {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
float:left;
margin-left:-80px; /* // La distacia de la barra que queremos tener en relacion al post */
margin-right:10px;
position:relative;
}
 
/* // Formato de los Botones grandes */
.s_boton {
padding:5px;
clear:left;
margin:0;
}
 
/* // Formato de los Botones chicos */
.s_boton_small{
clear:none;
float:left;
padding:5px;
}
 
/* // Ocultamos los botones chicos de momento */
.botones_chicos{display:none;}
 
/* //Iconos para los links de Share y Email */
#social_bar a#s_email.social_sprites {
background-position:2px -32px;
text-decoration: none;
}
 
#social_bar a:hover#s_email.social_sprites {
background-position:2px -50px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a#s_share.social_sprites {
background-position:0px 4px;
text-decoration: none;
}
 
#social_bar a:hover#s_share.social_sprites {
background-position:0px -14px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a.social_sprites {
-moz-border-radius:3px 3px 3px 3px;
background:url(../images/social_sprites.png) no-repeat scroll 0 0 #FFFFFF;
border:1px solid #E8E8E8;
color:#989898;
display:block;
font:9px/1.625 verdana,sans-serif;
margin:0;
padding:2px;
text-align:right;
width:44px;
}

En caso que lo necesites esta es la imagen que utilice en los links de share & e-mail. Los iconos pertenecen al set Glyphish.

jQuery

Y aquí viene la magia que hará que el comportamiento de la barra acompañe al scroll y diferencie las distintas resoluciones de pantalla.

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

$(function(){	
 
    if( $('#social_bar').length > 0 && !($.browser.msie && parseInt($.browser.version) < 7) ) {
        var descripY = parseInt($('.main').offset().top) - 20;
        var $postShare = $('#social_bar');
        var pullX = $postShare.css('margin-left');
 
        $(window).data('scrollBound', false);
 
        function positionShareScroll() {
            var scrollY = $(window).scrollTop();
            var fixedShare = $postShare.css('position') == 'fixed';
            if ( scrollY > descripY && !fixedShare ) {
                $postShare.stop().css({
                    position: 'fixed',
                    left: '50%',
                    top: 20,
                    marginLeft: -540 // Este valor se debe ajustar ya que depende de cada diseño//
                });
            } else if ( scrollY < descripY && fixedShare ) {
                $postShare.css({
                    position: 'relative',
                    left: 0,
                    top: 0,
                    marginLeft: pullX
                });
            }
        }
 
 
        $(window).resize(function(){
            var windowW = $(window).width();
            var pulledOutside = $postShare.css('margin-left') == pullX;
            if ( windowW >= 1137 ) {
                if ( !$(window).data('scrollBound') ) {
                    if ( !pulledOutside ) {
                        $postShare.animate({ marginLeft: pullX });
						//Crear barra Vertical
						$('.botones_chicos').hide();
						$('.s_boton').show();
						$('.botones_grandes').show();
						$postShare.css('border-width', '1px');
						$postShare.width('auto');
						$postShare.css({
							marginRight: 7,
							marginTop: 0
						});
                    }
                    $(window)
                        .data('scrollBound', true)
                        .bind('scroll.positionShare', function(){
                            positionShareScroll()
                        })
                    ;
                    positionShareScroll();
                }
            } else {
                if ( pulledOutside || $(window).data('scrollBound') ) {
                    $postShare
                        .css({ position: 'relative', left: 0, top: 0 })
                        .animate({marginLeft: 0})
                    ;
					//Crear barra Horizontal
					//$postShare.append(smallButtons);
					//smallButtons = '';
					$('.botones_grandes').hide();
					$('.s_boton').hide();
 
					$('.botones_chicos').show();
					$postShare.css({
						marginTop: 5,
						marginBottom: 5
					});
					$postShare.css('border-width', 0);
 
					var content_width = $('.main').width();
					if (content_width == 'undefined') content_width = 600;
					if ( $postShare.attr('_width') ) {
						$postShare.width($postShare.attr('_width'));
						var block_width = $postShare.attr('_width');
					} else {
						$postShare.attr('_width', $postShare.width() );
						var block_width = $postShare.width();
					}
					$postShare.width(content_width);
					var add_padding = ( (content_width - block_width) / ($postShare.find('.s_boton_small').length * 2) ) + 4;
 
					//var add_padding = (642 - (88 + 120 * (buttons_count - 2) )) / (buttons_count * 2);
					//var add_padding = ( ( 642 - ( 88 * buttons_count ) ) / (buttons_count * 2) ) + 5;
					$postShare.find('.s_boton_small').css({
						paddingLeft: add_padding,
						paddingRight: add_padding
					});
 
 
                    $(window)
                        .data('scrollBound', false)
                        .unbind('scroll.positionShare')
                    ;
                }
            }
        });
        $(window).resize();
    }
});

Solamente dos cosas debemos tener presentes, la primera es definir en la linea 4 cual sera nuestro valor de referencia para el comportamiento de la barra, es decir el ancho; generalmente corresponde al container en el que se encuentra el post. En mi caso he utilizado la clase main, que se vuelve a utilizar en la linea 76 y en la 77 con su ancho.

Luego procederemos a adaptar la distancia a la que se posicionara la barra cuando nos desplacemos, al utilizar la posición fixed, el valor difiere de los 80px originales. Este ejemplo muestra la barra posicionada a unos -540px (linea 18). Este valor tenes que ajustarlo vos ya que depende de tu diseño. Una aproximación a este numero responde a: Ancho del container (en este ejemplo: main) – 80px

Una vez presentadas todas las partes solo tenemos que integrarlas en nuestro Site, dependiendo de la plataforma con lo que estemos trabajando pude variar algún detalle, pero este código sirve tanto para WordPress como para cualquier otro CMS.

Replica de Mashable Simple

A diferencia de la opción anterior esta barra es compatible con IE6, pero no podrá ser apreciada en resoluciones menores. El scroll para este caso es una animación del padding que produce un simpático efecto final.

Demo Replica de Mashable

HTML

Es casi el mismo markup de la primera opción pero sin incluir los botones pequeños ya que no son necesarios.

	<div id="social_bar_wrapper">
			<div id="social_bar">
				<div class="botones_contenedor">
					<div class="gbuzz s_boton">
						<script type="text/javascript" src="http://button.njuice.com/buzz.js">
</script>
					</div>
					<div class="tweetmeme s_boton">
						<script type="text/javascript">
tweetmeme_source = 'baires';
tweetmeme_url = '<?php the_permalink(); ?>';
 
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
					</div>
					<div class="faceboook s_boton">
						<script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">
</script>
					</div>
				</div>
				<div class="s_boton">
					<a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=EliseosNet&amp;loc=es_ES" id="s_email" class="social_sprites" name="s_email">email</a>
				</div>
				<div class="s_boton">
					<a class="a2a_dd social_sprites" id="s_share" href="http://www.addtoany.com/share_save?linkname=My%20Sitio&amp;linkurl=mi-url.com" name="s_sharethis">Share</a><script type="text/javascript">
a2a_linkname="My Sitio";a2a_linkurl="mi-url.com";
</script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js">
</script>
				</div>
			</div>
		</div>

También se ha añadido un wrappera la barra para poder controlar el margin.

CSS

Es exactamente el mismo de la primera opción, con el adicional de wrapper y sin los botones pequeños.

#social_bar_wrapper{
	position: absolute;
	margin-top:20px;
}
 
#social_bar {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
float:left;
margin-left:-80px; /* // La distancia de la barra que queremos tener en relacion al post */
margin-right:10px;
position:relative;
 
}
 
/* // Formato de los Botones grandes */
.s_boton {
padding:5px;
clear:left;
margin:0;
}
 
/* //Iconos para los links de Share y Email */
#social_bar a#s_email.social_sprites {
background-position:2px -32px;
text-decoration: none;
}
#social_bar a:hover#s_email.social_sprites {
background-position:2px -50px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a#s_share.social_sprites {
background-position:0px 4px;
text-decoration: none;
}
 
#social_bar a:hover#s_share.social_sprites {
background-position:0px -14px;
color:#4c545b;
text-decoration: none;
}
 
#social_bar a.social_sprites {
-moz-border-radius:3px 3px 3px 3px;
background:url(../images/social_sprites.png) no-repeat scroll 0 0 #FFFFFF;
border:1px solid #E8E8E8;
color:#989898;
display:block;
font:9px/1.625 verdana,sans-serif;
margin:0;
padding:2px;
text-align:right;
width:44px;
}

Quizás lo único que tengas que modificar es la distancia a la que se encuentra la barra con respecto del contenido, para este ejemplo es -80px (dentro de #social_bar). No te excedas en mas de -100px o no sera visible en varias resoluciones.

jQuery

Como te lo adelante anteriormente solamente animamos el padding (gracias CSS Tricks), no es necesario modificar este código a no ser que sepas lo que estas haciendo.

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

	$(function() {
 
    var $sidebar   = $("#social_bar"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;
 
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
 
});

Bug encontrado

No la había notado la semana pasada, pero me lo remarcan en un e-mail, al contar con un contenido “muy” largo; la barra empuja ciertas secciones dentro del container en el que introducimos la barra. Una opción es cambiar a un container mas “chico” (poco practico) o para esas secciones problemáticas que se desplazan tenes que usar la regla: display: inline-block

Al añadir esta nueva regla, veras que todos los problemas se solucionan, el único inconveniente que se genera, es que display: inline-block no se comporta de manera homogénea en IE por lo que tendríamos que trabajar un poco más. Pero eso es tema para cortar otra tela, por ahora lo dejo como un pendiente.

Consideraciones finales

Por ultimo solo resta presentar todo en nuestro diseño y tendremos otra alternativa a a barra de Mashable.

Cualquier duda que tengas, hacémelo saber.

Su funcionamiento es de lo mas simple, solo debemos crear un container con algunas imágenes dentro:

<div id='slideshowHolder'>
<img src='img1.jpg' alt='img1' />
<img src='img2.jpg' alt='img2' />
<img src='img3.jpg' alt='img3' />
</div>

Y luego iniciar el plugin:

$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });

Esta es la configuración por defecto, donde solo indicamos el ancho y el alto del Slider, si lo necesitáramos (seguramente) podemos indicar que efecto necesitamos, delay en las transiciones, etc.

jqFancyTransitions cuenta con un demo online, donde podrás observar todos los efecto que comente anteriormente junto con la documentación necesaria.Y por ultimo, este plugin prueba ser compatible con Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

A diferencia de otros clones este lightbox cuanta con algunas opciones que lo hacen una alternativa mas que interesante:

• Las imágenes son se “auto-acomodan” a la resolución de pantalla
• Se puede hacer un pre-cache de las imágenes, para mejorar la experiencia del usuario
• Múltiples instancias de la misma imagen
• Multilenguaje, el plugin cuenta con los packs de lenguajes para su traducción
• Slideshow automático
• Control de las transiciones a través del teclado
• SEO amigable, los spiders almacenaran tanto los links de las thumbnails como los links de la imagen original