Imágenes
22-08-2022

Centrar imagen
Efecto Lupa
Enlace sobre video
Galería de imágenes
Galería de imágenes I
Galería de imágenes II

Imagen fija en pantalla
Imagen parpadea
Lightbox-2.7.1
Lupa con jQuery I
Lupa con jQuery II

Efecto Lupa 22-08-2022

1/2.- Lupa con jQuery I 22-08-2022

Ampliar la parte de la imagen por donde pasa el ratón

<!-- imagen a tamaño normal -->
<div>
    <img src="" id="img">
    <div id="square"></div>
</div>
<!-- miniatura donde se visualizar la imagen ampliada -->
<div id="imgSmall">
    <img src="">
</div>

#img {cursor:crosshair;border:1px solid #ccc;}
#square {position:absolute;width:100px;height:100px;border:1px solid;cursor:crosshair;}
#imgSmall {width:200px;height:200px;overflow:hidden;border:1px solid #000;}
#imgSmall img {position:relative;}
.wrapper {width: 80%;margin: 5px auto;}
.fuente {margin-top: 2rem;}
.fuente a {font-size: 1.5rem;text-decoration: none;color: Blue;}
.fuente a:hover {color: red;}

Se requiere que jQuery esté por encima del script, si no contamos con el archivo jquery.min.js, podemos valernos del código en internet.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script src="../Lightbox-2/js/jquery-1.11.0.min.js"></script>
<script>
// iniciamos una vez se ha cargado el DOM de la pagina
$(document).ready(function(){
    //imagen="URL-DE-LA-IMAGEN";
    imagen="../img/gen/CerroCopey_5.jpg";
    // iniciamos una vez se ha cargado la imagen
    $('#img').attr("src", imagen).load(function(){
        $("#imgSmall img").attr("src",imagen);
        // obtenemos informacion sobre la imagen como:
        // - la posicion en la pantalla (top,left)
        // - la anchura y altura
        var imgPosition=$("#img").position();
        imgTop=imgPosition.top;
        imgLeft=imgPosition.left;
        imgHeight=$("#img").height()+imgTop;
        imgWidth=$("#img").width()+imgLeft;
        // Aumentamos el tamaño de la imagen ampliada al doble de su tamaño
        $("#imgSmall img").height(parseInt($("#img").height()*2));
        $("#imgSmall img").width(parseInt($("#img").width()*2));
        // evento que se ejecuta al mover el raton por encima de la imagen
        $("#img").mousemove(function(event){
            // posicionamos el recuadro selector en el centro del raton
            mostrarImagen(event);
        });
        // evento que se ejecuta cuando nos movemos por dentro del recuadro
        // selector
        $("#square").mousemove(function(event){
            // revisamos que estemos dentro de la imagen que deseamos aumentar
            if(event.pageY>imgTop && event.pageY<imgHeight && event.pageX>imgLeft && event.pageX<imgWidth)
            {
                mostrarImagen(event);
            }
        });
        //
        function mostrarImagen(event)
        {
            // Posicionamos el recuadro en la posicion del raton
            $("#square").css({"top":event.pageY-50, "left":event.pageX-50});
            // Preparamos la posición de la imagen a aumentar
            y=-((event.pageY-imgTop)-50)*2;
            x=-((event.pageX-imgLeft)-50)*2;
            $("#imgSmall img").css({"top":y, "left":x});
        }
    });
});
</script>

Efecto Lupa ... ⇑

2/2.- Lupa con jQuery II 22-08-2022

Requerimos de:

La imagen a mostrar
La misma imagen con el doble del tamaño como mínimo
La imagen de fondo de la lupa
Asignar un id a la imagen para que posteriormente, con jquery llamando a ese id, nos haga el efecto.
Primero se llama la imagen pequeña src="URL-IMAGEN-PEQUEÑA".
Con data-big="URL-IMAGEN-GRANDE" llamamos a la imagen grande.
Con data-overlay="URL-IMAGEN-LUPA", llamamos a la imagen que va a servirnos de fondo para la lupa.

<div id="contLupa">
    <img id="miLupa" src="URL-IMAGEN-PEQUEÑA" alt="img con zoom" data-big="URL-IMAGEN-GRANDE" data-overlay="URL-IMAGEN-LUPA" />
</div>

Los estilos son opcionales, podeis poner los que querais, o los estilos que mejor de adecuen a vuestro proyecto.

#contLupa {
    position: relative;
    max-width: 424px; /* Ancho de la imagen pequeña + borde*/
    height: auto;
    margin: 20px auto;
    border: 12px solid #999;
    border-radius: 10px;
}

<!--jQuery - Llamamos la libreria de JQuery-->
<script src="../JQuery/jquery-3.3.1.min.js"></script>
<script src="../JQuery/jquery.lupa.min.js"></script>
<!-- Plugin para hacer el efecto lupa / zoom -->
<script>
$(document).ready(function()
{
    $("#miLupa").lupa(
    {
        imgSrc: $("#miLupa").attr("data-big"), // camino de la versión de alta resolución de la imagen
        lensShape: "circle", // forma de la lente (circle(círculo) / square(cuadrado))
        lensSize: 180, // tamaño de la lente (in px)
        borderSize: 4, // tamaño de la lente borde (in px)
        borderColor: "#555", // color del borde de la lente (#hex)
        borderRadius: 0, // radio de borde (opcional, solo si la forma es cuadrada)
        imgOverlay: $("#miLupa").attr("data-overlay"), // ruta de la imagen de superposición (opcional)
        overlayAdapt: true // true si la imagen de superposición tiene que adaptarse al tamaño de la lente (true/false)
    });
});
</script>

Efecto Lupa ... ⇑

Arriba ... ⇑

Imagen parpadea 22-08-2022

<img name="parpadeante" src="URL-DE-IMAGEN" alt="imagen parpadeante" />

Imagen que deseo que parpadee

Donde dice: src="URL-DE-IMAGEN"
Cambiamos: "URL-DE-IMAGEN" por el link o url de la imagen que usted quiera colocar.

function parpadeo() {
    var imagen = document.images["parpadeante"];
    imagen.style.visibility = (imagen.style.visibility == "visible") ? "hidden" : "visible";
}
setInterval("parpadeo()", 500); /*Velocidad del parpadeo*/

Velocidad del parpadeo

setInterval("parpadeo()", 500);
El número 500 es la velocidad del parpadeo. Entre mayor sea el número el parpadeo será mas lento, caso contrario, más rapido, menos valor más velocidad.

Imagen fija en pantalla 22-08-2022

Podemos colocar una imagen en cualquiera de las cuatro esquinas de la pantalla, que se mantenga fija en la ventana mientras el visitante se pasea por la página.

<img src='URL-DE-IMAGEN' style='display:scroll;position:fixed;bottom:10px;left:20px;'/>

Solo tenemos que cambiar:

URL-DE-IMAGEN: La dirección de la imagen que vamos a utilizar.
LEFT: Posición a la izquierda
RIGHT: Posición a la derecha
TOP: Posición arriba
BOTTOM: posición abajo

Ejemplo de esto tenemos la imagen en la esquina inferior izquierda y un buscador en la esquina superior derecha. Como podrá ver no solo son imágenes.

El código esta dentro de la etiqueta <IMG>

<img src="../img/maq/logo-tironemota.png" style='display:scroll;position:fixed;bottom:50px;left:20px;'/>

Por lo que podemos usarla dentro de la etiqueta <DIV> como es el caso del buscador presentado

<div style='display:scroll;position:fixed;top:10px;right:20px;width:230px;font-size:0.8em;'>
    <form style="background-color:#531796; padding:10px; border-radius:10px;">
        <input type="text" style="width:165px">
        <input type="submit" value="Ir..">
    </form>
</div>

Arriba ... ⇑

Enlace sobre video

Tutorial imagenes

<div class="videoEnlace">
    <video controls>
        <source src="URL-DEL-VIDEO" type="video/mp4">
    </video>
    <a href="URL-DEL-ENLACE" class="enlaceVideo">Tutorial imagenes</a>
</div>

.videoEnlace{
    max-width:600px;
    margin:20px auto;
    position:relative;
}
.videoEnlace video{width:100%;}
.videoEnlace .enlaceVideo{
    position:absolute;
    top:10px;
    left:10px;
}
.videoEnlace a:link,
.videoEnlace a:visited{
    color:white;
    font-weight:bold;
}

Centrar imagen 22-08-2022

Como centrar imagen html, en ambos ejes.

<div class="imgCentro">
    <img src="URL-DE-IMAGEN" width="300" height="225">
</div>

.imgCentro{
    border:5px solid grey;
    display:block;
    height: 350px; /*Mayor al alto de la imagen*/
    width: 400px; /*Mayor al ancho de la imagen*/
    margin: auto;
    position:relative;
}
.imgCentro img {
    width: 300px; /*Ancho de la imagen*/
    height: 225px; /*Alto de la imagen*/
    margin-top: -112.5px; /*Margen superior negativo la mitad del alto*/
    margin-left: -150px; /*Margen izquierdo negativo la mitad del ancho*/
    left: 50%; /*Posición a la izquierda*/
    top: 50%; /*Posición superior*/
    position: absolute;
}

Galería de imágenes 22-08-2022

1/2.- Galería de imágenes I

<div class="Galeria-1">
    <hr />
        <ul class="pg">
            <li><a href="URL de enlace" target="_blank"><img src="URL de imagen" alt="" /></a></li>
            <li><a href="URL de enlace" target="_blank"><img src="URL de imagen" alt="" /></a></li>
            <li><a href="URL de enlace" target="_blank"><img src="URL de imagen" alt="" /></a></li>
            <li><a href="URL de enlace" target="_blank"><img src="URL de imagen" alt="" /></a></li>
            <li><a href="URL de enlace" target="_blank"><img src="URL de imagen" alt="" /></a></li>
            <li><a href="URL de enlace" target="_blank"><img src="URL de imagen" alt="" /></a></li>
        </ul>
    <hr />
</div>

.Galeria-1 {margin:0 auto;width:425px;text-align:left;}
.Galeria-1 hr {margin:24px 0;clear:both;}
.Galeria-1 .pg {width:350px;list-style:none none;}
.Galeria-1 .pg:after {clear:both;display:block;content:'.';height:0;visibility:hidden;}
.Galeria-1 .pg li {list-style:none none;display:inline;}
.Galeria-1 .pg li a {margin:2px;border:1px solid #CCC;padding:4px;position:relative;float:left;display:block;width:100px;height:75px;}
.Galeria-1 .pg li a:hover {font-size:100%;z-index:2;}
.Galeria-1 .pg li a img {border:0 none;position:absolute;width:100px;height:75px;}
.Galeria-1 .pg li a:hover img,
.Galeria-1 .pg li a:active img,
.Galeria-1 .pg li a:focus img {width:200px;height:150px;left:-50px;top:-37px;z-index:1;}

Galería ... ⇑

2/2.- Galería de imágenes II

Para ver la Galería el ancho de pantalla debe tener mínimo un ancho de 580px

Pasa el puntero sobre las imagenes, clic sobre una imagen

Amanecer Caño Makareo

Arestinga

Atardecer Delta

Biblioteca Nacional Minks

Los Roques

Los Medanos de Coro

Morrocoy

Moscu

Paria

Pico Espejo

Praga

Sierra Nevada

Tepuy

Trakai Lituania

Tucacas

Colonia Tovar

longoish

Para nuestro album utilizamos dos imagenes:

Imagen grande de ancho:400px y alto:300px
Imagen miniatura de ancho:50px y alto:50px

Ambas deben ser bien identificadas

<div class="galeriaImgAviso1">Para ver la Galería el ancho de pantalla debe tener mínimo un ancho de 580px</div>
<p class="galeriaImgAviso2">Pasa el puntero sobre las imagenes, clic sobre una imagen</p>
<div class="galeriaImg">
    <a class="pics" href="#nogo">
        <img class="thumb" src="URL-IMAGEN-MINIATURA" />
        <span>
            <img src="URL-IMAGEN-GRANDE" alt="TEXTO" title="TEXTO" />
            <br />
            TITULO-DE-LA-IMAGEN
        </span>
    </a>
    <a class="pics" href="#nogo">
        <img class="thumb" src="URL-IMAGEN-MINIATURA" />
        <span>
            <img src="URL-IMAGEN-GRANDE" alt="TEXTO" title="TEXTO" />
            <br />
            TITULO-DE-LA-IMAGEN
        </span>
    </a>
    <a class="pics" href="#nogo">
        <img class="thumb" src="URL-IMAGEN-MINIATURA" />
        <span>
            <img src="URL-IMAGEN-GRANDE" alt="TEXTO" title="TEXTO" />
            <br />
            TITULO-DE-LA-IMAGEN
        </span>
    </a>
</div>

/*1.- Contenedor del album*/
.galeriaImg{display:none;}
@media (min-width: 300px){
    .galeriaImgAviso1{background:#2e1604;border-radius:20px;color: #f8f7f6;font-weight: bold;padding:20px;}
    .galeriaImgAviso2{display:none;}
}
@media (min-width:580px){
    .galeriaImgAviso1{display:none;}
    .galeriaImgAviso2{display:block;}
    .galeriaImg{display:block;position:relative;width:400px;margin:auto;border:1px solid #000;font-family:"Times New Roman", Times, serif;font-size:14px;background-color:#333;font-weight:bold;display:flex;flex-wrap:wrap;}
}
/*2.- Posicion, tamaño y margenes de separacion entre las imagenes del album*/
.galeriaImg a.pics{display:inline;color:#990000;text-decoration:underline;border:1px solid #000000;cursor:default;margin:7px 10px;}
/*3.- Tal cual*/
.galeriaImg a.pics img.thumb{display:block;border:0;height:50px;width:50px;}
/*4.- Presentacion de imagen*/
.galeriaImg a.pics span{display:none;border:0;
    width:250px; /*Ancho del fondo de la presentacion*/
    background:#bbb; /*Color fondo de la presentacion*/
    border:1px solid #fff;text-align:center;}
.galeriaImg a.pics span img{border:1px solid #000;
    margin-top:20px; /*Margen superior de la imagen a presental*/
}
/*5.- Posicion del container de presentacion*/
.galeriaImg a.pics:hover {white-space:normal;border:1px solid #fff;}
.galeriaImg a.pics:hover span{display:block;position:absolute;
    left:0px; /*Posicion a la izquierda*/
    top:335px; /*Posicion superior */
    z-index:10;
    height:350px; /*Alto del container a presentar*/
}
/*6.- Posicion del segundo container de presentacion*/
.galeriaImg a.pics:focus{border:1px solid #fc0;outline:0;}
.galeriaImg a.pics:focus span{display:block;position:absolute;
    left:150px; /*Posicion a la izquierda*/
    top:335px; /*Posicion superior*/
    z-index:5;
    outline:0;}
/*7.- segun ancho de pantalla*/
@media (min-width: 750px){
    .galeriaImg{width:505px;}
    .galeriaImg a.pics:hover span {left:0;top:270px;}
    .galeriaImg a.pics:focus span{left:255px;top:270px;}
}
@media (min-width: 850px){
    .galeriaImg{width:505px;}
    .galeriaImg a.pics:hover span {left:0;top:270px;}
    .galeriaImg a.pics:focus span{left:255px;top:270px;}
}
@media (min-width: 950px){
    .galeriaImg{width:576px;}
    .galeriaImg a.pics:hover span {left:0;top:200px;}
    .galeriaImg a.pics:focus span{left:325px;top:200px;}
}
@media (min-width: 1160px){
    .galeriaImg{width:864px;}
    .galeriaImg a.pics:hover span {left:150px;top:135px;}
    .galeriaImg a.pics:focus span{left:450px;top:135px;}
}

Galería ... ⇑

Arriba ... ⇑

@@@@@ 22-08-2022

CONTENIDO

Arriba ... ⇑

Imágenes22-08-2022

Lightbox-2.7.1 22-08-2022

1.- Tres imágenes individuales

2.- Álbum de cinco imágenes

3.- Pasos necesarios para incluir Lightbox en una página web:

3.1.- Incluimos en nuestro sitio la carpeta Lightbox-2

3.2.- Vinculamos los archivo de JavaScript

3.3.- Vinculamos los estilos CSS

3.4.- Se requieren de las imágenes de lightbox

3.5.- Añadir el atributo data-lightbox al vinculo de la imagen, para activarlo.

3.6.- Si deseamos mostrar una leyenda con la imagen agregamos el atributo data-title

3.7.- Si queremos crear un grupo de imágenes relacionadas.

3.8.- Código de mi álbum de imágenes

Efecto Lupa 22-08-2022

1/2.- Lupa con jQuery I 22-08-2022

2/2.- Lupa con jQuery II 22-08-2022

Imagen parpadea 22-08-2022

Imagen que deseo que parpadee

Velocidad del parpadeo

Imagen fija en pantalla 22-08-2022

Enlace sobre video

Centrar imagen 22-08-2022

Como centrar imagen html, en ambos ejes.

Galería de imágenes 22-08-2022

1/2.- Galería de imágenes I

2/2.- Galería de imágenes II

@@@@@ 22-08-2022

Imágenes
22-08-2022