norfipc.com
Códigos   Mapa del sitio   Informatica
NorfiPC » Codigos » Links externos

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



Generar una vista previa de las imágenes o de capturas de pantalla (screenshots) de las páginas sobre los links que conducen a ellas, con el evento hover, JavaScript y JQuery.
Mostrar miniaturas de imágenes o páginas sobre los enlaces
En varias páginas de este sitio uso JavaScript y 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:
La Ciudad de la Habana, posee varios sitios históricos de la época colonial, perfectamente conservados.
Se destacan entre otras edificaciones la Catedral de la Habana, varias fortificaciones defensivas como el El Castillo del Morro o el Castillo de la Fuerza.
También antiguas plazas como La Plaza Vieja, La Plaza de San Francisco y otras.



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.
gallery thumbnail  gallery thumbnail gallery thumbnail gallery thumbnail



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}    

Todos los scripts que comparto y hojas de estilo CSS, han sido previamente minimizados y comprimidos.
Se pueden descomprimir para su edición o uso, con herramientas como la siguiente: Descomprimir y corregir código CSS y JavaScript
Otra alternativa es usarlos en archivos auxiliares JS o CSS.

Más información


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

Páginas relacionadas



Indica que te gusta y comparte

Sígueme en las redes sociales


 
Inicio | Mapa del sitio | Buscar | Sobre mí