AKBGroups

@dsonesuk, Thanks. I have registered for a free database online and made a basic one.
https://www.obvibase.com/p/7cnGXU8jBuES9Fnq

Before I go ahead and try implementing it using this method, is this the correct way to do it? Or is there a simple method I'm not aware of?

Would become:

<script>
    function getImage() {
        return document.getElementById(":18.cell.2" + Count(Rows)).innerHTML;
    }
  
    function getTitle() {
        return document.getElementById(":18.cell.3" + Count(Rows)).innerHTML;
    }
</script>

<div class="w3-quarter">
  <img src="getImage()" style="width: 400%;" onclick="onClick(this)" alt="getTitle()" />
</div>

I think if I know how to read from the database, I will be able to implement the logic I proposed in my first post.

I need some way to set document to be "https://www.obvibase.com/p/7cnGXU8jBuES9Fnq".
Also, how would Count(Rows) be done? I have to find the first appearance of id="4.row.*" (ID is descending order) and return the *wildcard?

Also... when I started writing this post, the id was 18... now it's 4... I don't know why.

Hello,

I am new to HTML and have started off with this template from w3schools: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_portfolio3&stacked=h
I have played around with it a bit and modified it to be more to my liking, but the "<!-- Photo grid -->" section seems quite tedious the way it currently is set up.

I would like to know if there is a way for me to have a series of 100 images locally or externally (e.g. imgur) and have the page updated automatically? This way, if I add a new picture to the server, the rest all shuffle down by 1.

Logically I can understand it, but I don't know how I would do the retrieving. Also, I would like to filter it so that Page 1 would show the first 20 images, then Page 2 would show the next 20, etc... (controlled by the 1, 2, 3, 4 below the pics):

  <!-- Photo grid -->
  <div class="w3-row w3-grayscale-min">
    <div class="w3-quarter">
      <img src=img[20 * (pagenum - 1)] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1)].title>
      <img src=img[20 * (pagenum - 1) + 4] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 4].title>
   </div>
    
   <div class="w3-quarter">
      <img src=img[20 * (pagenum - 1) + 1] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 1].title>
      <img src=img[20 * (pagenum - 1) + 5] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 5].title>
    </div>
    
    <div class="w3-quarter">
      <img src=img[20 * (pagenum - 1) + 2] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 2].title>
      <img src=img[20 * (pagenum - 1) + 6] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 6].title>
    </div>

    <div class="w3-quarter">
      <img src=img[20 * (pagenum - 1) + 3] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 3].title>
      <img src=img[20 * (pagenum - 1) + 7] style="width:100%" onclick="onClick(this)" alt=img[20 * (pagenum - 1) + 7].title>
    </div>
  </div>

Also, I know that I can say width:400% in column 1 row 1, but then how would I made the images in row 2 on columns 2, 3 and 4 be pushed down the correct amount?

OR EVEN BETTER, can I treat them as arrays like the following:
array[x][0] = image
array[x][1] = title
array[x][2] = width
array[x][3] = tag (just a string to let me know which pictures to show, e.g. filter certain images)

Then, this can allow me to set a page limit of 20 images and dynamically do the following?

Current look with the template code above:

Dynamic shuffling of images if the third newest image was set to width 200%:

I really hope this is possible, as it would make maintaining the website 1000000x easier, and look much more interesting/dynamic. It is better to update images or arrays than html code.

Thank you in advance.