Goedendag,
Het is me gelukt een image gallery en een image slider te maken. Ze functioneerden beide prima maar nu ik ze inlaad via php in de website zijn ze hun functie verloren en ik begrijp niet waarom. In eerste instantie moest ik het e.e.a. nalopen betreft pad naar images en css enzo, dat is nu gelukt maar het js deel dat de plaatjes klikbaar maakt voor meer info/ grotere plaatjes enzo werkt niet. Moet ik in de code functies ook voorzien van een pad o.i.d.? Waar moet ik het zoeken? Ik heb het idee dat ik iets over het hoofd zie, maar online zoeken levert me niets op.
De imageslider en imagegallery zitten in aparte mappen en de indexpagina daarin worden ingeladen via php op het startscherm en 'work' van: https://www.markpaulussen.com/test/
Wat heb je precies aangepast waarna het niet meer werkt? JavaScript is cliëntside. Dus aanpassingen in je PHP-code zouden niet een probleem mogen zijn. Check daarom vooral je HTML-source in je browser naar je JavaScript functionaliteit.
Ik zie wel dat PHP uit lijkt te staan, of je index-file is een .html bestand.
Root
|
Map:Test (tijdelijk to hij werkt)
index.html (laadt die php pagina's in)
|
Map: imageSlider
index.html
|
Map: imageGallery
index.php
Mijn eerste pagina is html die laadt die pagina van de slider in (ook index.html in de map imageSlider) en als je op 'work' drukt dan laadt hij de image gallery in (wel index.php in de map imageGallery). In elke map staat een js file met code die zal ik hieronder zetten.
(Ik heb even de php code weg gehaald uit de index.html. Was nog van eerdere probeersels.)
-------- Image slider
// script.js
document.addEventListener('DOMContentLoaded', function () {
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
function showSlide(index) {
slides.forEach((slide, idx) => {
slide.style.opacity = '0';
if (idx === index) {
slide.style.opacity = '1';
}
});
currentSlide = index;
}
document.querySelector('.next').addEventListener('click', () => {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
});
document.querySelector('.prev').addEventListener('click', () => {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
});
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') {
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
} else if (e.key === 'ArrowLeft') {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
}
});
showSlide(0); // Initialize the first slide as visible
});
------- image gallery
function openPopup(fullImagePath) {
const popup = document.getElementById('popup');
const popupImg = document.getElementById('popup-img');
popup.style.display = 'flex'; // Use 'flex' to center the image
popupImg.src = fullImagePath;
}
function closePopup(event) {
const popup = document.getElementById('popup');
// Check if the target is the popup or the close button
if (event.target === popup || event.target.className === 'close-button') {
popup.style.display = 'none';
}
}
window.onclick = closePopup;
function moreInfo() {
alert('More information goes here.'); // Customize this function as needed
}
Wat heb je precies aangepast waarna het niet meer werkt? JavaScript is cliëntside. Dus aanpassingen in je PHP-code zouden niet een probleem mogen zijn. Check daarom vooral je HTML-source in je browser naar je JavaScript functionaliteit.
Ik zie wel dat PHP uit lijkt te staan, of je index-file is een .html bestand.
Nu heb ik de paden aan moeten passen m.b.t. de plaatjes dus direct naar de imageGallery gaan levert geen werkende gallery meer op maar in eerste instantie werkte het echt.
Op https://www.markpaulussen.com/test/ werkt de slider niet hoor.
Ik zie nergens die genoemde code die uitgevoerd moet worden. Er staat enkel een redirect.js
[size=xsmall]Toevoeging op 21/05/2024 12:51:33:[/size]
Wat is de reden dat je fetchpage gebruikt? Dit is eigenlijk dezelfde problemen die je nu ook krijgt als je frames zou gebruiken. Het is niet mogelijk om een aparte bookmark te maken voor je bezoekers, en dit kan ook gevolgen hebben voor searchspiders. Gebruik liever een include of autoloader in PHP, en zorg dat elke site die je oproept een eigen URL heeft.
