Slider de últimas entradas con efecto loader

En este artículo vamos a ver cómo lograr este sencillo slider que, sin duda, añade un plus de usabilidad a la web ya que usa la típica imagen de Ajax Loader y el usuario sabrá que hay alguna acción que se está realizando en la web.El slider además de tener el efecto carga, lleva descripciones de las entradas mediante Tooltip y se podrá navegar a las entradas mediante las imágenes. Está configurado como slider pero también se puedeajustar a la sidebar cambiando algunos parámetros que veremos más abajo.

VER DEMO

Para agregarlo en tu blog entra en Diseño |  Añadir un gadget | HTML/Javascript y ahí agrega lo siguiente:

<style type="text/css">
#post-gallery {
width:560px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:#000000;
padding:5px;
background-color:#4d4c4c;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
}
#post-gallery h2 {
font:20px Arial,Sans-Serif;
color:#4D4C4C;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#F8F7F7;
text-align: center;}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://lh4.googleusercontent.com/-aZJwGqNHmA4/UazNH1YgU_I/AAAAAAAAL54/IkoFN96MP58/s48-no/amor-cargando.gif') no-repeat 50% 50%;
width:66px;
height:66px;}
#post-gallery .rp-item img {
width:66px;
height:66px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #4d4c4c;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#4d4c4c;}
#post-gallery .rp-item:hover .hidden {display:block;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rpTitle = "ULTIMAS ENTRADAS", // Título gadget
numposts = 24, // número de imágenes / entradas a mostrar
numchar = 200, // Número de caracteres a mostrar en tooltip
rcFadeSpeed = 600, // Velocidad del efecto. fadeIn () tooltip 
pBlank = "http://imagenes.es.sftcdn.net/es/scrn/301000/301015/blogger-16.png", // Imagen a mostrar si la entrada no la contiene
blogURL = "http://www.amorsevillista.com/"; // Dirección URL de tu blog
</script>
<script > // ULTIMAS ENTRADAS CON EFECTO LOADER POR AMOR SEVILLISTA
// Visita: http://www.amorsevillista.com
// original :)

$(function() {
$('div.rp-item img').hide();
$('div.rp-child').removeClass('hidden');

var winWidth = $(window).width(),
winHeight = $(window).height(),
ttWidth = $('div.rp-child').outerWidth(),
ttHeight = $('div.rp-child').outerHeight(),
thumbWidth = $('div.rp-item').outerWidth(),
thumbHeight = $('div.rp-item').outerHeight();


$('div.rp-item').css('position', 'static').mouseenter(function() {
$('div.rp-child', this).filter(':not(:animated)').fadeIn(rcFadeSpeed);
}).mousemove(function(e) { 
var top = e.pageY+20,
left = e.pageX+20;

if (top + ttHeight > winHeight) {
top = winHeight - ttHeight - 40;
} 
if (left + ttWidth > winWidth) {
left = winWidth - ttWidth - 40;
} 

$('div.rp-child', this).css({top:top, left:left});

}).mouseleave(function() {
$('div.rp-child', this).hide();
});
});

function showrecentposts(json) {
var entry = json.feed.entry;
for (var i = 0; i < numposts; i++) {
var posturl; 
for (var j=0; j < entry[i].link.length; j++) {
if (entry[i].link[j].rel == 'alternate') {
posturl = entry[i].link[j].href;
break;
}
}

if ("content" in entry[i]) {
var postcontent = entry[i].content.$t;
} else if ("summary" in entry[i]) {
var postcontent = entry[i].summary.$t;
} else {
var postcontent = "";
}

var re = /<\S[^>]*>/g; 
postcontent = postcontent.replace(re, "");
if (postcontent.length > numchar) {
postcontent = postcontent.substring(0,numchar) + '...';
}

var poststitle = entry[i].title.$t;

if ("media$thumbnail" in entry[i]) {
postimg = entry[i].media$thumbnail.url
} else {
postimg = pBlank
}

document.write('<div class="rp-item"><a href="' + posturl + '"><img src="' + postimg + '" alt="thumb" /></a>');
document.write('<div class="rp-child hidden"><h4>' + poststitle + '</h4>');
document.write(postcontent + '</div>');
document.write('</div>');
}
}
document.write('<div id="post-gallery"><h2>' + rpTitle + '</h2><sc' + 'ript src="' + blogURL + '/feeds/posts/default?max-results=' + numposts + '&orderby=published&alt=json-in-script&callback=showrecentposts"></sc' + 'ript><div style="clear:both;"></div></div>');

var i = 0, int=0;
$(window).bind("load", function() {
var int = setInterval("doThis(i)",400);
});

function doThis() {
var imgs = $('div.rp-item img').length;
if (i >= imgs) {clearInterval(int);}
$('div.rp-item img:hidden').eq(0).fadeIn(400);
i++;
} </script>

Todo lo que está marcado en negrita es configurable:

var rpTitle = "ULTIMAS ENTRADAS", // Título gadget
numposts = 24, // número de imágenes / entradas a mostrar
numchar = 200, // Número de caracteres a mostrar en tooltip
rcFadeSpeed = 600, // Velocidad del efecto.
pBlank = "https://lh4.googleusercontent.com/-Q5TyyMqOEkk/UV4vn45zY4I/AAAAAAAAJCk/WXm15PWrULA/s100/no-img.png", // Imagen a mostrar si la entrada no la contiene
blogURL = "http://www.amorsevillista.com/"; // Dirección URL de tu blog (Cambiar por la vuestra)

Sin lugar a duda es un slider que no requiere mayor trabajo y que ofrece resultados bastante atractivos que bien podrán darle mayor presentación a tu blog o página Web.

Imprimir artículo