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:
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>