js werkt niet meer
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/
Ik zie wel dat PHP uit lijkt te staan, of je index-file is een .html bestand.
Gewijzigd op 21/05/2024 11:31:59 door - Ariën -
enkel <script src="redirect.js" defer></script> met weinig code 30 lijnen
En verder is het een .html file i.p.v. een .php.
Dus je PHP-code die er nu in staat (debugging-code) wordt niet uitgevoerd.
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.)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
-------- 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
}
// 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
}
Edit:
Graag in het vervolg code-tags gebruiken.
Gewijzigd op 21/05/2024 12:44:03 door - Ariën -
Verder mis ik die genoemde code in je site die je hier noemt.
- Ariën - op 21/05/2024 11:30:59:
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.
Ik zie wel dat PHP uit lijkt te staan, of je index-file is een .html bestand.
Wat er is aangepast is dat ik de pagina's nu inlaad. Voorheen als je direct naar www.markpaulussen.com/test/imageGallery ging dan deed hij het prima, maar vanuit de ingeladen pagina via www.markpaulussen.com/test/ niet meer. Iets met inladen maakt het raar.
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.
Gewijzigd op 21/05/2024 12:46:44 door - Ariën -
- Ariën - op 21/05/2024 12:45:40:
Een index.html kan GEEN PHP inladen! (tenzij je zelf configuratie wijzigt aan de server)
Verder mis ik die genoemde code in je site die je hier noemt.
Verder mis ik die genoemde code in je site die je hier noemt.
Oh oke. Maar hij doet het wel. De slider wordt direct ingeladen en op 'work' drukken werkt ook (en dat is de php)
Ik zie nergens die genoemde code die uitgevoerd moet worden. Er staat enkel een redirect.js
Toevoeging op 21/05/2024 12:51:33:
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.
Gewijzigd op 21/05/2024 12:52:33 door - Ariën -
javascripts:
www.markpaulussen.com/test/imageGallery/script.js
www.markpaulussen.com/test/imageSlider/script.js
Hoofdpagina:
www.markpaulussen.com/test/imageGallery/index.php (+ load_images.php)
www.markpaulussen.com/test/imageSlider/index.html
Wat is er mis met een include of autoloader?
Over je probleem: Je script.js wordt niet ingeladen in je index.php bestand.
Gewijzigd op 21/05/2024 13:08:10 door - Ariën -
Maargoed over die javascript: Ik moet dus nog hannesen met het pad naar die javascript. Ik dacht alle foute paden al uitgesloten te hebben.
Toevoeging op 21/05/2024 15:00:35:
Nou, zelfs als ik het complete pad naar de javascript erin zet doet hij het niet. Ook de naam van de javascripts uniek gemaakt dus scriptGallery.js en scriptSlider.js volgens mij laadt hij enkel die redirect.js
Lastig dit.
Toevoeging op 21/05/2024 15:07:37:
Oke om het nog weirder te maken, ik deed de verwijzing naar de javascript van de slider ook in de hoofdpagina (naast die redirect.js). Toen werd enkel de slider full screen geladen (geen menu pagina meer, geen redirect) dus toen weer terug veranderd maar nu blijft hij die andere javascript laden. Echt heel bijzonder.
Mark Paulussen op 21/05/2024 14:27:53:
Maargoed over die javascript: Ik moet dus nog hannesen met het pad naar die javascript. Ik dacht alle foute paden al uitgesloten te hebben.
Als je enkel redirect.js invoegt, en niet script.js, die verantwoordelijk is voor je slider. Dan werkt je slider natuurlijk niet.
- Ariën - op 22/05/2024 08:15:00:
Hoe kom je erbij? Je kan gewoon meerdere scripts invoegen, net zoals je met dat redirect.js deed.
Nou door deze ervaring zie laatste deel van mijn vorige post: Oke om het nog weirder te maken, ik deed de verwijzing naar de javascript van de slider ook in de hoofdpagina (naast die redirect.js). Toen werd enkel de slider full screen geladen (geen menu pagina meer, geen redirect) dus toen weer terug veranderd maar nu blijft hij die andere javascript laden. Echt heel bijzonder.
Ik had dus die verwijzing naar de javascript gemaakt in de hoofdpagina maar dan laadt hij enkel de een of de ander. Zelfs toen ik hem weer weg had gehaald bleef die oude javascript ingeladen worden. Vandaar mijn vraag. Maar jij zegt dus dat dat geen issue zou moeten zijn.
Als het dan nog niet werkt, laat hier even de relevante code zien, en ook hoe je het inlaadt.
Gewijzigd op 22/05/2024 09:24:13 door - Ariën -