Concise Fullscreen Image & PDF Viewer Plugin - jQuery EZView

Concise Fullscreen Image & PDF Viewer Plugin - jQuery EZView

EZView is a small, unobtrusive, convenient jQuery image & PDF viewer plugin that opens and displays image and PDF files in a fullscreen modal popup.

Features image zoom, image pan and prev/next navigation. It means that the visitors are able to switch between images and PDFs without the need of clicking the files one by one.

1. Include the necessary jQuery library and EZView.js on the webpage.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="EZView.js"></script>

2. Include the draggable.js plugin if you want to enable the image pan functionality when the images is zoomed.

<script src="draggable.js"></script>

3. Add images and PDF files to your webpage. Note that you need to specify the PDF file in the img's href attribute as these:

<img src="1.png" alt="">
<img src="pdf-thumb-1.png" 
     href="pdf-1.pdf"
>
<img src="2.png" alt="">
<img src="pdf-thumb-2.png" 
     href="pdf-2.pdf"
>
<img src="3.png" alt="">
<img src="pdf-thumb-3.png" 
     href="pdf-3.pdf"
>
...

4. Activate the image & PDF viewer by calling the function on the img tag. That's it.

$(function(){
  $('img').EZView();
});

This awesome jQuery plugin is developed by guillermodiazga. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 05.06.2018
  • Source