Php/js galleri, behöver en knuff i rätt riktning

Trädvy Permalänk
Medlem
Plats
Piteå
Registrerad
Okt 2004

Php/js galleri, behöver en knuff i rätt riktning

Till att börja med vill jag bara säga att jag är rätt kass på php men ännu värre när det gäller javascript.

Hur som, jag försöker göra ett "automatiskt" galleri och allt fungerar i princip som det ska förutom en sak: Hur jag än vrider och vänder på det så får jag bara 1 thumbnail att fungera... Hur tusan ska jag lösa detta?

php koden ser ut såhär:

<?php $pics = glob("img/2016/*/*.{JPG,PNG,GIF,jpg,png,gif}", GLOB_BRACE); if(count($pics)) { rsort($pics); foreach($pics as $pictures) { echo "<img class='Gallery' src='$pictures'>"; } echo '<a class="button-floating lbutton" onclick="plusDivs(-1);plusThumbs(-1)"><div class="gall_nav">❮</div></a>'; echo '<a class="button-floating rbutton" onclick="plusDivs(1);plusThumbs(1)"><div class="gall_nav">❯</div></a>'; echo '</div>'; echo '<div class="thumbs_container">'; foreach($pics as $thumbs1){ echo "<img class='thumbs' src='$thumbs1'>"; } } else { echo "Här var det tomt!"; } ?>

har även provat denna foreach variant och då fick jag ut 8 thumbnails, det var innan jag började med thumbnail javascript delen, men dom uppdaterades ju ej när man klickade till nästa bild vilket ju är helt förståeligt

foreach(array_slice($pics, 1) as $thumbs1) if ($thumb++ < 8){ echo "<img class='thumbs' src='$thumbs1'>"; }

och javascript koden ser ut såhär:

var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("Gallery"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} ; for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; var thumbIndex = slideIndex +1; showThumbs(thumbIndex); function plusThumbs(t){ showThumbs(thumbIndex += t); } function showThumbs(t){ var g; var y = document.getElementsByClassName("thumbs"); if (t > y.length) {thumbIndex = 1} if (t < 1) {thumbIndex = y.length}; for (g = 0; g < y.length; g++){ y[g].style.display = "none"; } y[thumbIndex-1].style.display = "block"; } }

om jag kunde sätta denna var "var thumbIndex = slideIndex +1;" till +1 +2 +3 +4 +5 etc skulle det inte lösa mitt problem då? hur som helst lyckas jag inte få till det och jag kan garantera att det finns mycket bättre och enklare sätt att göra det jag åstadkommit.

Nån som kan knuffa mig i rätt riktning här?

CPU: AMD Ryzen 1700x @ 3.8GHz || Mem: 16GB Corsair LPX 3000mhz || Mobo: Asus x370 Prime || GPU: EVGA Geforce GTX1070 SC || SSD: WD black 500GB m2 || OS: Linux Mint/Win 10 || Monitor: Dell 43" 4K P4317Q

Citera om du vill ha svar :)