Full-Screen Images

It is time to show you, how I did the Full-Screen Images on my Site. As some of you noticed, I added a function where you click on an image and it will open up in a full screen window. Firstly, I am proud of myself. I did not use any framework and came up with the idea myself. Yes it would be faster to just use a framework like Bootstrap or a JS library for that. But where is the fun and the learning?

Preparation

Yes, my first step was to think what I actually want. I did some rough drafts on paper. I won't show you my horrible mess of drafts I did there. It is really important to write down, better to make a mockup of your idea. My idea was simple at first. Then I realized, what will be my trigger? A new tab or inside the same HTML document? Where should I put the code? As you see, it is one thing to have an idea, but a quite difficult thing is to make it happen.

Reading the documentation

My next step was to find out what the best practice is. There are two main ways to create stuff over the top of the page. The dialog or modal. Reading through the MDN developer source or a reference to learn about the modal HTML element. I have learned a lot about the standard dialog HTML Element. The How TO - CSS/JS Modal and Infobox/modale Dialogfenster was a good read to learn how to create a modal without the dialog HTML Element.

With all the information gathered and a plan formulated, my part on start implementing the Idea started.

Implementation

let imageList = document.getElementsByTagName("img"); console.log(imageList); addFullScreenImageModal(); function addFullScreenImageModal() { if (imageList.length == 0) { return; } for (let i = 0; i < imageList.length; i++) { imageList.item(i).addEventListener("click", function (event) { let imgEvent=event.target; let img; try { img=imgEvent; console.log(img.src); } catch (error) { return; } }); } }

My first implementation was to try out how the dialog will look. For this I created a simple code which allows my browser to open up the dialog box on every page reload. This helps me to change the Look and fell of the dialog box.

Styling was not that easy. It took me quite while... More then two days! The dialog Box was styled quickly. But it had an "stupid" boarder wich was not going away. With a lot of try and error I finally found out tha the border was not a border! It was a outline. This Outline gave the Dialog a Border which was not going away if you just disabled the Border

In the end, my CSS looked something like that: #image_dialog[open] { overflow: hidden; background-color: transparent; border: none; outline: none; margin-left: auto; margin-right: auto; padding: 0; max-width: none; max-height: none; min-width: 200px; min-height: 200px; } Did you spot the open attribute in the css selector? I used Display: flex; at first. This meant that the Dialog was visible, even if it was not open. This is why the CSS settings will only apply to the ID if the Dialog is open.

Adding the close button

This was very simple, when selecting and using the Dialog inside a variable, you can simple "open" and "close" the dialog. public closeDialog():void{ this.imageDialog.close(); } As you can see, it is simple to close the Dialog.

Replacing Image in the Dialog

When the user clicks the images. An event is triggered. In the event I can get the event-source. Here I can find out what the src attribute in the image tag is. And for safety the function returns out if the image dialog is empty. This happens if I don't want to add the full screen image custom-tag. There wont even be a event listener on the image. When no Images are found the function also returns out, saves some compute time and makes the code safe to use, even if some parts are missing. this.imageList = document.getElementsByTagName("img"); if (this.imageDialog == null || this.imageContainer == null) { console.warn("not found on this page, skipping"); return; } if (this.imageList.length == 0) { return; }

Finish

Use this image, click on it. You will be greeted with an full screen version of that image.