Sharing my experience in recreating the Instagram stories modal using pure javascript. Here is the preview of Instagram Stories Modal:
A Note: This feature is available only in mobile and i made two versions of it. First version will handle only click functions, GitHub code here (JS alone) and the codepen here. Second version will handle both click and auto-slide, GitHub code here (JS alone) and the codepen here. Here we will be discussing the first version alone.
Logic: The overall logic used is here to set a stack of images and change the zIndex property to switch between images.Here goes the step by step explanation.
Step1: Get all the images. You can get it from the server or in my case i am getting it directly from the DOM(it’s bit easy for showing a preview).
Step2: Once you have all the images, then run a for loop and set the zIndex prop to all images. The first image will have higher zIndex and the last image will have lower zIndex. Here is the preview of the DOM.
Step3: Add a click-event listener for all images.
Step4: We have to create the progress slide bar at the top of the image stack. Based on the number images available, we can create the number of progress slide bar. This logic id covered in functions progressbar() and slideWidth(). Also few CSS is required for this and you can see it in the above codepen.
Step5: Next section is handling the click function of the image. When you click an image, we will get the ID of the image to identify which image is clicked.
Step6: the ID for the image will be starting from 0, so we will increment it by 1 on click. When we made a click, it will call a function changeBar(). There we will be adding the active class based on which image is clicked.
Step7: we will run two for loops, which is is used to change the zIndex value like shown below.
That’s it…try to create it and let me know if you guys faced any issue.
Happy Reading!
