Blog: R6D89: #100DaysOfCode (More Posts)
I’ve made some adaptions to the Photo Viewer App. https://projects.jonniegrieve.co.uk/photo_viewer/v5/ It’s the last material change I want to make to this particular version although colour themes and enhancements may follow. B
Basically, I wanted to find a way to align the table of data and the active image to the same line of document flow; allowing me to present the content in an at-a-glance fashion. And I’ve used CSS Flexbox to do it.
In order to do this, I had to edit the code to apply a flex styling to the HTML element with the class of “mySlides” which turned its contents into flex items. So I could position the elements accordingly.
I’ve added the function calls that output the dot selectors to the screen so there is one “dot” for all 12 slides…. the first being the “album cover” (for want of a better description).
There was a disconnect between the pagination buttons and the dot selectors. The disconnect exists because when you press the forward and previous buttons it cycles through all the available data… whereas you need to apply function calls for every possible slide or you lose sync between the photos and their position in the cycle. So you could go forward to open each slide, and if you didn’t have the function call for its prospective circle or “dot” the slider will open the next one. So if you have JSON data file of 11 objects you’ll need 12 dot selectors.
Phew… I hope that made sense. 🙂 So that is now done. All that remains is to select images to use for the app, including portrait photos and organise the final URL for this project to live. And I will of course from time to time look for other ways to build a simple app like this.