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>