| English |
|---|
| In this article, we are going to show you how to quickly show |
...
| images |
...
| themselves without first downloading the file. |
Sample screenshots:-
Clicking on any image in the file/image upload element will bring up lightbox, displaying the photo.
...
In any form that contains Image Upload field, add a Custom HTML and put in the following code.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
// Init fancybox
$().fancybox({
selector : 'ul.form-fileupload-value > li > a:has(img)',
thumbs : {
autoStart : true
}
});
});
</script>
|
If you are using regular File Upload, you can use the code below to scan through images in them and display in lightbox too.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
//locate images
$("ul.form-fileupload-value > li > a").each( function(){
if(/\.(?:jpg|jpeg|gif|png)$/i.test($(this).text())){
$(this).addClass("withImage");
}
});
// Init fancybox
// selector : 'ul.form-fileupload-value > li > a:has(img)',
$().fancybox({
selector : 'ul.form-fileupload-value > li > a.withImage, ul.form-fileupload-value > li > a:has(img)',
thumbs : {
autoStart : true
}
});
});
</script> |