yes i see that now, tho the “list” divs are hidden and i tried to ease their content since i moved their inner html to the main gallery html, this should`nt affect the loading no?
anyway i am trying now to remove the div element…
i dont know if storing them in a var and then adding them will work better, maybe var have length limits
You added too many moving wheels to it all and made it even more complicated
if I understand correctly
php looks at some path (folder for imgs)
and then you have foreach(blah blah)
which adds each image to the page as a “list”.
Tell me how often you intend to change those pictures?
because I can’t believe that it is so difficult for you to rename them (those existing in the folder) to numbers
and then when you want to delete one, you find that number and delete it
and you upload a new one with that numerical name.
You don’t have live streaming, so the content changes every 5 minutes
so that you have to dynamically peek into some directory nonstop
Now… assuming that you don’t have those duplicates, you could just copy the source from the browser that php generated and save it as an HTML page.
And then it would be easier for you to use JS carousels and the rest
because it can easily read the content of the website
(you don’t have temp XY functions for img src and others that are incomplete and have a lot of moving parts that limit you or DOM)
Try to answer this question for yourself :
“How much will I really change that gallery in one year?”
The essence of this gallery is to have several representative pictures to tell the visitors of your abilities
in one part i agree but in another i dont…
the problem is i want to show a lot of diversity and different photos.
i dont know how much i would change but i think its easier with this php since manually typing all the files will be the same i think.
also i randomize the gallery because i dont want the images to be in the same order. (cant decide which images to show and in what order this is only a drop in the ocean of the stuff i got lol 
)
i’ve tried using remove() function to remove the element or anything else i could find but the source keep everything the same…
i tried something crazy… i’ve put the whole list2 content in comment ()
then on click i took that string, removed the comments and added it to main gallery. so that way it wont render the list2 hidden div…
it works but still getting double reads… so weird 
You started with the assumption that someone will follow your work day by day,
but actually, someone will come once a year to fly through the galleries and that’s it.
And even if you change the content on a daily basis - it will not be noticed.
Only you will know every detail that you changed.
JS as well as jQuery can shuffle images
I don’t know what you are doing and too few details
try method removeChild()
var element = document.getElementById("some id here");
element.parentNode.removeChild(element);
or use jQuery
i figured out my problem.
in php i used array_slice to split the array into parts
the duplications came because i thought its slice(array, start, end) buts its slice(array, start, count)
that caused the duplicates.
i’ve updated https://www.kobialony.com/book.php?i=1
and it seems to work better…
about the double calling it still happens, i checked the source code it doesnt have doubles now its something related to the lazy -img i think
i actually dont get it, its a simple php code that output a bunch of img tags one after the other…
the loadmore button just add the innerHTML to the main gallery…
even if i clear the content i add the the main gallery it still happens
does javascript has an option to load images from folder into array and shuffle them easily? i couldnt find one
when this + is removed, then there is no more double calling
so that something in that line 77 and in that JS
I’m tired and I can’t commit to it…
try to completely simplify the code for debugging
e.g.
20 pictures in total
in each id = 5 pieces
and then try different versions of the js code
or throw it out completely and come up with some other JS code
i’ve checked again. it only happens in firefox. even on localhost check
chrome \ edge no problems
i’ve change the += to concat() i think this fixed the problem…
live and learn? 
or maybe it didnt do anything different… bah 
all is 4x
chrome and others - you have to clear the cache manually etc
they are not good for a test environment unless you set them up properly
just try to remove that +
and test and see what happens (maybe you get an idea)
also uses console.log (document.getElementById("list"+galindex))
or similar to get an insight into what is happening
I dug a bit on the net
I don’t know maybe your JS is causing some of this
What’s wrong with innerHTML?
Content is replaced everywhere : When you append to (or otherwise modify) innerHTML, all the DOM nodes inside that element have to be re-parsed and recreated.
Preserves event handlers attached to any DOM elements : Setting innerHTML will not automatically reattach event handlers to the new elements it creates, so you would have to keep track of them yourself and add them manually, potentially creating a memory leak on some browsers.
Even if you use +=like “innerHTML = innerHTML + ‘html’” still the old content is replaced by html: String concatenation just does not scale when dynamic DOM elements need to be created as the plus’ and quote openings and closings becomes difficult to track.
and I don’t know if you’ve read this I linked to you in the previous posts
If I were you, I would simply use PHP to create a list of images for you
and then you create a JS script that will load 10 images and then pause
setTimeout
with a time delay of 5-10 sec (interval)
then next 10 imgs…
and so that it slowly loads images in the background while the user is viewing the gallery
you basically write your own version of lazy load
you have to do it through JS
because if you do it through the PHP code
the server will kill the php process very quickly because it lives too long. (max exec time limit)
so don’t even think of using PHP sleep() etc.
when you have to act like that because you complicated everything
instead of having 50 pictures that are the best of the best. end of the story.
no more 503 and problems.
ok. it turned out i didnt need to use innerHTML at all…
just set the div style to inline to make it inline with other photos.
so now it works perfect, clicking the button loads more images which has loading=“lazy” on them
buuuuutttt
the server is still picking on me with this page only. other pages works perfect just this page is not showing photos again…
i can devide the gallery 20 photos each but it wouldnt matter because the server has some issue with this page… even when they are hidden and have lazy load it happens…
i tried implementing my lazy class again and it works and fade the images in but it has some probs with sometimes images not loading correctly or on time so they start to shake in the same line…
ill try to implement the lazy load with blank src so it shouldnt happen but if its the same prob i am switching server because clearly i am getting blocked on this page
