MMV (Multi-Media Viewer)

MMV, also known as Multi-Media Veiwer, which allow easy and flexable media viewing on your website. This library allows you to configure and maintain in a very short amount of time. This will also make device-friendly look better for any user on any device. This also uses web-interactions with zoom-in-out effect, animation, and more.

Requirements

Boostrap

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

FontAwesome 6 Pro

 <link href="https://cdn.jsdelivr.net/gh/eliyantosarage/font-awesome-pro@main/fontawesome-pro-6.5.1-web/css/all.min.css" rel="stylesheet">

CDN link

  <link href="https://cdn.jsdelivr.net/gh/XHiddenProjects/MMV@0.0.4/src/css/MMV.min.css" rel="stylesheet"  crossorigin="anonymous"/>
  <script src="https://cdn.jsdelivr.net/gh/XHiddenProjects/MMV@0.0.4/src/js/MMV.min.js" crossorigin="anonymous"></script>

Setup

To setup the library, you would have to follow the steps below...

Note: (Some Images, Videos/Audios) can only contain 1 item in it!

Here is how you set it up

<div class="{class-name}" img-type="{media-format}">
  <!--Media-->
</div>

and to load the MMV function

let iv = new MMV('{element_target}');
    iv.init();

Valid Media Format

These are the limited options you can use for media-format

Type	Supports	Configuration	Description
gallery	Images	zoom(bool\|{active:(bool), static:(bool)}) hover(bool) transition(""\|"slide"\|"curtain") allowDescription(bool) cols(int\|"scroll") Use img-desc to give a description	Loads up 1 or more images in a grid format.
carousel	Images	zoom(bool\|{active:(bool), static:(bool)}) control(""\|"auto"\|"manual") timeout(int) allowDescription(bool) Use img-desc to give a description	Loads up 1 or more images and makes a manual/auto carousel
stack	Images	allowDescription(bool) Use img-desc to give a description	Loads up 1 or more images and stacks it up
lightbox	Images	allowDescription(bool) Use img-desc to give a description	Loads up 1 or more images and makes a lightbox out of it.
background	Images/Videos	multiple(bool)	Loads up 1 or more images/videos and places it in the background
heroimage	Image	Use hero-url attribute to load up image URL.	Loads up 1 image and formats the text
video	Videos	bar(color)<string> skip(seconds)<int> quality({quality:quality_url})<object> subtitles({items:{lang:caption_url}, template:{size:font_size, bg:hex_color, bg-opacity:(0-1), color:hex_color, color-opacity:(0-1), family:font_family}})<object>	Loads up a custom video player.
audio	Audio	bar(color)<string>	Load a custom audio player.

activating the target

After you initalize the program you would have to run a function that is based on the img-type

//We will be using "Gallery" type for this example w/ configuration
iv.gallery({
   allowDescription:true, 
   cols:'scroll', 
   zoom:{active:true,static:false}, 
   hover:false
});
//zoom can be "zoom:true/false" or an object format

./*
- Will show description
- grid size is 1 row with scroll
- zoom is active and static is off
- hover affect is off
*/