HTML

Fancy Box Using jQuery

What is Fancy-Box?
A fancy box is a tool for representing images, HTML elements, SWF movies, Iframes, and also Ajax requests in a Mac-style “lightbox” that floats overtop of a web page. Fancy Box means Popup message.
If you want to fancy box using jQuery then follow the below instructions,

Step-1:- Add latest jQuery and fancy Box files

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link  href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
  </head>
</html>

Step-2:- Create links

Create a link element (<a href>) using Image

<a data-fancybox="gallery" href="http://farm4.staticflickr.com/3691/10185053775_701272da37_m.jpg">
    <img src="http://farm4.staticflickr.com/3691/10185053775_701272da37_m.jpg">
</a>

The Output Here: