Jquery Fancybox Popup Simple Example

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>

Jquery Fancybox Popup Simple Example

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles