Jquery Fancybox Popup Simple Example

April 23, 2017 | Category : JQuery Plugin JQuery CSS HTML

we sometime need to make image gallery, photo listing page or etc. we just display using img tag that's it. But if you use jquery plugin like fancybox that can help to make better layout and looks. fancybox through you can simply list images or make image gallery, When you click on image that image display on popup with next previous button and really interesting.

So, here i give you very basic example of fancybox so you can use quick using bellow example. So let's see bellow example:

index.html

<!DOCTYPE html>

<html>

<head>

<title>Fancybox Simple Example</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">

<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

</head>

<body>


<h1>Lists Images</h1>


<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png">

<img class="img-responsive" width="100px" alt="" src="http://placehold.it/320x320" />


</a>

<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png">

<img class="img-responsive" width="100px" alt="" src="http://placehold.it/320x320" />

</a>


<a class="fancybox" rel="ligthbox" href="http://placehold.it/300x320.png">

<img class="img-responsive" width="100px" alt="" src="http://placehold.it/320x320" />

</a>


<script type="text/javascript">

$(".fancybox").fancybox({

openEffect: "none",

closeEffect: "none"

});

</script>


</body>

</html>

If you want to get more information then click here : Fancybox.