Amigo, la dirección la modificas cambiando la palabra "left" por "bottom" y los enlaces solamente tienes que colocarlos junto a las imágenes, el tamaño de las imágenes lo reduces colocando una cifra menor en las propiedades "width" y "height". Si se modifica el alineamiento, solamente tienes que jugar con los valores de "margin". Eso es todo.
Ten en cuenta que las imágenes no se ocultan, simplemente se desplazan, creo que te conviene moverlas de izquierda a derecha porque si van de abajo hacia arriba, se puede superponer al contenido de la página que se encuentre abajo. En ese caso, te conviene jugar con la opacidad de las imágenes.
Código CSS:
Ver original.noti{
display: inline-block;
opacity: 0; /* Por defecto, serán transparentes */
width: 15em;
height: 8em;
position: absolute;
bottom: -50em;
z-index: inherit;
}
Código Javascript
:
Ver originalvar noticias = $(".noti"),
total = noticias.length,
cont = 0;
//Cuando se vayan a mostrar, les quito la opacidad
$(noticias).eq(cont).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
$(noticias).eq(cont + 1).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
var slider = {
show: function(){
//Cuando se vayan a desplazar, las hago transparentes
$(noticias).eq(cont).css({"position": "absolute", "opacity": 0}).animate({bottom: "-=50em"}, "fast");
$(noticias).eq(cont + 1).css({"position": "absolute", "opacity": 0}).animate({bottom: "-=50em"}, "fast");
cont = cont + 2 == total ? 0 : cont + 2;
//Cuando se vayan a mostrar, les quito la opacidad
$(noticias).eq(cont).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
$(noticias).eq(cont + 1).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
}
};
setInterval(slider.show, 5000);
Así es como se ve:
http://jsbin.com/qugad/3
También podrías optar por mostrarlas una tras otra sin desplazamiento:
http://jsbin.com/qugad/5
El código respectivo:
http://jsfiddle.net/UXa3r/
Saludos