Overview:
In the quickview, we display all of the photos as thumbnails beneath the main photo. Since the Accessories JS changes the actual Main Photo by clicking directly on the Img tag, we have to swap the src of the img tag to be a small solid black image, and then style that image to look like a button. This allows for the "Nav Control" functionality to still work.
Code:
Theme.liquid:
This will change the img src into a 10x10 solid black image. So that the nav dots are not tiny versions of their images.
<script>
function accessoriesQuickViewCallback(divModal, product){
divModal.find('.accessories-control-thumbs img').attr('src', 'https://dummyimage.com/10x10/000/000.png');
}
</script>
Stylesheet:
This will shrink the "Image" down to 9x9, set a background color, border radius, and opacity level.
.accessories-control-thumbs { margin: 5px auto !important; width: auto !important; display: inline-block; display: flex; justify-content: center; flex-wrap:wrap; } .accessories-control-thumbs li{ border-width: 2px; border: 1px solid #ddd; border-width: 2px; border-radius: 50%; margin: 5px 7px !important; width: 12px; height: 12px; position: relative; display: inline-block; cursor: pointer; transition: color 0.2s ease-in-out, background 0.2s ease-in-out; } .accessories-control-thumbs li img{ opacity:0 !important; } .accessories-control-thumbs img.accessories-active { content: ''; background-color: black; opacity: 1 !important; cursor: default; border-radius: 50%; margin: 0px !important; transition: color 0.2s ease-in-out, background 0.2s ease-in-out; width: 8px; height: 8px; border: 0px; top: 0px; left: 0px; } .accessories-control-thumbs li {
background: rgba(0, 0, 0, 0.2);
border: none;
width: 9px;
height: 9px;
}
.accessories-control-thumbs img.accessories-active {
background: lightgray;
border-color: lightgray;
width: 9px;
height: 9px;
}
.accessories-control-thumbs li img {
opacity: 0 !important;
border-radius: 50%;
}
.accessories-control-thumbs img.accessories-active {
opacity: .3 !important;
}