Thursday, January 31, 2019

Jquery Fancybox Popup Simple Example

on January 31, 2019 No comments
Hi Dear Friends,

In this post We would like to share infinity knowladge My Good experience and Best solution For .

Laravel Examples

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.
Try this it will help you and for more information click here: Laravel Examples.

Read :

I hope you like this Post, Please feel free to comment below, your Any Idea, suggestion and problems if you face - I am here to Resolve your Any problems.
We hope it can help you...

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )