So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at ...
So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!
You can download the complete template here
The Following are the css class names I used in the tutorial:
reboot-3d-gallery-scene
Reboot-Auto-Gallery-Parent
Reboot-Auto-Gallery
****Button IDs****
prevBtn
nextBtn
The Following code goes into the Scene Container css:
.reboot-3d-gallery-scene {
overflow: hidden; /* Ensure the pseudo-element stays within bounds */
}
.reboot-3d-gallery-scene::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: inherit;
background-size: cover;
background-position: center;
filter: blur(10px)!important;
-webkit-filter: blur(8px);
z-index:0 ; /* Place it behind the content */
}
The Following code goes into the Gallery Container css:
.Reboot-Auto-Gallery-Parent {
position: relative; /* Ensures proper positioning context */
display: flex;
}
The Following code goes into the Products widget css:
/*MOBILE*/
@media (max-width:767px){
.Reboot-Auto-Gallery-Parent {
/*Scale Control*/
transform: scale(0.65);
}
}
.woocommerce-loop-product__buttons {
z-index: 10;
pointer-events: auto;
}
.product {
width: 300px !important; /* Match the JS dimensions */
height: auto !important; /* Match the JS dimensions */
}
The Following code goes into the HTML widget css:
<script>
jQuery(document).ready(function($) {
var gallery = $('.products'); // Target the products container
var productItems = gallery.find('li.product');
var totalProducts = productItems.length;
var angleStep = 360 / totalProducts;
var currentAngle = 0;
// Set up parent container for 3D
gallery.css({
'position': 'relative',
'height': '500px',
'transform-style': 'preserve-3d',
'transform': 'perspective(1000px)',
'transition': 'transform 0.8s ease-in-out'
});
// Position each product in 3D space
productItems.each(function(index) {
$(this).css({
'position': 'absolute',
'left': '50%',
'top': '50%',
'margin-left': '-150px',
'margin-top': '-150px',
'width': '300px',
'height': '300px',
'transform-style': 'preserve-3d',
'transform': 'rotateY(' + (index * angleStep) + 'deg) translateZ(400px)'
});
});
// Set initial background on page load
var firstImageUrl =
productItems.first().find('img').attr('src').replace('-300x300', '');
$('.reboot-3d-gallery-scene').css({
'background-image': 'url(' + firstImageUrl + ')',
'background-size': 'cover',
'background-position': 'center'
});
// Add button event listeners
$(document).on('click', '#nextBtn', function() {
currentAngle -= angleStep;
gallery.css('transform', 'perspective(1000px) rotateY(' + currentAngle + 'deg)');
});
$(document).on('click', '#prevBtn', function() {
currentAngle += angleStep;
gallery.css('transform', 'perspective(1000px) rotateY(' + currentAngle + 'deg)');
});
function updateBackground() {
// Calculate which product is front-facing based on current angle
var normalizedAngle = ((currentAngle % 360) + 360) % 360;
var frontIndex = Math.round(-normalizedAngle / angleStep) % totalProducts;
if (frontIndex < 0) frontIndex += totalProducts;
productItems.css('z-index', '1');
// Bring the front product to the top
var frontProduct = productItems.eq(frontIndex);
frontProduct.css('z-index', '10'); // Higher value to ensure it's clickable
// Get the front-facing product's image
var frontProduct = productItems.eq(frontIndex);
var imageUrl = frontProduct.find('img').attr('data-src') ||
frontProduct.find('img').attr('data-large_image') ||
frontProduct.find('img').attr('src').replace('-300x300', '');
// Apply to parent container
$('.reboot-3d-gallery-scene').css({
'background-image': 'url(' + imageUrl + ')',
'background-size': 'cover',
'background-position': 'center',
'transition': 'background-image 0.4s ease-in-out'
});
}
// Call after rotation
$('#nextBtn, #prevBtn').on('click', function() {
setTimeout(updateBackground, 400);
});
});
</script>