Nowadays every one creating a website for their own business and every type of website has a blog section and it is very trending in every sector. In the blogs, we need to include some rich media content such as images, videos. Most times images are used to attract the users and clarify the context of the topic. Images help a lot to the bloggers.
Sometimes images are managed via using JavaScript and CSS library. Many free and paid image galleries are available in the market. Many times it may need to manage by its own scripts and styles. But it is not an easy task and a very hitch task.
So F1Mate is providing free, simple, and easy integration JavaScript and CSS based JavaScript Magnific Popup Gallery.
How to use JS Magnific Popup Gallery?
Integration of this gallery is a Child’s Play. Just you need to download source code from the F1Mate GitHub Account or use CDN services and follow the following simple steps.
Step 1: Import CSS file into <head> tag in your page form CDN. Filename is:
<link rel="stylesheet" href="https://cdn.f1mate.com/javascript-popup-gallery/css/f1mate-gallery.css" />
Step 2: Import JS file before closing </body> tag in your page from CDN. Filename is:
<script src="https://cdn.f1mate.com/javascript-popup-gallery/js/f1mate-gallery.js"></script>Step 3: After that, you need to paste the image container div just after the <body> open tag.
<!-- F1Mate Gallery Start -->
<div class="f1mate-gallery-container f1mate-disp-none" id="f1mate-gallery-div">
<div class="img-div">
<img src="./img/demo1.jpg" id="f1mate-img-preview" alt="image preview">
</div>
</div>
<!-- F1Mate Gallery End -->Step 4: The fourth and final step is that to add a class name “f1mate-img” in the class attribute of the <img /> tag of the image which you want to make a popup gallery.
<img class="f1mate-img" src="./img/demo1.jpg" alt="F1mate Deom" />Download Source Code: Click Here
View Galley Demo: Click Here
After completing the above steps, your image Magnify Popup Gallery is ready.