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 ?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?
- Angular 9 Image Upload with Crop Example
- Files Upload on Button Click in PHP Dropzone Example
- PHP Dropzone Allow only One File to Upload Example
- PHP Dropzone Allow only Images to Upload Example
- PHP Dropzone Delete Uploaded File Example
- Livewire CRUD Laravel 7 Example