2

Estoy tratando de agregar un listado de colores según el producto, la idea es mostrar los círculos de colores quedando uno activo por default y, que cambie de imagen del producto al darle clic en unos de los círculos de colores, por ejemplo la siguiente imagen:

introducir la descripción de la imagen aquí

En las estructuras HTML y CSS he creado ya el diseño de como voy a mostrar el listado de productos quedando de la siguiente manera:

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*, ::after, ::before {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: #222222;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    background-color: #f8f9fb;
}
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-right: -15px;
    margin-left: -15px;
}

.container:before,
.container:after,
.space-responsive:before,
.space-responsive:after,
.row:before,
.row:after {
    display: table;
    content: " ";
}

.container:after,
.space-responsive:after,
.row:after{
    clear:both
}

.cards {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 15px;
    padding: 1.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.card {
    width: 320px;
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 30px;
    background: #fefff9;
    color: #363636;
    text-decoration: none;
    -moz-box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
    -webkit-box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
    box-shadow: rgba(0, 0, 0, 0.19) 0 0 8px 0;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
.card-badge {
    position: absolute;
    left: 0;
    top: 20px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    background: red;
    color: #fff;
    padding: 3px 10px;
}
.card-tumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    padding: 20px;
    background: #f0f0f0;
}
.card-tumb img {
    max-width: 100%;
    max-height: 100%;
}
.card-summary {
    padding: 2em;
}
.card-tags {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ccc;
    margin-bottom: 18px;
}
.card-summary h4 {
    font-weight: 500;
    display: block;
    margin-bottom: 18px;
    text-transform: uppercase;
    color: #363636;
    text-decoration: none;
    transition: 0.3s;
}
.card-summary p {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 18px;
    color: #999;
}
.card-price {
    overflow: hidden;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.card-price {
    font-size: 18px;
    color: #fbb72c;
    font-weight: 600;
}
.card-price small {
    font-size: 80%;
    font-weight: 400;
    text-decoration: line-through;
    display: inline-block;
    margin-right: 5px;
}

@media (max-width: 700px) {
    .card {
        width: 100%;
    }
}
@media (min-width: 700px) {
    .card {
        /*max-width: 320px;*/
        margin-right: 20px;
        margin-bottom: 20px;
    }
    .card:nth-child(even) {
        margin-right: 0;
    }
}
@media (min-width: 980px) {
    .card:nth-child(even) {
        margin-right: 20px;
    }
    .card:nth-child(6n) {
        margin-right: 0;
    }
}
    <div id="wrapper-products">
        <div class="products">
            <div class="container">
                <div class="row">
                    <div class="cards">
                        <?php
                            //
                        ?>
                        <div class="card">
                            <span class="card-badge">Oferta</span>
                            <div class="card-tumb">
                                <img src="assets/img/website/1.png">
                            </div>
                            <div class="card-summary">
                                <span class="card-tags">BSC, Camisas</span>
                                <h4>Name of product</h4>
                                <p>The description of product</p>
                                <strong>SIZES</strong>
                                <span>XS, S, M, L, XL, XXL</span>
                                <strong>COLORS</strong>
                                <div class="card-price">
                                    <span><small>$96.00</small> $230.99</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Ahora con algo de suerte he logrado listar algunas imágenes según mi interés, pero esta no funciona correctamente al existir más de dos productos al pasar por una de las imágenes esta la cambia a los dos productos existente, el otro problema es que la imagen se cambia al pasar sobre ella y, esta se debería cambiar al dar clic en la imagen.

¿Que cambios debo agregar a mi código para conseguir lo descrito en mi diseño de listar productos?

$(document).ready(function() {
    // Store initial image size
    function setImageSize() {
        var imageSize = Math.floor($('.zooma-main img:first-child').height());    
        if(imageSize <= 0) {
            requestAnimationFrame(setImageSize);
        }
        else {
            $('.zooma-main').css({width: imageSize, height: imageSize });
            $('.zooma-main img').addClass('is-loaded');
        }
    }
    
    requestAnimationFrame(setImageSize);
    
    // Populate thumbnails
    $('.zooma-main').children().clone().appendTo('.zooma-thumbnail');
        
    // Set state for first image
    $('.product img:first-child').addClass('is-active');
    
    // Thumbnail hover event listener
    $('.zooma-thumbnail img').on('mouseenter', function() {
        $('.product img').removeClass('is-active is-zoomed-in').prop('style', '').off('mousemove');
        $('.product img:nth-child(' + ($(this).index()+1) + ')').addClass('is-active');   
    });

});
.zooma-main {
    overflow: hidden;
    position: relative;
    max-width: 500px;
    max-height: 500px;
}
.zooma-main img {
    pointer-events: none;
    display: block;
    width: 100%;
    height: auto;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    opacity: 0;
    top: 0;
    left: 0;
}
.zooma-main img.is-loaded {
    position: absolute;
}
.zooma-main img.is-active {
    opacity: 1;
    pointer-events: initial;
}
.zooma-main img.is-zoomed-in {
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
    width: initial;
}

.zooma-thumbnail img {
    display: block;
    width: 80px;
    height: auto;
    opacity: 0.5;
    padding: 10px;
}
.zooma-thumbnail img.is-active {
    opacity: 1;
    outline: 1px solid;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.wrapper {
    width: 1200px;
    margin: 0 auto;
}

.product {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
}
.product__thumbnails {
    flex-shrink: 0;
}
.product__focus {
    margin: 0 40px;
}
.product__description {
    width: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="product wrapper">
    <div class="product__thumbnails zooma-thumbnail"></div>
    <div class="product__focus zooma-main">
        <img src="https://images.pexels.com/photos/3532324/pexels-photo-3532324.jpeg"/>
        <img src="https://images.pexels.com/photos/3532326/pexels-photo-3532326.jpeg"/>
        <img src="https://images.pexels.com/photos/3532324/pexels-photo-3532324.jpeg"/>
        <img src="https://images.pexels.com/photos/3532326/pexels-photo-3532326.jpeg"/>
        <img src="https://images.pexels.com/photos/3532324/pexels-photo-3532324.jpeg"/>
    </div>
    <div class="product__description">
        <h1>zooma</h1>
        <h2>$0.00</h2>
        <p>This currently only works with square images.</p>
    </div>
</div>

<br><br>br>
<div class="product wrapper">
    <div class="product__thumbnails zooma-thumbnail"></div>
    <div class="product__focus zooma-main">
        <img src="https://images.pexels.com/photos/3532324/pexels-photo-3532324.jpeg"/>
        <img src="https://images.pexels.com/photos/3532326/pexels-photo-3532326.jpeg"/>
        <img src="https://images.pexels.com/photos/3532324/pexels-photo-3532324.jpeg"/>
        <img src="https://images.pexels.com/photos/3532326/pexels-photo-3532326.jpeg"/>
        <img src="https://images.pexels.com/photos/3532324/pexels-photo-3532324.jpeg"/>
    </div>
    <div class="product__description">
        <h1>zooma</h1>
        <h2>$0.00</h2>
        <p>This currently only works with square images.</p>
    </div>
</div>

2 respuestas 2

1

Trataré de desglosarte los problemas que tenías para ir uno a uno explicándote la solución que le di:

Tus thumbnails no se estaban populando correctamente, provocando que se multiplicaran tantas veces como productos tengas (ya que añadías los thumbnails no solamente al producto que le correspondiese, si no a todos. Si te fijas ocasionaba que hubiese thumbnails que no provocaban cambio de imagen del producto). Para solucionarlo capturé todos y cada uno de los productos existentes y los fui recorriendo para afectar solamente a cada uno y no a todos.

JS

//Capturamos cada uno de los productos
let productos = $('.product');

//Recorremos cada producto
productos.each(function () {
  //Capturamos el producto que se está iterando
  let producto = $(this);
  //Buscamos las imágenes del producto para crear los thumbnails y colgarlos en
  //la zona correspondiente a ese producto.
  producto.find('.zooma-main').children().clone().appendTo(producto.find('.zooma-thumbnail'));
});

Para afectar a tus thumbnails solamente al clickar en ellos debes cambiar tu evento mouseenter por un evento click.

JS

$('.zooma-thumbnail img').on('click', function() { 

Por último, para que al hacerle click a un thumbnail solamente afecte a su producto asociado y no a todos debes seleccionar solamente al producto al que pertenezca.

JS

// Thumbnail click event listener
    $('.zooma-thumbnail img').on('click', function() {
        //Capturamos el thumbnail clickado
        let elemento = $(this);
        //Capturamos el producto al que pertenece el thumbnail clickado
        let producto = elemento.parents('.product');
        //Modificamos solamente las imágenes que pertenezca a ese producto
        producto.find('img').removeClass('is-active is-zoomed-in').prop('style', '').off('mousemove');
        producto.find('img:nth-child(' + ($(this).index()+1) + ')').addClass('is-active');   
    });

Resultado de las modificaciones

$(document).ready(function() {
    // Store initial image size
    function setImageSize() {
        var imageSize = Math.floor($('.zooma-main img:first-child').height());    
        if(imageSize <= 0) {
            requestAnimationFrame(setImageSize);
        }
        else {
            $('.zooma-main').css({width: imageSize, height: imageSize });
            $('.zooma-main img').addClass('is-loaded');
        }
    }
    
    requestAnimationFrame(setImageSize);
    
    // Populate thumbnails
    let productos = $('.product');
    productos.each(function () {
      let producto = $(this);
      producto.find('.zooma-main').children().clone().appendTo(producto.find('.zooma-thumbnail'));
    });
    
    // Set state for first image
    $('.product img:first-child').addClass('is-active');
    
    // Thumbnail click event listener
    $('.zooma-thumbnail img').on('click', function() {
        let elemento = $(this);
        let producto = elemento.parents('.product');
        producto.find('img').removeClass('is-active is-zoomed-in').prop('style', '').off('mousemove');
        producto.find('img:nth-child(' + ($(this).index()+1) + ')').addClass('is-active');   
    });

});
.zooma-main {
    overflow: hidden;
    position: relative;
    max-width: 500px;
    max-height: 500px;
}
.zooma-main img {
    pointer-events: none;
    display: block;
    width: 100%;
    height: auto;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    opacity: 0;
    top: 0;
    left: 0;
}
.zooma-main img.is-loaded {
    position: absolute;
}
.zooma-main img.is-active {
    opacity: 1;
    pointer-events: initial;
}
.zooma-main img.is-zoomed-in {
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
    width: initial;
}

.zooma-thumbnail img {
    display: block;
    width: 80px;
    height: auto;
    opacity: 0.5;
    padding: 10px;
}
.zooma-thumbnail img.is-active {
    opacity: 1;
    outline: 1px solid;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.wrapper {
    width: 1200px;
    margin: 0 auto;
}

.product {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
}
.product__thumbnails {
    flex-shrink: 0;
}
.product__focus {
    margin: 0 40px;
}
.product__description {
    width: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="product wrapper">
    <div class="product__thumbnails zooma-thumbnail"></div>
    <div class="product__focus zooma-main">
        <img src="https://images.pexels.com/photos/3532324/pexels-photo-3532324.jpeg"/>
        <img src="https://images.pexels.com/photos/3532326/pexels-photo-3532326.jpeg"/>
        <img src="https://images.pexels.com/photos/3532324/pexels-photo-3532324.jpeg"/>
        <img src="https://images.pexels.com/photos/3532326/pexels-photo-3532326.jpeg"/>
        <img src="https://images.pexels.com/photos/3532324/pexels-photo-3532324.jpeg"/>
    </div>
    <div class="product__description">
        <h1>zooma</h1>
        <h2>$0.00</h2>
        <p>This currently only works with square images.</p>
    </div>
</div>

<br><br><br>
<div class="product wrapper">
    <div class="product__thumbnails zooma-thumbnail"></div>
    <div class="product__focus zooma-main">
        <img src="https://images.pexels.com/photos/3532324/pexels-photo-3532324.jpeg"/>
        <img src="https://images.pexels.com/photos/3532326/pexels-photo-3532326.jpeg"/>
        <img src="https://images.pexels.com/photos/3532324/pexels-photo-3532324.jpeg"/>
        <img src="https://images.pexels.com/photos/3532326/pexels-photo-3532326.jpeg"/>
        <img src="https://images.pexels.com/photos/3532324/pexels-photo-3532324.jpeg"/>
    </div>
    <div class="product__description">
        <h1>zooma</h1>
        <h2>$0.00</h2>
        <p>This currently only works with square images.</p>
    </div>
</div>

2
  • amigo como puedo reemplazar las imágenes grandes a dar clic para mostrar por círculos de colores, den clic en el círculo de colores está muestre la imagen, tal cual como está pero con ese detallé.
    – Mary
    Commented el 5 oct. 2020 a las 3:27
  • 1
    Tendrías que primeramente hacer unos círculos con CSS y luego vincularles el evento click a esos círculos. En tu código no veo ningún círculo.
    – phpMyGuel
    Commented el 5 oct. 2020 a las 7:24
0

Para que funcione por el evento clic, solo debes cambiar mouseenter por click de esta manera:

// Thumbnail hover event listener
$('.zooma-thumbnail img').on('click', function() {
    $('.product img').removeClass('is-active is-zoomed-in').prop('style', '').off('mousemove');
    $('.product img:nth-child(' + ($(this).index()+1) + ')').addClass('is-active');   
});

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.