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.
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example