Slider wil image niet pakken.

[SpeedyGJ]

Mijn vraag

Sinds een week ben ik bezig met het opzetten van een image slider, na lang zoeken heb ik eindelijk 1 gevonden die werkt, het is alleen de standaard balkje die erbij zit.
Met de jQueryUI heb ik een balkje gevonden die naar mij wens is, moet nog wel beetje aangepast worden maar dat is voor later.
Probleem is nu dat de slider de image (114 png afbeeldingen) niet wil pakken, ik kan de slider wel bewegen maar de trigger naar de afbeelding lijkt niet te kloppen. Heb al verschillende manieren geprobeerd maar ik krijg het niet voor elkaar.
Weer iemand wat er fout gaat en hoe dit op te lossen?


Relevante software en hardware die ik gebruik
Notepad++

code:

<!-- Ophalen afbeeldingen -->
<img id="img"><br>
    
<!-- Slider -->
    <div class="layout-slider">
      <input id="Slider5" type="slider" oninput="showVal(this.value)" onchange="showVal(this.value)" name="area" value="1" />
    </div>
<!-- Config ophalen afbeeldingen -->
        <script>
    var val = document.getElementById("Slider5").value;
        document.getElementById("img").src = val + ".png";
        function showVal(newVal){
          document.getElementById("img").src = newVal+ ".png";
        }
</script>
<!-- Config slider -->
    <script type="text/javascript" charset="utf-8">
      
      jQuery("#Slider5").slider({ from: 1, to: 1440, step: 10, dimension: '', scale: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'], limits: false, calculate: function( value ){
        var hours = Math.floor( value / 60 );
        var mins = ( value - hours*60 );
        return (hours < 10 ? "0"+hours : hours) + ":" + ( mins == 0 ? "00" : mins );
      }})
    </script>

De voorbeeld is hier te vinden.

[RobIII]

SpeedyGJ schreef op vrijdag 6 april 2018 @ 16:32:
[url="file:///D:/Xammp/htdocs/BFT/index.html"]De voorbeeld is hier te vinden.[/url]

Euh, je linkt naar file:///D:/Xammp/htdocs/BFT/index.html dus tenzij jij je laptop/PC gaat opsturen naar ons als iemand die link klikt kunnen we er niks mee

Maar om e.e.a. voor te zijn: als je een voorbeeld wil laten zien, zorg dan dat 't een minimale hoeveelheid relevante(!) code bevat zodat wij niet door bakken met code hoeven te worstelen (een zgn. testcase). Daarvoor kun je bjivoorbeeld een jsfiddle.net maken en daar naar toe linken. Laat daarbij ook (merk)namen etc. weg als je niet van spam beschuldigd wil worden

SpeedyGJ schreef op vrijdag 6 april 2018 @ 16:32:
Heb al verschillende manieren geprobeerd maar ik krijg het niet voor elkaar.

We stellen 't ook op prijs als je even laat zien welke manieren zodat wij onze tijd niet gaan zitten verdoen aan 't typen van een suggestie die je al lang geprobeerd hebt.

SpeedyGJ schreef op vrijdag 6 april 2018 @ 16:32:
Weer iemand wat er fout gaat en hoe dit op te lossen?

Wat heb je zelf al gedaan om te analyseren wat er fout gaat? (Debuggen: Hoe doe ik dat?). Heb je al eens gekeken in de console (Firefox Firebug of Dev.tools / Edge devtools / IE F12 Dev.tools / Chrome Dev.tools / Safari Dev.tools etc.) of daar foutmeldingen in voorkomen? Zo ja: welke?

[ Voor 56% gewijzigd door RobIII op 06-04-2018 17:09 ]

[SpeedyGJ]

RobIII schreef op vrijdag 6 april 2018 @ 17:04:
[...]


Euh, je linkt naar file:///D:/Xammp/htdocs/BFT/index.html dus tenzij jij je laptop/PC gaat opsturen naar ons als iemand die link klikt kunnen we er niks mee

Maar om e.e.a. voor te zijn: als je een voorbeeld wil laten zien, zorg dan dat 't een minimale hoeveelheid relevante(!) code bevat zodat wij niet door bakken met code hoeven te worstelen (een zgn. testcase). Daarvoor kun je bjivoorbeeld een jsfiddle.net maken en daar naar toe linken. Laat daarbij ook (merk)namen etc. weg als je niet van spam beschuldigd wil worden


[...]

We stellen 't ook op prijs als je even laat zien welke manieren zodat wij onze tijd niet gaan zitten verdoen aan 't typen van een suggestie die je al lang geprobeerd hebt.


[...]

Wat heb je zelf al gedaan om te analyseren wat er fout gaat? (Debuggen: Hoe doe ik dat?). Heb je al eens gekeken in de console (Firefox Firebug of Dev.tools / Edge devtools / IE F12 Dev.tools / Chrome Dev.tools / Safari Dev.tools etc.) of daar foutmeldingen in voorkomen? Zo ja: welke?

Oeps!
Ik heb de link aangepast, was vergeten de url toe te voegen

jsfiddle.net kende ik nog niet, als ik het daar in plug wordt de overige .js bestanden niet gevonden, en uiteraard pakt hij de code van het ophalen van de images niet.

Wat ik zoal gedaan heb is:
Het plaatsen van de script code op verschillende volgorde, of de image ging verloren of de slider, kortom deze volgorde zou goed moeten zijn.
Tevens heb ik de <input id="Slider5" naam gekoppeld aan de slider script met de hoop dat dat zou werken (stond eerst een andere naam), helaas niet.
Voor de rest kan ik me niet bedenken waar het anders aan kan liggen.

Als ik de debug open zie ik verder geen fouten tevoorschijn komen helaas, als dat zo was had ik het eventueel zelf kunnen oplossen.

[Snake]

Je moet het change event gebruiken van de jQuery slider, niet de onchange op de input.

http://api.jqueryui.com/slider/#event-change