Acorn_Media/warmseal-roofing
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added photo reel

Browse Source
This commit is contained in:
Gary 2025-05-13 11:55:58 +01:00
parent 5546298fa0
commit 801998155b
6 changed files with 246 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/style.css
View File

@ -9759,3 +9759,22 @@ textarea.form-control {
.acorn a:hover {
color: var(--blue);
}
.carousel-container {
overflow: hidden;
}
.image-row {
display: flex;
transition: transform 0.5s ease-in-out; /* Adjust duration and easing to match slideDuration */
}
.col-md-3 {
flex: 0 0 auto;
width: 25%; /* Adjust based on numberOfVisible */
}
.image-item {
width: 100%;
height: auto;
display: block;
}

51
includes/footer.php
View File

@ -67,34 +67,43 @@
</div>
<div class="row">
<div class="col-md-12 text-center">
<p class="acorn">Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved - Hosted & Managed by <a href="https://acorn-media.co.uk/" target=_blank><strong>Acorn Media</strong></a></p>
<p class="acorn">Copyright &copy;<script>
document.write(new Date().getFullYear());
</script> All rights reserved - Hosted & Managed by <a href="https://acorn-media.co.uk/" target=_blank><strong>Acorn Media</strong></a></p>
</div>
</div>
</div>
</footer>
</footer>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>
<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px">
<circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee" />
<circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00" />
</svg></div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.timepicker.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/jquery.timepicker.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/scrollax.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="js/google-map.js"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/script.js"></script>
</body>
</body>
</body>
</html>

7
includes/header.php
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<?php
include_once "meta/meta.php";
?>
@ -18,6 +19,6 @@
<link rel="stylesheet" href="<?= $URLcorrection ?>css/style.css">
<link rel="stylesheet" href="<?= $URLcorrection ?>css/padding.css">
<link rel="stylesheet" type="text/css" href="<?= $URLcorrection ?>fontawesome/css/all.min.css">
</head>
<body>
</head>
<body>

49
js/script.js Normal file
View File

@ -0,0 +1,49 @@
const carouselContainer = document.querySelector('.carousel-container');
const imageRow = document.querySelector('.image-row');
let imageItems = imageRow.querySelectorAll('.col-md-3');
const numberOfVisible = 4; // Number of images to show at a time
let scrollPosition = 0;
let imageWidth;
const slideDuration = 1000; // Time in milliseconds for one slide (adjust as needed)
const slideInterval = 5000; // Time in milliseconds between slides (adjust as needed)
let isAnimating = false;
function updateCarousel() {
if (imageItems.length > 0) {
imageWidth = imageItems[0].offsetWidth;
}
}
function slideCarousel() {
if (!isAnimating && imageWidth) {
isAnimating = true;
scrollPosition += imageWidth;
imageRow.style.transform = `translateX(-${scrollPosition}px)`;
setTimeout(() => {
const firstItem = imageRow.firstElementChild;
imageRow.appendChild(firstItem);
imageRow.style.transition = 'none'; // Temporarily disable transition for the reset
imageRow.style.transform = `translateX(0px)`;
scrollPosition = 0;
// Force reflow to apply the style change immediately
imageRow.offsetHeight;
imageRow.style.transition = ''; // Re-enable the transition
imageItems = imageRow.querySelectorAll('.col-md-3');
isAnimating = false;
}, slideDuration);
}
}
function startSlidingCarousel() {
setInterval(slideCarousel, slideInterval);
}
function initializeCarousel() {
updateCarousel();
startSlidingCarousel();
window.addEventListener('resize', updateCarousel);
}
initializeCarousel();

4
sections/about-us.php
View File

@ -8,7 +8,7 @@
<p>For over two decades, since 2003, we've been keen on providing exceptional roofing services. Our journey in the trade has equipped us with a wealth of knowledge and skill that allows us to deliver results that stand alongside the very best. We value the trust our domestic and commercial clients place in us, and we strive to go the extra mile on every job. Our process kicks off with a detailed survey, where we take the time to explain everything clearly and provide photographic evidence for your peace of mind. You'll also receive a comprehensive written estimate, ensuring complete transparency. We're confident in our work and are happy to provide references.</p>
</div>
</div>
<div class="row">
<div class="row padding-bottom-100">
<div class="col-lg-6 col-sm-12 tabulation-2 mt-4">
<ul class="nav nav-pills nav-fill d-md-flex d-block">
<li class="nav-item mb-md-0 mb-2">
@ -86,4 +86,4 @@
</div>-->
</div>
</div>
</section>
</section>

32
sections/counter.php
View File

@ -42,7 +42,7 @@
</section>-->
<section class="ftco-counter" id="section-counter">
<!--<section class="ftco-counter" id="section-counter">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
@ -51,4 +51,32 @@
</div>
</div>
</div>
</section>
</section>-->
<section class="ftco-counter" id="section-counter">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel-container">
<div class="image-row continuous-scroll">
<div class="col-md-3">
<img src="<?= $URLcorection ?>images/projects/1.webp" alt="Image 1" class="image-item">
</div>
<div class="col-md-3">
<img src="<?= $URLcorection ?>images/projects/2.webp" alt="Image 2" class="image-item">
</div>
<div class="col-md-3">
<img src="<?= $URLcorection ?>images/projects/3.webp" alt="Image 3" class="image-item">
</div>
<div class="col-md-3">
<img src="<?= $URLcorection ?>images/projects/4.webp" alt="Image 4" class="image-item">
</div>
<div class="col-md-3">
<img src="<?= $URLcorection ?>images/projects/5.webp" alt="Image 5" class="image-item">
</div>
</div>
</div>
</div>
</div>
</div>
</section>