How to customize icons and functionalities in Viewer.js

What happened

In a recent project, we utilized the Viewer.js library to display images. However, the client requested a customized functionality for printing images.

Therefore, after conducting some research, I have compiled the findings in this article today.

Viewer.js

Viewer.js is an open-source library that essentially functions as a photo album browser. In terms of features, it includes functionalities such as zoom in and out, page navigation, left and right rotation, flipping, and more, making it quite powerful.

Additionally, due to its lack of significant dependencies, the process of porting the library into projects is relatively straightforward.

Here is the author’s GitHub: fengyuanchen/viewerjs: JavaScript image viewer. (github.com)

Additionally, this is the author’s online demo: Viewer.js (fengyuanchen.github.io)

Let’s get back to the main topic. Let’s first take a look at the originally built-in features.

Alright, now let’s focus on the built-in toolbar below!

Customizing Icons and Functionalities

The client has requested the addition of a print button. So, let’s explore how the original icons are displayed.

Skipping the search process, after examining the viewer.css file, we found that the icons are encoded in Base64! Moreover, they are positioned using a method that involves slicing or cropping.

⬆️ After converting the Base64 to images, you can see all the toolbar buttons here (adjusted the hue for better visibility, as they were initially all white and hard to distinguish).

Now, let’s explore how each functionality is configured.

From the looks of it, adding a new icon seems to require a different approach. Unless you’re willing to modify the existing Base64-encoded images and append another one… which might work, but I’m not that adventurous.

After extensive searching and testing, I finally found a solution. This approach involves using the FontAwesome open-source icon library. I won’t go into the specifics of how to reference it here.

For this instance, I utilized the free version of FontAwesome 6.

Firstly, when calling the Viewer, make sure to explicitly define the toolbar to appear (if not defined, it will include all by default).

	 var viewer = new Viewer(image, {
		 hidden: function () {
			 viewer?.destroy();
			 document.body.removeChild(imageContainer);
		 },
		 toolbar: {
				 zoomIn: false,
				 zoomOut: false,
				 oneToOne: true,
				 reset: true,
				 prev: true,
				 play: true,
				 next: true,
				 rotateLeft: true,
				 rotateRight: true,
				 flipHorizontal: true,
				 flipVertical: true,
				 print: function () {
					 printPic();
				 }
			 }
	 });
	 viewer.show();

In the toolbar configuration, you can hide buttons you don’t want (here, we hide the zoom in and out buttons). Additionally, we’ve added a new “print” functionality (where printPic is a custom JavaScript function).

The next step is to make changes to the viewer.css file.

.viewer-print::before {
    font-family: 'Font Awesome 6 Free';
    content: '\f019';
    font-size: 14px;
    color: white;
    display: inline-block;
    position: relative;
    bottom: -8px;
}

The .viewer-print class is generated when setting up the toolbar. Therefore, if your functionality is named “abc,” it should be represented as .viewer-abc::before.

Crucially, pay attention to the content in \f019; this is the Unicode encoding for the icon we want to use.

The chosen icon this time is from Find Icons with the Perfect Look & Feel | Font Awesome, where you can explore more icons.

Certainly, you can use different versions of FontAwesome as well, just be mindful of the font-family setting.

No more talk, let’s take a look at the results!

You can see that the icon appears perfectly! Congratulations on the successful customization!

Conclusion

Viewer.js is a fairly user-friendly image library. The overall calling and usage are quite straightforward, and it might be a good idea to write a dedicated tutorial in the future.

However, issues related to customizations like today’s are often hard to find information about on the internet.

💔 The entire article was written and tested independently. Feel free to quote or reference, but please avoid copying the entire content verbatim.

🧡You can support our team by sharing the post or clicking some ads, Thanks a lot

✅If you have any problem about this post, please feel free to ask~

Some Random notes