A simple photo gallery
It probably doesn't make sense to try to make all our photos public, because most of them will probably not resemble our best work. But choosing the best ones (the needles in the haystack) may require a lot of time. Still, if we can narrow down our choice, our chance to create a beautiful gallery will increase. The idea behind sampling is similar.
What would be the optimal amount of images to show? We probably can't include hundred images in our gallery and expect that they will attract sufficient attention. The size of the screen area will also affect what will be visible by default. The network will limit how many images we can show to our users, especially when they browse our gallery on a mobile phone. Another consideration is the size of the images themselves. If we choose large default images, then we will need to scale them down, so they can fit on smaller screens. Scaling is relatively expensive operation and should be avoided when possible. In itself, it can't reduce the file size unless the smaller version is saved so we can reference it later. In the past we had web sites that loaded scaled down versions of big photos on mobile devices, which slowed them down. We could also have our photos in formats that despite of being more efficient, aren't universally recognized by all browsers, so there is a risk that the browser may not load the file, load another format or even load different, but same value resources more than once.
Since packing our photos in various sizes would be very hard, we can either fix the width or the height and now placing all photos next to each other becomes much easier. (Take a moment to look at Google Images to see how they approach the problem.) Moreover, we can reduce the unoccupied space and achieve a grid-like structure, perhaps even without a separate grid framework.
If we had more images, we could remember the ones that the user saw previously to ensure that they won't come up again. This way we could still show a limited number and have a fast page, while knowing the position of the user in the whole continuum. Once the final screen has been reached, we can delete this information, so that the first images in the gallery appear again. This allows us to avoid the use of distracting interface elements. Now we don't have a concept of previous and next pages; the “next page” is when the current one is reloaded, moving forward only. The disadvantage of this is that we can't get to specific images that we liked and want to return to, which can be problematic the larger our gallery is. Duplicates also shouldn't appear on the screen (this is common-sense, but still worth repeating).
There are special challenges when showing images on a small screen. They can become too small, almost invisible. In this case it seems a good idea to offer a preview that has the largest possible size. When the user hovers over a small image, the preview updates with an enlarged version of it. We can take the dimensions of this enlarged version and create a gallery with many such images. This way we ensure that on the smallest screen we can reuse the work that is already visible on a bigger screen. Otherwise we would need to generate images of sizes specific for the small screen, which introduces overhead.
Touch events are another thing that may not work as we intend (I have no way to test this). Moving the finger from point A to point B should not make our page behave in strange ways. Last, but not least, there are various devices with different browsers and each of them may behave differently.
Here is my humble attempt to create a simple photo gallery in the knowledge that many such projects have been done before. It is nothing original and you may experience some problems. Many photos are just so beautiful that they deserve your own gallery. The images in this one were taken from unsplash.com. I hope that you will like them.