HELP: Practical issues with gallery images, in need of recommendations

[TheNothingMonster]

For the past couple of months or so, I have been considering of changing my galleries on my site as I do not really like how they look at the moment. So I started looking around other digital galleries for inspiration and concluded to one design. I do not know how to call it, but it basically consists of little square icons, which upon being clicked, some short of module will pop up revealing the full image and further details.

Aside from aesthetic purposes, I want to stop hotlinking from DeviantArt and store my images on my site host (Neocities) in order to have more control over my images. Hotlinking is not recommended in most cases.

I decided to go with this idea for the following reasons:
-With light thumbnails, less internet data will be spent and I will not have to worry for my site's bandwidth.
-Browsing through my gallery will be safer in terms of exposure to otherwise sensitive content, as the viewer will not be directly exposed to the artwork. There will be some short of brief warning regarding the image's contents, most likely on the thumbnail and/or as a :hover pop-up message. I draw sensitive themes quite often.

I decided to use the 5.5 version of Markus F. Hay's Lytebox script with a couple of modifications to make this type of gallery work, which is perfect for me but appears to take a bit of time loading when online.

So far everything code-related is okay, however I have some more practical issues regarding how I will manage my images from now and forth. My artworks are usually above 1MB, often near or at 5MB. I usually scale them down a bit so as to share them on the internet, so they ultimately are a bit less than 5MB in the best scenario.

In general, I have a lot of images and I worried that my storage would run out sooner than planned, so I tried making them as compact as possible (I am currently under Neocities' free plan as I do not have a budget). I turned them into .jpgs and also used TinyPNG to edit them further. Eventually, I managed to make all of them be below 1MB, hence their quality is also, well, as bad. (However, that is not noticeable from afar. You have to zoom in most cases to realise what is going on.)

Personally, I enjoy making extremely detailed art and, while having low quality images is both beneficial to my storage and decrease the chances of getting my art getting stolen, it kind of ruins my point. I want people to look at my art from up close and enjoy the detail. I like looking at small details on artworks in general too! Plus, I have some comic-like drawings which need to be viewed in detail. If my art was simpler, then I wouldn't care so much about it. Also, if I end up having such small images on my site, then I will have much more higher quality versions of them on my social media sites which is a bit contradicting if you ask me.
In short, it will feel like all my efforts in showcasing details go down the drain.

So... do you have any recommendations? Are my current plans okay, or should I try something else instead?
Should I not care about my storage that much and just upload my images just like I would upload them anywhere else?
I know 1GB of free storage is a lot, but, is it really? I want to know how much power I've got.

This is my first time dealing with "large" files and storage limitations and I would rather know what I am doing than going in completely blindfolded into something that cannot be changed that easily.

Also, if you are wondering how heavy my site is, it is currently at 13.55 MB (1.4% of storage used). Yeah, I know, it is nothing to worry about at the moment. However, my site files on my computer are 120MB big (including WIP or experimental pages and files).
And consider that the amount of images I want to add are around 200 and this number is only going to increase over time. That is going to take a while.

[shevek]

I have two things to add that you can possibly consider:

One, if you don't want to use a slow loading script, consider the so called checkbox hack. I use this too, and it makes a gallery like you want possible without relying on scripts and just uses CSS. Examples: 1 // 2

Two, I hate saying it, but webp might be your compromise here. I also dislike the format, however I assume you just want people to look at it and don't care much for download convenience of compatibility when someone uses it. It would make the file size small while still retaining a lot of quality.

[CytricAcid]

Hmmm I'm having similar thoughts to you, though I haven't even begun to put them into code. When I looked for javascript galleries I couldn't find anything that fit my usage case, so I was actually going to try coding my own. I don't know javascript though, so if it happens, it'll probably be a huge project.
Either way, I'll be watching this thread since this is something I'm looking into as well!

[manrevisited]

It looks like Lytebox is using javascript (even AJAX, maybe?), so as a transitional option, you could use any external image host you're comfortable with (imgur, deviantart, tumblr, photobucket, etc) to hotlink just the full size images and maintain smaller resolution, smaller size preview images on your neocities. Then whenever the user clicks on an image to request a full size, you could load the (hotlinked to the external site) full-size image at that stage using Javascript.

With this kind of a setup, you don't have to use a lot of your own storage space but users on any quality of internet connection can view the preview images, and can choose exactly what number of full-size images they want to view. It does mean the loading of the individual full-size images will be relatively slow, but it will only happen one at a time. This saving-two-separate-images-at-different-qualities trick used to be pretty common to deal with dial-up speeds, iirc.

If you need help thinking through the JS implementation of this, let me know. I'd be happy to mock something up in jsfiddle.

[TheNothingMonster]

Hmm... everyone has good ideas. I need to think about them!

One, if you don't want to use a slow loading script, consider the so called checkbox hack. I use this too, and it makes a gallery like you want possible without relying on scripts and just uses CSS.

This is a good little trick! I see how this can be implemented, I just need to test if what I have in mind will work for this case. I will certainly try it out and consider its pros and cons so we can discuss this further.

Two, I hate saying it, but webp might be your compromise here. I also dislike the format, however I assume you just want people to look at it and don't care much for download convenience of compatibility when someone uses it. It would make the file size small while still retaining a lot of quality.

Strangely enough, this could indeed work. And yes, download availability is not a concern. The only drawback is that it might take me some time to set down with this format as I have yet to experiment with it. I have little idea of how it works and how heavy the average image file will be in this case. I hope it won't be much of a bother once I get used to it, I guess, but I think I should experiment before anything else.

It looks like Lytebox is using javascript (even AJAX, maybe?), so as a transitional option, you could use any external image host you're comfortable with (imgur, deviantart, tumblr, photobucket, etc) to hotlink just the full size images and maintain smaller resolution, smaller size preview images on your neocities. Then whenever the user clicks on an image to request a full size, you could load the (hotlinked to the external site) full-size image at that stage using Javascript.

With this kind of a setup, you don't have to use a lot of your own storage space but users on any quality of internet connection can view the preview images, and can choose exactly what number of full-size images they want to view.

That was kind of my initial idea, actually, without this implementation of JS. However, I want to try my best to stop hotlinking, that is, unless there is no other efficient way.

If you need help thinking through the JS implementation of this, let me know. I'd be happy to mock something up in jsfiddle.

I would like to have a visual idea of what you are talking about, so some short of example would be of great help!

When I looked for javascript galleries I couldn't find anything that fit my usage case, so I was actually going to try coding my own. I don't know javascript though, so if it happens, it'll probably be a huge project.

I tried making my own script too! But I could only reach up to a certain point, so I gave up and decided to use something external instead because I have very limited knowledge on JS.

---

Note: There is also this Lightbox2 script which is very similar to Lytebox and I have seen used a bit more often. Pros: it loads faster online // Cons: it has less features than Lytebox. In Lytebox, there are tooltips imported along with the module, more navigational buttons to choose from, the ability to have a title and a description separately and the so called "Print" option. I modified this last option so instead of showing up the image in a new smaller browser window, it opens up the image in a new tab (within the same window) so that people can zoom in better on larger images that are not very clear on the module. Unfortunately, Lightbox2 is missing all these features and I cannot alter complicated scripts as such for basic lack of advanced JS knowledge.

If anyone has more ideas, let me know!

[manrevisited]

I would like to have a visual idea of what you are talking about, so some short of example would be of great help!

Sure! I started working on it here, but the thing I'm showing off is mostly the JS code itself. The method I was suggesting doesn't have anything to do with the layout or visuals of the website. It's a change you could make to the order the page loads the images in for any existing gallery layout that puts the full-size images wherever you want. You can see that I've got totally different images for the previews and the full-sizes that show up when you click on a preview--this means you could have your little preview images hosted on neocities & load very fast, then have the Javascript create a new <img> element with an external src when a user asks to see a preview.

Pros: it loads faster online // Cons: it has less features than Lytebox. In Lytebox, there are tooltips imported along with the module, more navigational buttons to choose from, the ability to have a title and a description separately and the so called "Print" option.

It's almost always going to be true that more features & more JavaScript code = slower. It might be helpful to make a list of features you actually need/want and then figure out how to implement those in a simpler tool that's almost what you want (like Lightbox2?). Looking at Lytebox is kinda overwhelming even for me! It looks like it may already have the fix I was suggesting, though, and it's just so huge with so many animations (2000 lines of code!), like anything that's meant to be user-friendly for all situations ends up being.

What's going slow for you, right now, using Lytebox? Is it taking a long time on initial page load? Have you already gotten it up and running on your neocities? Because the waybackmachine link is probably giving an incorrect impression of speed--I managed to get it working over here and it doesn't seem painful even with all hotlinked images. I didn't put too many in yet, though, and my internet doesn't normally struggle too badly with images.

On a totally different note, a really minimal solution with no JS at all could be to have a page full of preview images that have HTML like <a href="https://external.link/to/fullsize.png" target="_blank"><img src="smallpreview.png" />[/url], similar to what you mentioned about the "Print" function opening full-size images in a new tab. That would load very quickly, allow people to view the full-size images at any zoom level they want, and be very customizable by you without any JS knowledge. This wouldn't allow for text details about the image, though. (You can also do tool tips using just HTML, as shown in my example above, but note that tool tips in general don't work well on touch screens.)

The "Print" feature is basically just adding a link to a button, so it would be pretty trivial to add that to the faster Lightbox2, if that's the only thing you think it's missing.

[TheNothingMonster]

Sure! I started working on it here, but the thing I'm showing off is mostly the JS code itself. The method I was suggesting doesn't have anything to do with the layout or visuals of the website. It's a change you could make to the order the page loads the images in for any existing gallery layout that puts the full-size images wherever you want. You can see that I've got totally different images for the previews and the full-sizes that show up when you click on a preview--this means you could have your little preview images hosted on neocities & load very fast, then have the Javascript create a new <img> element with an external src when a user asks to see a preview.

Dude. You are epic- thank you so much!!! My images are shown way much better with your script!
I now realise that I do not really need all that sophisticated wacky stuff included in the other scripts. Besides, it's actually "safer" to browse one image at a time without next/previous buttons, for each one has its proper warnings beforehand. I might as well stick to your script!
I remember searching for similar scripts before diving deeper, but I could not find anything so simplistic for some reason. Hence, I looked around others' galleries and fell down in a rabbit hole of sorts.

Also, (in your script) is there a way to make the lightbox pop up exactly where the user is looking at regardless of scroll amount? My gallery page is pretty long in height and the lightbox appears to render on the top of the page, so if you are at the bottom for instance, you have to scroll back up to view the full image.

It might be helpful to make a list of features you actually need/want and then figure out how to implement those in a simpler tool that's almost what you want (like Lightbox2?). Looking at Lytebox is kinda overwhelming even for me! It looks like it may already have the fix I was suggesting, though, and it's just so huge with so many animations (2000 lines of code!), like anything that's meant to be user-friendly for all situations ends up being.

Yeah, I think this is a much better idea. To be fair, I only jumped into all these bulky scripts because they looked promising and I had a couple of references I could use as a foundation. However, as you put it, they are not user-friendly under most circumstances. They just end up make stuff a bit more complicated to deal with for no good reason apart from aestheticism, especially in my case. I reckon your script will act as a much more efficient base to build upon in the long run due to its simplicity. Again, thank you for your tremendous help. I'll totally think of a list!

What's going slow for you, right now, using Lytebox? Is it taking a long time on initial page load? Have you already gotten it up and running on your neocities?

It's probably because I was referencing other sites that used it, one being hosted on Neocities. But no, I haven't really tried it on my site as I was busy testing out other stuff. My bad! I should have probably done than sooner for convenience. Oh well, I reckon I will not continue using Lytebox so it does not matter much now. :P

On a totally different note, a really minimal solution with no JS at all could be to have a page full of preview images that have HTML like <a href="https://external.link/to/fullsize.png" target="_blank"><img src="smallpreview.png" />[/url]

This is probably one of the most easy ways of showing images. Such technique fits perfectly in some more compact sites I've seen, both stylistically and functionally. I usually use this method with plain text instead of smaller previews in places I prefer no images load unless the user wishes to or as a last resort of some shorts. However, I personally prefer staying in the same tab without being overridden by another file.

The "Print" feature is basically just adding a link to a button, so it would be pretty trivial to add that to the faster Lightbox2, if that's the only thing you think it's missing.

Yeah, you are right. I was simply thinking too hard about these scripts, ha ha!

---

I guess I have to look for ways of importing my images into my host now. I could use DeviantArt until I settle down on something.
Again, if someone has any more ideas or recommendations, feel free to share them! ^^
If I made something unclear, let me know.

[CytricAcid]

Sure! I started working on it here, but the thing I'm showing off is mostly the JS code itself. The method I was suggesting doesn't have anything to do with the layout or visuals of the website. It's a change you could make to the order the page loads the images in for any existing gallery layout that puts the full-size images wherever you want. You can see that I've got totally different images for the previews and the full-sizes that show up when you click on a preview--this means you could have your little preview images hosted on neocities & load very fast, then have the Javascript create a new <img> element with an external src when a user asks to see a preview.

Hi! Would it be okay if I used this script on my website too? It's exactly what I've been looking for as well, and if it's alright, to tweak it as well in the future.