Viewer customization
Simple template to start your design with
- Jpeg image (no gallery)
- Jpeg image (gallery 1))
- Png image (2)
- Video (gallery 1)
- Other file (gallery 1)
- Gif image (gallery 2)
- Svg image (gallery 2)
- Forced type (gallery 1)
- Forced type (gallery 1)
Note: If you dynamically append an <a> element that you want to be processed by the viewer, you must register
it calling viewer refresh method. See JavaScript code below.
<div class="fm-viewer off-screen" id="theViewer" data-action="close-viewer">
<a href="javascript:;" data-action="close-viewer">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
<defs>
<style>
.b {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 8.68px;
}
</style>
</defs>
<line class="b" x1="39.9" y1="38.47" x2="140.53" y2="139.1" />
<line class="b" x1="39.47" y1="139.53" x2="140.1" y2="38.9" />
</svg>
</a>
<a href="javascript:;" data-action="next">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
<defs>
<style>
.b {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 8.75px;
}
</style>
</defs>
<line class="b" x1="64.84" y1="38.28" x2="115.6" y2="89.03" />
<line class="b" x1="64.4" y1="140.22" x2="115.6" y2="89.03" />
</svg>
</a>
<a href="javascript:;" data-action="previous">
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
<defs>
<style>
.b {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 8.79px;
}
</style>
</defs>
<line class="b" x1="115.27" y1="38.05" x2="64.29" y2="89.03" />
<line class="b" x1="115.71" y1="140.45" x2="64.29" y2="89.03" />
</svg>
</a>
<footer>
<div class="viewer-title d-none"></div>
</footer>
</div>
(function (win) {
"use strict";
// Initialize the viewer using '#theViewer' element
win.TheViewer = new FM_Viewer('#theViewer');
document.getElementById('btn-additem').addEventListener('click', () => {
// Adding an element and registering it to the viewer calling refresh method
let li = document.createElement('li');
li.innerHTML = `Added just now!`;
document.getElementById('link-list').appendChild(li);
TheViewer.refresh();
});
})(window);
/* Customized CSS*/
.fm-viewer .btn {
display: inline-block;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.fm-viewer .btn {
transition: none;
}
}
.fm-viewer .btn:hover {
color: #212529;
}
.fm-viewer .btn:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.fm-viewer .btn:disabled,
.fm-viewer .btn.disabled {
pointer-events: none;
opacity: 0.65;
}
.fm-viewer .btn-dark {
background: transparent;
color: #f6f6f6;
padding-left: 12px;
padding-right: 12px;
border: 0;
}
.fm-viewer .btn-dark:hover {
background: #444;
}
.fm-viewer .btn-warning {
color: #000;
background-color: #ffc107;
border-color: #ffc107;
}
.fm-viewer .btn-warning:hover {
color: #000;
background-color: #ffca2c;
border-color: #ffc720;
}
.fm-viewer .btn-warning:focus {
color: #000;
background-color: #ffca2c;
border-color: #ffc720;
box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}
.fm-viewer .btn-warning:active {
color: #000;
background-color: #ffcd39;
border-color: #ffc720;
}
.fm-viewer .btn-warning:disabled,
.fm-viewer .btn-warning.disabled {
color: #000;
background-color: #ffc107;
border-color: #ffc107;
}
.fm-viewer .text-white {
color: white !important;
}
.fm-viewer .text-center {
text-align: center !important;
}
.fm-viewer .d-none {
display: none !important;
}
@keyframes spinner-border {
to {
transform: rotate(360deg);
}
}
.fm-viewer {
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1050;
transition: all 0.5s;
display: flex;
justify-content: center;
align-items: center;
}
.fm-viewer.off-screen {
transform: scale(0.1);
opacity: 0;
}
.fm-viewer .viewer-content {
transition: all 0.4s;
}
.fm-viewer .viewer-content.fade-in,
.fm-viewer .viewer-content.fade-out,
.fm-viewer .viewer-content.fade-right,
.fm-viewer .viewer-content.fade-left {
opacity: 0;
transition: all 0.4s;
}
.fm-viewer .viewer-content.fade-in,
.fm-viewer .viewer-content.fade-right {
transform: translateX(200px);
}
.fm-viewer .viewer-content.fade-out,
.fm-viewer .viewer-content.fade-left {
transform: translateX(-200px);
}
.fm-viewer img.viewer-content {
max-width: 95%;
max-height: 95%;
}
.fm-viewer iframe.viewer-content {
width: 90%;
height: 80%;
border: 0;
display: block;
}
.fm-viewer video.viewer-content {
width: 90%;
height: auto;
}
.fm-viewer.loading::after {
content: "";
display: block;
position: absolute;
width: 2.3rem;
height: 2.3rem;
top: calc(50% - 1.1rem);
left: calc(50% - 1.1rem);
border: 6px solid white;
border-right-color: transparent;
border-radius: 50%;
animation: 0.7s linear infinite spinner-border;
}
.fm-viewer a[data-action] {
z-index: 1060;
width: 30px;
height: 30px;
background-color: transparent;
transition: all 0.4s;
position: absolute;
border: 1px #fff solid;
}
.fm-viewer a[data-action]:hover {
background-color: #000;
}
.fm-viewer a[data-action=close-viewer] {
top: 10px;
right: 10px;
}
.fm-viewer a[data-action=next] {
top: calc(50% - 15px);
right: 10px;
}
.fm-viewer a[data-action=previous] {
top: calc(50% - 15px);
left: 10px;
}
.fm-viewer footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
padding-bottom: 1rem;
}
.fm-viewer footer .viewer-title {
margin: 0 auto;
display: block;
padding: 0.25rem 1rem;
color: white;
border: 1px solid #fff;
background-color: #000;
}