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.