There is this kind of _data in the _data folder of the project:

 - name: Sketch 1 src: /artworks/sketches/517.jpg - name: Sketch 2 src: /artworks/sketches/687.jpg

It lists the names and src to pictures. It is necessary to display these pictures after the formation of the entire page, that is, through JS and server requests. This file can be supplemented with time, so a cycle will be organized that simply takes src from this file and inserts it into containers, for example.
So the question is: can this be done at all?
In general, the idea is this: Jekyll forms the page using this kind of files, displays pictures 20 (there are no problems with this, did). Further, as the scroll reaches the end, a request is made, another 20 src pictures are transferred, loaded, and so on until the listings in this file are finished.
You can, of course, call all the pictures 1, 2, 3 ... and so on, then it is easy to register and display them in order, but you do not want to do this, you want to throw, specify the entire info in the _data .yml file and do not bathe.
Yes, and one clarification - using github pages for publication. Php does not roll.
Any ideas? : D

  • You can of course, if ajax will know where to get the fasc data file. I would advise for data to store them in a json file. then nothing will be necessary to parse (As far as I understand, jekyll does not prevent this.). So the question is - will you have an url data file of yoursite.com/data.json type? If yes, then the solution is simple and infinity scroll solutions are many. - alexoander
  • Yes, this file will be in the open repository with the site. I don’t know json at all, but I’ve heard a lot about this extension ... github pages are used, he compiles jekyll himself. As for the scripts and scrolling, the question is not (already considered done), this is the way to understand the idea. Can you please tell us more about this? Where and how to take, what to parse (if necessary - and how?), Where to find out about it all? - VostokSisters

2 answers 2

Here is the solution that reads the date from the yml file from the _data directory. creates an array of src

 <script type="text/javascript"> var client = new XMLHttpRequest(); client.open('GET', '/_data/sources.yml'); client.onload = (function(){ var txt = client.responseText; var myRe = new RegExp("(\/.*?jpg)", "g"); var i = 0; var arr = []; try { while(val = myRe.exec(txt)[0]) { arr[i] = val; i++; } } catch(e) { } console.log(arr); }) client.send(null); </script>
  • the answer helped ?? .. - L. Vadim
  • I still can not say, to be honest, I asked him several days ahead of time: D It hangs in my fixed tabs, how I will test this method and figure out what it does and whether it does, tick, I will not forget. - VostokSisters
 // пример json объекта внутри файла data.json

Formatted JSON Data

 [ { "name":"Image1", "scr":"/data/image2.jpg" }, { "name":"ImageSomeName", "src":"/data/imageSomneName3.jpg" } ]

In this form, we get:

1) This is an array (because we have square brackets [])

2) in the array there are 2 elements, separated by a comma, i.e. {}, {}

3) In each element we have 2 fields - name and src. And they have values. And therefore, to gain access to any of the fields of a specific element, we will simply operate on it like this — obj[0].name and obj[1].src .

well and how to pull data from the json file

 $.ajax({ method: "GET", url: "yourdomain.com/data.json", dataType: "json" }).success(function(data) { // тут будет уже наш json объект, которым можно будет распоряжаться console.log(data); }) .fail(function(er) { // тут будет ошибка если 1) файл не найден 2) форматировани json не соблюдено console.log(er.statusText); });
  • Thank you, well explained to me, a teapot) But I’ve come across the fact that storing photos on a githaba from that kind does not work, so src will be different. But this is another question and it has already been asked, thank you) - VostokSisters
  • @VostokSisters Of course it is impossible) Otherwise, you will turn the github into a repository, for which he will not thank you). Pictures can be stored on any cloud service (Google, Yandex). - alexoander
  • And tell me, can I use Google disk to store and place them on the gallery site? Will the url change to the picture with time, in a year or 10 years? Concerned about the durability of this. - VostokSisters
  • @VostokSisters Well, if you start your box (paid, of course), then as much as you need, so much will be stored. But I do not think this is a problem. even an open cloud is enough (1-5 gig depends on the service). Just store the link to this service as a variable. If suddenly something changes - you change this variable and everything is ok. - alexoander
  • In Google you can only add space to the disk, that's all. And there are 15 gigabytes (that's enough, I think). And about the fact that if something changes, it is unacceptable. All src must be forever. If all paths to a folder change, should I rewrite all paths? All 5 thousand? Norm? - VostokSisters