Cómo crear una vista previa de imagen al pasar el ratón usando jQuery

En este tutorial, te mostraré cómo aprovechar el poder de jQuery para crear una previsualización de imagen con efecto hover y una galería de imágenes en una página HTML. Para esta demostración, necesitarás conocimientos básicos de técnicas de codificación CSS, JavaScript y HTML. También incorporaremos elementos de HTML5 y CSS3 en la pieza final. Los archivos utilizados en esta demostración están disponibles aquí. Mi inspiración para este tutorial se le atribuye a Alen Grakalić y sus esfuerzos con Css Globe.

Índice de Contenido
  1. Creando la hoja de estilos
  2. Configurando las imágenes
  3. Creando el documento HTML
  4. Configurando los scripts de jQuery

Creando la hoja de estilos

En primer lugar, crearemos una hoja de estilos con el nombre styles.css y la guardaremos en un subdirectorio llamado css dentro del directorio web. Estos estilos definirán el cuerpo, la clase principal, la clase de la galería, h1, h2, anchor, pre, image, unordered list, list items y el id de la previsualización. Describiré con más detalle algunas de estas definiciones de estilo específicas a medida que se apliquen a varios de estos elementos a continuación. El código CSS también incluye varios estilos de CSS3 para sombreado de caja y sombreado de texto; el código contenido en la hoja de estilos se muestra a continuación:

@charset "utf-8";
/* Documento CSS */
body {
    margin:0;
    padding:40px;
    background:#B1B1B1;
    font-family:Tahoma, Geneva, sans-serif;
    font-weight:normal;
    color:#555;
    line-height:180%;
}
.main {
    background-color:#DDFBEF;
    width:460px;
    margin-left:100px;
    margin:0 auto;
    padding:10px;
    min-height:500px;
}
.gallery {
    background-color:#EBEBEB;
    min-height:150px;
    padding: 5px 0px 10px 10px;
    box-shadow: 2px 2px 3px rgba(150, 150, 150, .75);
    margin-bottom:25px;
    width:445px;
}
h1 {
    font-size:28px;
    font-weight:normal;
    color:#22411D;
    text-shadow: 1px 2px 1px rgba(150, 150, 150, .75);
}
h2 {
    font-size:22px;
    font-weight:normal;
    color:#526F78;
    text-shadow: 1px 2px 1px rgba(150, 150, 150, .75);
}
a {
    text-decoration:none;
    color:#f30;
}
pre{
    display:block;
    font-family:Tahoma, Geneva, sans-serif;
    font-weight:normal;
    padding:7px;
    border:3px solid #bae2f0;
    background:#e3f4f9;
    margin:.5em 0;
    overflow:auto;
    width:800px;
}
img{
    border:0px;
    box-shadow: 2px 2px 3px #555562;
}
ul,li{
    margin:0;
    padding:0;
}
li{
    list-style:none;
    float:left;
    display:inline;
    margin-right:10px;
}
#preview{
    position:absolute;
    border:3px solid #ccc;
    background:#333;
    padding:5px;
    display:none;
    color:#fff;
    box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);
}

Configurando las imágenes

A continuación, configuraremos las imágenes que se utilizarán para la demostración, y estas se encontrarán en un subdirectorio web llamado images. Cada imagen requerirá la imagen original, la cual en esta demostración se establece en un ancho de 400 píxeles y una altura de 320 píxeles, y las miniaturas redimensionadas se establecen en 100 x 80, guardadas como archivos JPG (por ejemplo, 1t.jpg). Las imágenes utilizadas en esta demostración son imágenes de archivo (libres de derechos) que se muestran en Figura A:

Creando el documento HTML

A continuación, comenzaremos nuestro documento HTML con elementos de HTML5, configurando el doctype, el idioma, la cabecera, los metadatos, el título, la descripción, los scripts y vinculando el archivo de estilo externo. El archivo se guarda en la raíz del directorio web con el nombre index.html, y el fragmento de código se muestra a continuación:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Previsualización de imagen usando jQuery</title>
    <meta name="description" content="Previsualización de imagen usando jQuery">
    <script src="js/jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/styles.css" media="screen" >
</head>
<body>

Observa que la fuente del script está apuntando al subdirectorio "js", que se encuentra dentro del directorio web. Este es el archivo fuente de jQuery, que es necesario para que los scripts de jQuery funcionen en el documento.

A continuación, crearemos una <section> y dos <articles> que contendrán dos galerías simples, una para la galería "Paisajes" y otra para la galería "Bodegones". El código HTML se muestra a continuación:

Cómo controlar los rags
<section class="main">
  <h1>Previsualización de imagen usando jQuery</h1>
   <article class="gallery">
    <h2>Galería de Paisajes</h2>
      <ul>
        <li><a href="images/1.jpg" class="preview" title="Banff Alberta Canada"><img src="images/1t.jpg" alt="thumbnail de la galería" /></a></li>
        <li><a href="images/2.jpg" class="preview" title="Llanuras - África"><img src="images/2t.jpg" alt="thumbnail de la galería" /></a></li>
        <li><a href="images/3.jpg" class="preview" title="Tierras de Cultivo"><img src="images/3t.jpg" alt="thumbnail de la galería" /></a></li>
         <li><a href="images/4.jpg" class="preview" title="Pradera"><img src="images/4t.jpg" alt="thumbnail de la galería" /></a></li>
      </ul>
    </article>
    <article class="gallery">
      <h2>Galería de Bodegones</h2>
       <ul>
         <li><a href="images/5.jpg" class="preview" title="Frutas Flores Pan"><img src="images/5t.jpg" alt="thumbnail de la galería" /></a></li>
         <li><a href="images/6.jpg" class="preview" title="Horneado"><img src="images/6t.jpg" alt="thumbnail de la galería" /></a></li>
         <li><a href="images/7.jpg" class="preview" title="Frutas en la mesa"><img src="images/7t.jpg" alt="thumbnail de la galería" /></a></li>
         <li><a href="images/8.jpg" class="preview" title="Verduras"><img src="images/8t.jpg" alt="thumbnail de la galería" /></a></li>
       </ul>
     </article>
</section>

Observa que los anchors de las imágenes tienen la clase "preview", que establece la posición absoluta, el borde, el color de fondo, el relleno de 5 píxeles y una sombra de caja para cada imagen. La clase también se llama en las funciones de jQuery, que se mostrarán y explicarán a continuación. La clase "gallery" establece el color de fondo en #EBEBEB, una altura mínima de 150 píxeles, un relleno de 5 píxeles, 0 píxeles, 10 píxeles, 10 píxeles y un margen superior de 25 píxeles, y un ancho de 445 píxeles.

Configurando los scripts de jQuery

A continuación, configuraremos el script con la etiqueta de apertura <script> para JavaScript y comenzaremos jQuery con la función "document ready". Como regla general, me gusta colocar todos mis scripts en línea al final del archivo HTML, justo antes de la etiqueta de cierre </body>. El código de inicio del script se muestra en el fragmento de código a continuación:

<script type="text/javascript" language="javascript">
// Inicia jQuery con la función "document ready" en la carga de la página
$(document).ready(function(){
    imagePreview();
});

A continuación, configuraremos las configuraciones de desplazamiento horizontal y vertical que se aplicarán a cuánto hacia abajo y hacia la derecha de la miniatura se mostrará la previsualización de la imagen. El fragmento de código se muestra a continuación:

// Configuración de los desplazamientos horizontal y vertical
this.imagePreview = function(){
        xOffset = -20;
        yOffset = 40;

El valor xOffset = -20 coloca la previsualización 20 píxeles por debajo de la miniatura, y yOffset = 40 coloca la previsualización 40 píxeles a la derecha de la miniatura.

El siguiente fragmento de código establece la función hover junto con el título del pie de foto; también establece los desplazamientos y el fade in lento.

$("a.preview").hover(function(e){
    this.t = this.title;
    this.title = "";
    var c = (this.t != "") ? "
" + this.t : "";
    $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Previsualización de imagen' />"+ c +"</p>");
    $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("slow");
},

Las siguientes funciones eliminan la previsualización y el título del pie de foto cuando el hover está fuera del área de la imagen, junto con "mousemove" que permite que la previsualización se mueva en relación a dónde está el cursor dentro de la miniatura, y finalmente, la etiqueta de cierre del script:

Cómo editar un documento PDF con LibreOffice Draw
function(){
    this.title = this.t;
    $("#preview").remove();
});
$("a.preview").mousemove(function(e){
    $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px");
});
};
</script>

La galería de imágenes final, como se muestra en Chrome 18.0.1, se muestra en Figura B:

A continuación, un ejemplo del efecto de previsualización con hover sobre la segunda imagen de paisaje, como se muestra en Figura C:

Nuevamente, puedes descargar todos los archivos para esta demostración del efecto de previsualización de imagen aquí.

Para más información, consulta estos recursos:

  • jQuery .append()
  • jQuery .css()
  • jQuery .fadeIn()
  • jQuery .hover()
  • jQuery .mousemove()
  • jQuery .offset()

Cómo configurar un servidor SSH en Windows 7

En Newsmatic nos especializamos en tecnología de vanguardia, contamos con los artículos mas novedosos sobre Desarrollo, allí encontraras muchos artículos similares a Cómo crear una vista previa de imagen al pasar el ratón usando jQuery , tenemos lo ultimo en tecnología 2023.

Artículos Relacionados

Subir

Utilizamos cookies para mejorar su experiencia de navegación, mostrarle anuncios o contenidos personalizados y analizar nuestro tráfico. Al hacer clic en “Aceptar todo” usted da su consentimiento a nuestro uso de las cookies.