Mostrar miniaturas de imágenes o páginas sobre los enlaces

En varias páginas de este sitio uso JQuery para mostrar diversos efectos al situar el ratón sobre los enlaces o vínculos, en las versiones de escritorio de las paginas o al presionarlos en las versiones móviles.
En algunos casos podemos mostrar miniaturas o vista previa de las imágenes, en los enlaces que conducen a ellas.
En otros casos podemos mostrar miniaturas o screenshots de las páginas, sobre los enlaces tradicionales a páginas web.
En este artículo muestro varios ejemplos y comparto el código para implementar esta funcionalidad, sin ninguna librería, excepto JQuery.
El funcionamiento de los ejemplos dicen por si solos de su utilidad práctica.

Mostrar miniaturas de las imágenes sobre los enlaces

Esta funcionalidad permite al situar el cursor del ratón, sobre un enlace que conduce a una imagen, ver una vista previa de esta, con un tamaño que podemos personalizar.
En dispositivos móviles funciona al dar clic por primera vez en dicho enlace.
Compruébalo en los siguientes enlaces de ejemplo:

Habilitar la vista previa sobre los enlaces

Son necesarios cuatro medidas:
1- Cargar JQuery, justo al final de la página para no afectar la velocidad de carga.
2- Agregar o cargar el siguiente script, después de JQuery.

this.thumbPreview=function(){xOffset=10,yOffset=30,$("a.thumb").hover(function(t){this.t=this.title,this.title="";var e=""!=this.t?"<br>"+this.t:"";$("body").append("<p id='thumb'><img width='300x' src='"+this.href+"' alt='' />"+e+"</p>"),$("#thumb").css("top",t.pageY-xOffset+"px").css("left",t.pageX+yOffset+"px").fadeIn("fast")},function(){this.title=this.t,$("#thumb").remove()}),$("a.thumb").mousemove(function(t){$("#thumb").css("top",t.pageY-xOffset+"px").css("left",t.pageX+yOffset+"px")})},$(document).ready(function(){thumbPreview()});

3- Agregar la siguiente regla CSS.

#thumb{
position:absolute;
border:1px solid #b7e5ff;
background:#ccc;
padding:5px;
display:none;
color:#333;
}

4- Agregar a los enlaces necesarios la clase "thumb".
Por ejemplo:

<a href="ruta/imagen.jpg" class="thumb" title="Nombre imagen" target="_blank">Nombre imagen</a>

El contenido del atributo "title" se muestra en la parte inferior de las miniaturas, pero se puede obviar, como hago en los dos últimos ejemplos.

Mostrar imágenes sobre miniaturas (thumbs) de enlaces

Usando el mismo script anterior se puede crear una galería de imágenes y usar el mismo efecto de mostrar miniaturas sobre las imágenes.
En este ejemplo, para no crear miniaturas adicionales de menor tamaño, uso las mismas imágenes y las fuerzo a mostrarse con un ancho de 160 pixeles, lo que no es recomendado en la práctica.

Mostrar vista previa de las páginas sobre los enlaces

Esta funcionalidad es algo similar, permite ver una vista previa (screenshot) en forma de miniatura sobre los enlaces, de las páginas a los que ellos conducen.
Ejemplo:

Habilitar miniaturas de captura de pantalla sobre los enlaces

En este caso no hay que agregarle ninguna clase a los enlaces.
Si es necesario encerrar el área de la página donde se encuentran, con un contenedor DIV con un identificador, en este ejemplo llamado "links".
Además del necesario JQuery, es necesario agregar el siguiente script.

!function(e){var t="mini-preview";e.fn.miniPreview=function(i){return this.each(function(){var n=e(this),a=n.data(t);a&&a.destroy(),(a=new s(n,i)).generate(),n.data(t,a)})};var s=function(i,n){this.$el=i,this.$el.addClass(t+"-anchor"),this.options=e.extend({},this.defaultOptions,n),this.counter=s.prototype.sharedCounter++};s.prototype={sharedCounter:0,defaultOptions:{width:240,height:300,scale:.4,prefetch:"pageload"},generate:function(){this.createElements(),this.setPrefetch()},createElements:function(){var s=e("<div>",{class:t+"-wrapper"}),i=e("<div>",{class:t+"-loading"}),n=e("<iframe>",{class:t+"-frame"}),a=e("<div>",{class:t+"-cover"});s.appendTo(this.$el).append(i,n,a),s.css({width:this.options.width+"px",height:this.options.height+"px"});var r=100/this.options.scale;n.css({width:r+"%",height:r+"%",transform:"scale("+this.options.scale+")"});var o=parseInt(this.$el.css("font-size").replace("px",""),10),h=(this.$el.height()+o)/2,c=(this.$el.width()-s.outerWidth())/2;s.css({top:h+"px",left:c+"px"})},setPrefetch:function(){switch(this.options.prefetch){case"pageload":this.loadPreview();break;case"parenthover":this.$el.parent().one(this.getNamespacedEvent("mouseenter"),this.loadPreview.bind(this));break;case"none":this.$el.one(this.getNamespacedEvent("mouseenter"),this.loadPreview.bind(this));break;default:throw"Prefetch setting not recognized: "+this.options.prefetch}},loadPreview:function(){this.$el.find("."+t+"-frame").attr("src",this.$el.attr("href")).on("load",function(){e(this).css("background-color","#fff")})},getNamespacedEvent:function(e){return e+"."+t+"_"+this.counter},destroy:function(){this.$el.removeClass(t+"-anchor"),this.$el.parent().off(this.getNamespacedEvent("mouseenter")),this.$el.off(this.getNamespacedEvent("mouseenter")),this.$el.find("."+t+"-wrapper").remove()}}}(jQuery);
$(function() {$('#links a').miniPreview({ prefetch: 'none' });});  

También la siguiente regla de estilo CSS.

.mini-preview-anchor{display:inline-block;position:relative;white-space:nowrap}
.mini-preview-wrapper{-moz-box-sizing:content-box;box-sizing:content-box;position:absolute;overflow:hidden;z-index:-1;opacity:0;margin-top:-4px;border:solid 1px #000;box-shadow:4px 4px 6px rgba(0,0,0,.3);transition:z-index steps(1) .3s,opacity .3s,margin-top .3s}
.mini-preview-anchor:hover .mini-preview-wrapper{z-index:2;opacity:1;margin-top:6px;transition:opacity .3s,margin-top .3s}
.mini-preview-loading,.mini-preview-cover{position:absolute;top:0;bottom:0;right:0;left:0}
.mini-preview-loading{display:table;height:100%;width:100%;font-size:1.25rem;text-align:center;color:#f5ead4;background-color:#59513f}
.mini-preview-loading::before{content:'Cargando...';display:table-cell;text-align:center;vertical-align:middle}
.mini-preview-cover{background-color:rgba(0,0,0,0)}
.mini-preview-frame{border:none;-webkit-transform-origin:0 0;transform-origin:0 0}    

Mostrar miniatura de una imagen sobre el cursor del ratón

El método mas sencillo para mostrar la miniatura de una imagen al situar el cursor del mouse sobre un enlace, solo requiere de dos líneas de código en HTML y CSS.
En el modo escritorio inserta la miniatura exactamente donde se situé el DIV que contiene la imagen.
En dispositivos móviles requiere presionar una sola vez sobre el enlace.
En ambos casos al dar clic o dejar presionado, se carga completamente la imagen, aunque es opcional.
Un ejemplo a continuación, empleado en ¡Feliz jueves!
Use el siguiente código.

<style>
.interval:hover ~ #image {
  display: block;}
.imageParent {
  display: none;}
</style>

<a href="URL IMAGEN" class="interval" oncontextmenu="return false;">TEXTO ENLACE</a>

<div class="imageParent" id="image">
<img width="300" src="URL IMAGEN" alt="thumb">
</div>  

Más información

Easiest Tooltip and Image Preview Using jQuery
Image preview for links on hover

Páginas relacionadas

Comparta esta página

Sígueme en las redes sociales