/* Stylowanie scrollbara w militarnym stylu */
.military-popup-content::-webkit-scrollbar {
width: 12px;
}
.military-popup-content::-webkit-scrollbar-track {
background: rgba(45, 74, 45, 0.3);
border-radius: 10px;
}
.military-popup-content::-webkit-scrollbar-thumb {
background: linear-gradient(145deg, #4a6b4a, #3a5a3a);
border-radius: 10px;
border: 2px solid rgba(74, 107, 74, 0.5);
}
.military-popup-content::-webkit-scrollbar-thumb:hover {
background: linear-gradient(145deg, #5a7b5a, #4a6a4a);
}
/* Blokowanie scrollowania strony gdy popup otwarty */
body.military-popup-open {
overflow: hidden !important;
}
/* STICKY COLUMN DLA MOBILE - WZMOCNIONE */
@media (max-width: 768px) {
/* Kontener tabeli z poziomym scrollem */
.table-wrapper {
position: relative !important;
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch !important;
display: block !important;
}
/* Reset dla tabeli */
.military-table {
position: relative !important;
display: table !important;
}
/* Sticky pierwsza kolumna - WZMOCNIONE */
.military-table thead th:first-child,
.military-table tbody td:first-child {
position: -webkit-sticky !important; /* Safari */
position: sticky !important;
left: 0px !important;
z-index: 100 !important;
background: linear-gradient(145deg, #4a6b4a, #3a5a3a) !important;
}
/* Alternatywna metoda dla starszych przeglądarek */
@supports not (position: sticky) {
.military-table thead th:first-child,
.military-table tbody td:first-child {
position: fixed !important;
left: 0 !important;
background: linear-gradient(145deg, #4a6b4a, #3a5a3a) !important;
}
}
/* Dodatkowy cień dla lepszej widoczności */
.military-table tbody td:first-child {
box-shadow: 3px 0 8px rgba(0, 0, 0, 0.4) !important;
border-right: 2px solid #2d4a2d !important;
}
.military-table thead th:first-child {
box-shadow: 3px 0 8px rgba(0, 0, 0, 0.6) !important;
border-right: 2px solid #2d4a2d !important;
}
/* Zapewnienie minimalnej szerokości dla pozostałych kolumn */
.military-table th:not(:first-child),
.military-table td:not(:first-child) {
min-width: 100px;
}
/* Wymuszenie szerokości pierwszej kolumny */
.military-table thead th:first-child,
.military-table tbody td:first-child {
min-width: 80px !important;
max-width: 100px !important;
}
}
/* Dodatkowe style dla lepszej responsywności */
@media (max-width: 480px) {
.military-popup-content {
padding: 15px !important;
margin: 20px auto !important;
}
.military-table {
font-size: 10px !important;
}
.military-table th,
.military-table td {
padding: 6px !important;
}
}
Przewijaj kółkiem myszy lub użyj przycisków • Przeciągnij aby przesunąć • Kliknij poza zdjęciem aby zamknąć
let currentZoom = 1;
let isDragging = false;
let startX, startY, scrollLeft, scrollTop;
function handleJacketImageError(img) {
console.log('Próbuję alternatywne formaty obrazka...');
const alternatives = [
'https://militariapro.pl/wp-content/uploads/2025/09/Kurtki_brandit.jpg',
'https://militariapro.pl/wp-content/uploads/2025/09/Kurtki_brandit.jpeg',
'https://militariapro.pl/wp-content/uploads/2025/09/Kurtki_brandit.png',
'https://militariapro.pl/wp-content/uploads/2025/09/kurtki-brandit.jpg',
'https://militariapro.pl/wp-content/uploads/2025/09/kurtki-brandit.png'
];
let currentIndex = 0;
function tryNextFormat() {
if (currentIndex < alternatives.length) {
img.onerror = function() {
currentIndex++;
setTimeout(tryNextFormat, 100);
};
img.src = alternatives[currentIndex];
} else {
img.style.display = 'none';
img.onclick = null;
img.style.cursor = 'default';
document.getElementById('jacket-text-fallback').style.display = 'block';
}
}
tryNextFormat();
}
function openImageZoom(imageSrc) {
const modal = document.getElementById('image-zoom-modal');
const zoomedImg = document.getElementById('zoomed-image');
zoomedImg.src = 'https://militariapro.pl/wp-content/uploads/2025/09/Kurtki_brandit.webp';
zoomedImg.onerror = function() {
const fallbacks = [
'https://militariapro.pl/wp-content/uploads/2025/09/Kurtki_brandit.png',
'https://militariapro.pl/wp-content/uploads/2025/09/Kurtki_brandit.jpg',
imageSrc
];
let index = 0;
function tryNext() {
if (index < fallbacks.length) {
zoomedImg.src = fallbacks[index];
index++;
if (index < fallbacks.length) {
zoomedImg.onerror = tryNext;
}
}
}
tryNext();
};
modal.style.display = 'block';
currentZoom = 1;
zoomedImg.style.transform = `scale(${currentZoom})`;
const container = document.getElementById('zoom-container');
container.addEventListener('mousedown', startDragging);
container.addEventListener('mousemove', drag);
container.addEventListener('mouseup', stopDragging);
container.addEventListener('mouseleave', stopDragging);
container.addEventListener('wheel', handleWheel);
}
function closeImageZoom() {
const modal = document.getElementById('image-zoom-modal');
modal.style.display = 'none';
const container = document.getElementById('zoom-container');
container.removeEventListener('mousedown', startDragging);
container.removeEventListener('mousemove', drag);
container.removeEventListener('mouseup', stopDragging);
container.removeEventListener('mouseleave', stopDragging);
container.removeEventListener('wheel', handleWheel);
}
function zoomIn() {
currentZoom = Math.min(currentZoom + 0.5, 5);
document.getElementById('zoomed-image').style.transform = `scale(${currentZoom})`;
}
function zoomOut() {
currentZoom = Math.max(currentZoom - 0.5, 0.5);
document.getElementById('zoomed-image').style.transform = `scale(${currentZoom})`;
}
function resetZoom() {
currentZoom = 1;
document.getElementById('zoomed-image').style.transform = `scale(${currentZoom})`;
document.getElementById('zoom-container').scrollLeft = 0;
document.getElementById('zoom-container').scrollTop = 0;
}
function handleWheel(e) {
e.preventDefault();
if (e.deltaY < 0) {
zoomIn();
} else {
zoomOut();
}
}
function startDragging(e) {
isDragging = true;
const container = document.getElementById('zoom-container');
startX = e.pageX - container.offsetLeft;
startY = e.pageY - container.offsetTop;
scrollLeft = container.scrollLeft;
scrollTop = container.scrollTop;
e.preventDefault();
}
function drag(e) {
if (!isDragging) return;
e.preventDefault();
const container = document.getElementById('zoom-container');
const x = e.pageX - container.offsetLeft;
const y = e.pageY - container.offsetTop;
const walkX = (x - startX) * 2;
const walkY = (y - startY) * 2;
container.scrollLeft = scrollLeft - walkX;
container.scrollTop = scrollTop - walkY;
}
function stopDragging() {
isDragging = false;
}
// ROZWIĄZANIE JAVASCRIPT DLA STICKY COLUMN
document.addEventListener('DOMContentLoaded', function() {
// Funkcja do klonowania pierwszej kolumny
function createStickyColumn() {
const wrapper = document.querySelector('.table-wrapper');
const table = document.querySelector('.military-table');
if (!wrapper || !table) return;
// Sprawdź czy jesteśmy na mobile
if (window.innerWidth {
const clonedRow = document.createElement('tr');
const firstCell = row.querySelector('td:first-child');
if (firstCell) {
const clonedCell = firstCell.cloneNode(true);
clonedCell.style.cssText = firstCell.style.cssText + `
box-shadow: 3px 0 8px rgba(0, 0, 0, 0.4) !important;
border-right: 2px solid #2d4a2d !important;
`;
clonedRow.appendChild(clonedCell);
}
clonedTbody.appendChild(clonedRow);
});
clonedTable.appendChild(clonedTbody);
}
// Dodaj sklonowaną tabelę do wrappera
wrapper.style.position = 'relative';
wrapper.appendChild(clonedTable);
// Synchronizuj wysokości wierszy
setTimeout(() => {
const originalRows = table.querySelectorAll('tr');
const clonedRows = clonedTable.querySelectorAll('tr');
originalRows.forEach((row, index) => {
if (clonedRows[index]) {
const originalHeight = row.offsetHeight;
clonedRows[index].style.height = originalHeight + 'px';
}
});
}, 100);
// Ukryj oryginalną pierwszą kolumnę podczas scrollowania
wrapper.addEventListener('scroll', function() {
if (wrapper.scrollLeft > 0) {
table.style.marginLeft = '0px';
clonedTable.style.display = 'table';
} else {
clonedTable.style.display = 'table';
}
});
}
}
// Uruchom funkcję
createStickyColumn();
// Uruchom ponownie przy zmianie rozmiaru okna
let resizeTimer;
window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(createStickyColumn, 250);
});
// Dodatkowa obsługa dla urządzeń dotykowych
const tableWrapper = document.querySelector('.table-wrapper');
if (tableWrapper) {
let touchStartX = 0;
tableWrapper.addEventListener('touchstart', function(e) {
touchStartX = e.touches[0].clientX;
}, { passive: true });
tableWrapper.addEventListener('touchmove', function(e) {
if (!touchStartX) return;
const touchEndX = e.touches[0].clientX;
const diff = touchStartX - touchEndX;
// Przewijanie tylko w poziomie
if (Math.abs(diff) > 5) {
e.stopPropagation();
}
}, { passive: true });
}
});
