1

Les comparto parte del código con el ejemplo de 2 galerías llamadas Tecnología y Mueblerías.

Cada una de ellas se abre clickeando Open > Se abre .bggaleria respectiva a los productos. Una vez abierta dicha Galería se muestra una imagen principal en grande (#principal), y debajo 5 miniaturas con el attr Src dentro del #contenedor. Al realizar .mousenter en ellas realiza un .fadeIn y las coloca y amplía en lugar de #principal que recibe un .fadeOut para ocultarla.

Ahora el problema: La última img abierta de una de esas galerías, es la primera en verse cuando abro otra galería distinta.

Probé con varios métodos pero este problema persiste.

Imagínense que aquí solo muestro 2 galerías, pero mi proyecto tiene muchas más, y sería un caos que al abrir una galería de X producto se observe una imagen que nada tiene que ver con él.

(Tengo la carpeta con los ejemplos y las imágenes, veo que al ejecutarlo desde aquí se rompe el código). A las img les coloqué el alt="" para su lectura.

$(function(){

 $('#contenedor img').on({

mouseenter: function(){
var UrlImage = $(this).attr('src');
$('.bggaleria #principal').fadeOut(300, function(){
$(this).attr('src', UrlImage); }).fadeIn(300);
}
});
$(".Open").click(function(){
var Urlpic = $(this).attr('value');
$('.bggaleria[value="'+Urlpic+'"]').slideDown(500);

});
$('.bggaleria img#principal').click(function(){ 
$('.bggaleria').hide();
});
});
     
.cuerpo{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.Open{
width: 250px;
height: 100px;
}
.Open img
{
width: 40%;
height: 100%;
cursor: pointer;
}
.img{
    height: 100px;
    width: 100px;
    border: 3px solid rgb(255, 255, 255);
}
h3{
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    color: blue;
}
.bggaleria{
    position: fixed;
    background: rgba(255, 255, 255, 0.7);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
}
#principal {
height: 450px;
width: 550px; 
border: 3px solid grey; 
cursor: pointer;
} 
#galeria{
    position: absolute;
    background-color: #d3dce3;
    width: 550px;
    height: 453px;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Galeria Simple de Imagenes...</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/estilos.css" />
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <div class="cuerpo">

   <div class="Open" value="pic1">
   <img src="images/Tecnologia/Movil 5.jpeg" alt="Open Tecnologia">
   <h3>TÉCNOLOGIA</h3>
   </div>
   <div  class="bggaleria"  value="pic1">
   <div id="galeria">
   <img id="principal"
   src="images/Tecnologia/Movil 1.jpeg" alt="Principal Movil"/>
        
   <div id="contenedor">
   <img src="images/Tecnologia/Movil 1.jpeg" alt="Movil 1" class="img"/>
   <img src="images/Tecnologia/Movil 2.jpeg" alt="Movil 2" class="img"/>
   <img src="images/Tecnologia/Movil 3.jpeg" alt="Movil 3" class="img"/>
   <img src="images/Tecnologia/Movil 4.jpeg" alt="Movil 4" class="img"/>
   <img src="images/Tecnologia/Movil 5.jpeg" alt="Movil 5" class="img"/>
   </div>
   </div>
   </div>

   <div class="Open" value="pic2">
   <img src="images/Mueblerias/Muebleria 5.jpeg" alt="Open Muebleria">
   <h3>MUEBLES</h3>
   </div>
   <div class="bggaleria" value="pic2">
   <div id="galeria">
   <img id="principal"
   src="images/Mueblerias/Muebleria 1.jpeg" alt="Principal Muebleria"/>
                 
   <div id="contenedor">
   <img src="images/Mueblerias/Muebleria 1.jpeg" alt="Muebleria 1" class="img" />
   <img src="images/Mueblerias/Muebleria 2.jpeg" alt="Muebleria 2"  class="img" />
   <img src="images/Mueblerias/Muebleria 3.jpeg" alt="Muebleria 3"  class="img" />
   <img src="images/Mueblerias/Muebleria 4.jpeg" alt="Muebleria 4"  class="img" />
   <img src="images/Mueblerias/Muebleria 5.jpeg" alt="Muebleria 5"  class="img" />
   </div>
   </div>
   </div>    

   </div>
   </body>
   </html>

2
  • Para que se comprenda mejor tu snippet, en lugar de imágenes estáticas, procura enlazar imágenes de unsplash o similares.
    – padaleiana
    Commented el 16 ago. 2022 a las 11:53
  • Gracias por la sugerencia, lo tendré en cuenta para próximas preguntas que las requieran.
    – Emi.FD2030
    Commented el 17 ago. 2022 a las 2:53

1 respuesta 1

0

El principal problema es que estás duplicando ID para contenedores e imágenes principales de cada galería, pero los ID deben ser únicos.

Para este ejemplo, solo cambie el ID contenedor por clase y en la función del evento:

  • $(this) hace referencia a la imagen que disparó el evento
  • Con el método .closest() se accede al elemento superior con clase bggaleria
  • Se selecciona la imagen principal por su ID con el método .find()
  • Ahí es donde se aplican los cambios

$(function() {
    $('.contenedor img').on({
        mouseenter: function() {
            let UrlImage = $(this).attr('src');
            // Desde la imagen, obtener div con clase bgaleria
            // Encontrar la imagen con ID principal y asignar origen
            $(this).closest('.bggaleria').find('#principal').fadeOut(300, function() {
                $(this).attr('src', UrlImage);
            }).fadeIn(300);
        }
    });
    $(".Open").click(function() {
        let Urlpic = $(this).attr('value');
        $('.bggaleria[value="'+Urlpic+'"]').slideDown(500);
    });
    $('.bggaleria img#principal').click(function() { 
        $('.bggaleria').hide();
    });
});
.cuerpo{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.Open{
width: 250px;
height: 100px;
}
.Open img
{
width: 40%;
height: 100%;
cursor: pointer;
}
.img{
    height: 100px;
    width: 100px;
    border: 3px solid rgb(255, 255, 255);
}
h3{
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    color: blue;
}
.bggaleria{
    position: fixed;
    background: rgba(255, 255, 255, 0.7);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
}
#principal {
height: 450px;
width: 550px; 
border: 3px solid grey; 
cursor: pointer;
} 
#galeria{
    position: absolute;
    background-color: #d3dce3;
    width: 550px;
    height: 453px;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="cuerpo">
   <div class="Open" value="pic1">
       <img src="https://images.unsplash.com/photo-1657299156594-50426d5125a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Open Tecnologia">
       <h3>TÉCNOLOGIA</h3>
   </div>
   <div  class="bggaleria"  value="pic1">
       <div id="galeria">
           <img id="principal" src="https://images.unsplash.com/photo-1657299156594-50426d5125a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Principal Movil"/>
           <div class="contenedor">
               <img src="https://images.unsplash.com/photo-1657299171251-2a61ea716fbf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Movil 1" class="img"/>
               <img src="https://images.unsplash.com/photo-1660650655567-ba02a82f50f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Movil 2" class="img"/>
               <img src="https://images.unsplash.com/photo-1660586179082-775abddd8386?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="Movil 3" class="img"/>
           </div>
       </div>
   </div>

   <div class="Open" value="pic2">
       <img src="https://images.unsplash.com/photo-1660606359683-7832339b2e2f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1112&q=80" alt="Open Muebleria">
       <h3>MUEBLES</h3>
   </div>
   <div class="bggaleria" value="pic2">
       <div id="galeria">
           <img id="principal" src="https://images.unsplash.com/photo-1660606359683-7832339b2e2f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1112&q=80" alt="Principal Muebleria"/>
           <div class="contenedor">
               <img src="images/Mueblerias/Muebleria 1.jpeg" alt="Muebleria 1" class="img" />
               <img src="images/Mueblerias/Muebleria 2.jpeg" alt="Muebleria 2"  class="img" />
               <img src="images/Mueblerias/Muebleria 3.jpeg" alt="Muebleria 3"  class="img" />
               <img src="images/Mueblerias/Muebleria 4.jpeg" alt="Muebleria 4"  class="img" />
              <img src="images/Mueblerias/Muebleria 5.jpeg" alt="Muebleria 5"  class="img" />
           </div>
       </div>
   </div>    
</div>

Creo que solo faltaría restablecer la URL de la imagen principal para que sea la que se muestre cada vez que se abra la galería, pero eso ya es tema de otra pregunta, porque primero hay que ver dónde guardarla.

Nota: No llené todas las imágenes porque no era necesario, basta con abrir la primera galería, pasar el cursor sobre alguna de las imágenes y probar la siguiente para ver que ya no aparecen imágenes de otras galerías donde no corresponde.

2
  • Voy a probar el código con esos cambios, pero de antemano muchísimas gracias!
    – Emi.FD2030
    Commented el 17 ago. 2022 a las 2:30
  • Chequeado, mas que agradecido con la ayuda! Saludos y éxitos
    – Emi.FD2030
    Commented el 17 ago. 2022 a las 2:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.