How to use fancybox gallery plugin?

How to use fancybox gallery plugin?

This article we are creating How to fancybox gallery plugin?. First of all we can use fancybox library. We have been using HTML, CSS & JAVASCRIPT. How we have inserted HTML, CSS, JAVASCRIPT into our file. In this fancybox you can change according to your beautiful design. We can easily to modify. There are a lot of option to make beautiful design. We can use more than more without any changes. This is a very useful module for all web player. Just copy and paste this simple code & ready your Client logo slider.

This module we can use gallery section. If we click image, image will be appear in a popup there are also left & right arrow we can click to arrow & move images one by one. This is a common model that we use daily, This is very useful plugin.

By using this plugin the design will look like this.

First of all you put Html in your file.

<div class="fancybox-glrydesign"> <a data-fancybox="gallery" href="https://images.unsplash.com/photo-1560941001-ed30231abeaa?ixlib=rb-1.2.1&#038;ixid=eyJhcHBfaWQiOjEyMDd9&#038;auto=format&#038;fit=crop&#038;w=1508&#038;q=80"> <img src="https://images.unsplash.com/photo-1560941001-ed30231abeaa?ixlib=rb-1.2.1&#038;ixid=eyJhcHBfaWQiOjEyMDd9&#038;auto=format&#038;fit=crop&#038;w=1508&#038;q=80" data-lazy-src="https://images.unsplash.com/photo-1560941001-ed30231abeaa?ixlib=rb-1.2.1&amp;is-pending-load=1#038;ixid=eyJhcHBfaWQiOjEyMDd9&#038;auto=format&#038;fit=crop&#038;w=1508&#038;q=80" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img src="https://images.unsplash.com/photo-1560941001-ed30231abeaa?ixlib=rb-1.2.1&#038;ixid=eyJhcHBfaWQiOjEyMDd9&#038;auto=format&#038;fit=crop&#038;w=1508&#038;q=80"/></noscript> </a> <a data-fancybox="gallery" href="https://images.unsplash.com/photo-1560941002-cdea86b982f8?ixlib=rb-1.2.1&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80"> <img src="https://images.unsplash.com/photo-1560941002-cdea86b982f8?ixlib=rb-1.2.1&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80" data-lazy-src="https://images.unsplash.com/photo-1560941002-cdea86b982f8?ixlib=rb-1.2.1&amp;is-pending-load=1#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img src="https://images.unsplash.com/photo-1560941002-cdea86b982f8?ixlib=rb-1.2.1&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80"/></noscript> </a> <a data-fancybox="gallery" href="https://images.unsplash.com/photo-1550519049-6a6435e85452?ixlib=rb-1.2.1&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80"> <img src="https://images.unsplash.com/photo-1550519049-6a6435e85452?ixlib=rb-1.2.1&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80" data-lazy-src="https://images.unsplash.com/photo-1550519049-6a6435e85452?ixlib=rb-1.2.1&amp;is-pending-load=1#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img src="https://images.unsplash.com/photo-1550519049-6a6435e85452?ixlib=rb-1.2.1&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80"/></noscript> </a> <a data-fancybox="gallery" href="https://images.unsplash.com/photo-1539452851739-c57dee0c0859?ixlib=rb-1.2.1&#038;ixid=eyJhcHBfaWQiOjEyMDd9&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80"> <img src="https://images.unsplash.com/photo-1539452851739-c57dee0c0859?ixlib=rb-1.2.1&#038;ixid=eyJhcHBfaWQiOjEyMDd9&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80" data-lazy-src="https://images.unsplash.com/photo-1539452851739-c57dee0c0859?ixlib=rb-1.2.1&amp;is-pending-load=1#038;ixid=eyJhcHBfaWQiOjEyMDd9&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img src="https://images.unsplash.com/photo-1539452851739-c57dee0c0859?ixlib=rb-1.2.1&#038;ixid=eyJhcHBfaWQiOjEyMDd9&#038;auto=format&#038;fit=crop&#038;w=1500&#038;q=80"/></noscript> </a> </div>

Then put Css in your file.

  


And css link in your Html head section

http://www.papawebdesigner.com/wp-content/themes/catch-mag/assets/css/jquery.fancybox.min.css

And Some css put in your css file.

*{
    margin: 0px;
}
.fancybox-glrydesign a {
    flex: 0 0 50%;
    max-width: 50%;
}
.fancybox-glrydesign {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
.fancybox-glrydesign a img{
	width: 99%;
}

  


And Some js link in your page.

https://code.jquery.com/jquery-3.3.1.slim.min.js

http://www.papawebdesigner.com/wp-content/themes/catch-mag/assets/js/jquery.fancybox.min.js


Finally we are completed How to use fancybox gallery plugin?. First of all I want to tell you this, If you want to use more than fancybox gallery plugin you can do easily. You will have to add in your html data-fancybox=”gallery”. Likewise you can use more than more fancybox gallery in your beautiful page.

We have given the best suitable and easiest way for How to use fancybox gallery plugin?

Thanks for reading this artificial. we have Html & Html5, jquery, js, css question & answer & Angular6 also. For more designs solutions like this you simply visit our site’s post and pages. collection of amazing designing , development tricks and tips. hope you like How to use fancybox gallery plugin?, for any query and suggestion please comment.

#galleryplugin #fancybox #gallerypopup #jquery #Html #custompopup

2 thoughts on “How to use fancybox gallery plugin?

Leave a Reply

Your email address will not be published. Required fields are marked *