03 junio 2013

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 puede ajustar a la sidebar cambiando algunos parámetros que veremos más abajo.


Para agregarlo en tu blog entra en DiseñoAñ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.

21 comentarios

Hola amigo.. Utilicé este widget para ponerlo en mi blog www.streamordie.blogspot.com.es (lo puedes ver al final de la página), y se me había ocurrido utilizarlo también para crear una página nueva dentro del blog para mostrar todas las entradas hasta la fecha, poniéndole por ejemplo que el número de entradas a mostrar fuera de 1000. Pero al hacerlo veo que el máximo número de entradas que muestra es de 500 o 600. Sería posible cambiar este máximo y mostrar más esntradas?? Gracias.. y buen trabajo con tu blog.. saludos..!!

Ramón, se haría interminable la carga de la página, si observas tu blog con 48 entradas que muestras, ya tarda bastante en mostrarlas.

Saludos.

Gracias por contestar, pero aún así, sería posible? Se que tardaría un rato en cargarse por completo, pero al ser una página independiente no afectaría a la principal del blog y me parece interesante el tener todas las entradas a un click por el contenido del blog, y quizá en un futuro con una velocidad de internet mayor no sería tanto el problema (ya empiezo a divagar jeje..). Bueno, espero no ser muy pesado.. Gracias y saludos..

Ramón, tras revisar el código veo que no es posible tal cantidad de entradas. !Lo siento!.

Saludos.

Muchas gracias me agrado bastante ;D saludos

AMOR SEVILLISTA Muchas gracias por este gadget, lo he personalizado entero y la verdad es que me ha encantado para mi blog. Un saludo y seguire tus aportes

Es muy bueno pero... no me sale ninguna foto! Me parece que son de google y por eso no las quiere mostrar... Hay solución?

Arnau, no vale para plantillas dinámicas.

en mi blog no aparece absolutamente nada al insertar el widget html con ese contenido

Rubén prueba ahora, he tenido problemas con el hosting que hospedaba los script.
Saludos.

Este comentario ha sido eliminado por el autor.

Antonio, se puede hacer perfectamente, solo cambias estos trozos del código:
width:560px; por 250
2 width:66px; por 58
2 height:66px; por 58
y ya lo tienes para colocar en la sidebar.
Saludos.

Menudo invento, Antonio!
No sé calcularlo, me queda un poco ancho: si sustituyo
250px por 240 px
cuánto debo poner en lugar de 58px?
Así quedaría perfecto para mi blog!

Saludos Genio!

Antonio, coloca 240 y en lugar de 58 colocas 55.

Perfecto, ahora queda como a la medida de mi blog! Muchas gracias.
Por cierto, podría hacerse una con PRIMERAS ENTRADAS? :)

hola como estan , en mi caso, no me aparecen las imagenes de las entradas,. solo me aparece el log de bloggr http://thdjsclub.blogspot.com

Dj's Club no lo veo instalado y así me es imposible ver donde se produce el fallo.
Lee bien y observa que está todo bien configurado, es un gadget muy fácil de instalar y por lo general no suele dar fallos.

Si aún así te sigue dando fallo, déjalo instalado y miro donde puede estar el fallo.

Se puede cambiar que sea vertical ?

Correcto Val Dor, solo debes modificar el ancho: width:560px; por el deseado, teniendo en cuenta el ancho y alto de los recuadros( width:66px;
height:66px;) para que ocupe todo el ancho que le des.

Ah, por supuesto :))) ... gracias maestro

hola! el script afecta al diseño del resto de la plantilla y los gadgets de la portada aparecen descuadrados. es posible que el código tenga algun componente mal cerrado?


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"