Resources and Support: Suggestion: Move the zoom buttons on top.

Suggestion: Move the zoom buttons on top.

Printed From: Pixel Joint
Category: The Lounge
Forum Name: Resources and Support
Forum Discription: Help your fellow pixel artists out with links to good tutorials, other forums, software, fonts, etc. Bugs and support issues should go here as well.
URL: https://pixeljoint.com/forum/forum_posts.asp?TID=27135
Printed Date: 11 September 2025 at 11:36am

Topic: Suggestion: Move the zoom buttons on top.

Posted By: JamesOrthII
Subject: Suggestion: Move the zoom buttons on top.
Date Posted: 08 April 2021 at 8:27pm

This post is addressed to who ever is in charge of the main site design. But if you're just a member like me, feel free to weigh in as well.

I frequently make use of the zoom buttons on the main gallery, mostly because my screen is a high-DPI display, and certain elements tend to be pretty small.

Also due to my High-DPI display, the default 1x zoom on pixel art is often too small to read clearly, so I have to usually press the Zoom [+] button at least once to even see anything. Having an option in our user settings to set our "Default Zoom Level" would be really nice.

But the one thing that bothers me about the Zoom buttons, is that since they're below the image, when the image expands it pushes the Zoom buttons down with it. So if I want to click the button to quickly Zoom 2 or 3 times on a really small piece, I have to click, then chase the moved button down with my cursor, then click again, and chase it again, etc.

Aesthetically, I think the buttons look good below the image, but just due to how HTML works, the buttons move. And there's nothing more annoying than when an interface button just moves from under your cursor.

I figure the Zoom buttons would be a bit more functional above the image, because they won't move down the page when the image expands.

Since I'm currently learning JavaScript, I decided to try and tackle this problem myself.

I copied PixelJoint's layout, then removed anything unnecessary to my task. Then I set out to modify the buttons and reverse engineer the Zoom script:

https://jameso2.neocities.org/experiments/pj/pj.html - https://jameso2.neocities.org/experiments/pj/pj.html

(Note, my sample page above is using a Dark Theme CSS mod.)

I decided that since I'm doing the Zoom script from scratch, I might as well add a few features:

The buttons are a bit bigger, making them easier to press (again, my High-DPI display makes the buttons really tiny and hard to line up my cursor on)
In the code, you can specify a "default zoom level" so that gallery items start at 2x, or 3x, or whatever your preferred zoom level is.
"Default Zoom Level" can be set independently for the Main Image and the Small Image (preview). So you can have the main images open up at 2x, and leave the preview default at 1x -- or vice versa.
I added a middle button between the [-] and [+] buttons. The middle button will reset the Zoom to 1x.
If you are already at 1x zoom, pressing the middle button again will switch you to double the default zoom (2x by default, but if your default zoom is 2x it sets to 4x). -- So this button basically acts as a quick-toggle.
The middle button also displays your current Zoom level as text.

You can check out the bare-bones clean code here:

https://codepen.io/jameso2/pen/YzpedJB - https://codepen.io/jameso2/pen/YzpedJB

Since the image defaults are stored in an array, this script could theoretically support any number of images on a page at once, not just the two.

So, what does everyone think?

If this doesn't get implemented into the PixelJoint code, I might try to convert this to a Grease Monkey script. But that'd take a bit more time to figure out.

Replies:

Posted By: Hapiel
Date Posted: 09 April 2021 at 1:56am

I agree, its kinda annoying some times!

We had a discussion about it when we made the http://pa-color-browser.herokuapp.com/ - PA color browser , at first I wanted the buttons below the artworks because of convention, but I'm glad we decided to put it above in the end!

I don't think the site is gonna update very soon, since a much bigger overhaul is needed before these small changes make sense, but I'd be looking forward to your grease monkey script!

By the way, in case you're not aware there is a great plugin called http://chrome.google.com/webstore/detail/fixeljoint/aiedmlipfjjbagfiiegfnedhmkjninnd?hl=en - FixelJoint , I've set it up to auto zoom all works already at 2x, which means I have to click the button less often.

Posted By: JamesOrthII
Date Posted: 09 April 2021 at 11:37am

Oh wow, I did not know about FixelJoint. This pretty much covers all of my super minor complaints, like the fave button thing, default zoom at 2x, bigger zoom buttons, etc. And it adds some stuff I hadn't even thought of, but are super nice: like being able to move the image sideways, smooth zooming, and change the background color. The little "stars" are a nice touch to the rating system too!

The overall look of the some of the UI changes are really nice too. They're not necessarily better or worse than default PJ, but I really do like the thick look of these new buttons.

This is great! Thanks.

As for the PA Color Browser -- this is really cool. I can definitely see myself using this in the future for quick inspiration.

Is PA Color Browser like an external program/site that links into the PixelJoint gallery database or something?

I'm just curious how that works. I'm somewhat new to JS and PHP, but I have some grasp on it, and am always trying to learn new stuff.

Posted By: Hapiel
Date Posted: 09 April 2021 at 1:36pm

I made it together with a friend, also to learn JS! The site is running on ReactJS and Node, no PHP.

We scraped all of pixeljoint, ran some python scripts to analyse the colors, threw all that data in a database, so it is not linked to PJ. The downside is that it also doesn't auto update, so right now you can't find images that are newer than 2020...
Let me know if you have questions about it, I'd love to share more :)

Posted By: JamesOrthII
Date Posted: 09 April 2021 at 7:40pm

A friend of mine keeps talking about React, but I haven't gotten into any frameworks like that yet. So its all a bit foreign to me.

I mostly just do small "projects" where ever my curiosity takes me (like the one in this thread). I haven't really had the time to just sit down and go through some formal JS course or something.

So I know PHP runs server-side, and JS runs client-side. Does ReactJS sort of act like PHP in some way, allowing you to utilize database-like structures or something? To my understanding, the biggest benefit of PHP is it's ability to pull "posts" out of a database and serve them up in different formats to the client -- like WordPress runs off of PHP in this way, and most forum software uses PHP to be able to sort, filter, and search through posts.

To my knowledge, JS (or React) can't do that sort of stuff -- but I could be totally wrong.

Also, how did you write that site-scraper? Was that in python? I want to write a site scraper/crawler for a project of mine, but I don't know where to start. From the some of the quick searches I've done, I've noticed most scraper projects I've seen online mention Python. So I'm guessing that's a good language to start with for that.

Posted By: Hapiel
Date Posted: 10 April 2021 at 1:59am

Node runs server side, and usually react runs on Node. Node allows you to use JS outside of the browser (I've used JS for robotics for example, or for running software server side for websites), it's worth learning about! Knowing the basics of Node & expressJS (a networking library for Node) can be useful before diving into things like React.

Server side code in any language can pull up posts out of a database, but your typical JS runs in the browser (client side), which is why it can't (shouldn't) be used for database connection.

I wrote the scraper in python using the Beautiful Soup library, that was surprisingly straight forward.
By the way the source for the http://github.com/hapiel/pa_color_browser/ - pa color browser site and the http://github.com/hapiel/pa_color_db - scraper & database builder is online. It's messy, but you can view it.

Posted By: JamesOrthII
Date Posted: 10 April 2021 at 6:14pm

Wow, this is super informative. Thanks! I'm gonna bookmark your post for later. Right now I need to figure out which of my projects I'm gonna focus on next. But this info really helps. I definitely need to get into python.