gallery.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Photos | Team TechnoJam | Galgotias University</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="All the upcoming as well as all the previously conducted events by the TechnoJam team at Galgotias Univesity."/>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#58cfe8">
    <meta name="apple-mobile-web-app-title" content="TechnoJam">
    <meta name="application-name" content="TechnoJam">
    <meta name="msapplication-TileColor" content="#58cfe8">
    <meta name="theme-color" content="#58cfe8">
    <style>
        article {
            text-align: center;
        }
        article .container {
            text-align: left;
            max-width: 500px;
            margin: 0 auto 50px auto;
        }
        article .container {
            padding: 0 20px;
        }
        h1 {
            color: rgb(117, 45, 134);
            font-size: 50px;
            font-weight: 100;
        }
        article > .wrapper {
            width: 100%;
            display: grid;
            grid-template-columns: auto auto auto auto;
        }
        article > .wrapper img {
            max-width: 25vw;
            cursor: pointer;
        }
        #cover {
            position: fixed;
            height: 100vh;
            width: 100vw;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.8);
            overflow: hidden;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.75s;
        }
        #coverImage {
            max-width: 100vw;
            max-height: 100vh;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 31;
            transition: opacity 0.3s, transform 0.3s;
        }
        .hideImage {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.75) !important;
        }
        #close, .change {
            padding: 20px;
            width: 20px;
            height: 20px;
            background-color: rgb(120, 120, 120, 0.2);
            border-radius: 50%;
            cursor: pointer;
        }
        #close {
            position: fixed;
            right: 0;
            top: 0;
            z-index: 33;
        }
        .change {
            position: fixed;
            top: 50%;
            z-index: 32;
        }
        #next {
            right: 0;
            transform: translate(0, -50%);
        }
        #prev {
            left: 0;
            transform: translate(0, -50%) rotate(180deg);
        }
        footer {
            bottom: initial !important;
        }
        @media screen and (max-width: 1000px) {
            article > .wrapper {
                grid-template-columns: auto auto auto;
            }
            article > .wrapper img {
                max-width: 33vw;
            }
        }
        @media screen and (max-width: 700px) {
            article > .wrapper {
                grid-template-columns: auto auto;
            }
            article > .wrapper img {
                max-width: 50vw;
            }
        }
        @media screen and (max-width: 400px) {
            article > .wrapper {
                grid-template-columns: auto;
            }
            article > .wrapper img {
                max-width: 100vw;
            }
        }
    </style>
    <link rel="stylesheet" href="/css/global.css">
</head>
<body>
    <nav class="navTransparent">
       <a href="/" class="wrapper"><img src="/images/logo.png" alt="TechnoJam Logo"></a>
       <a href="/about.html" class="wrapper"><span>About</span></a>
       <a href="/events.html" class="wrapper"><span>Events</span></a>
       <a href="/team.html" class="wrapper"><span>Team</span></a>
       <a href="/alumni.html" class="wrapper"><span>Alumni</span></a>
    </nav>
    <article>
        <h1 id="name"></h1>
        <div class="container">
            <p id="info"></p>
            Happened on <span id="date"></span> at <span id="venue"></span>
        </div>
        <div class="wrapper">

        </div>
    </article>
    <div id="cover" onclick="gallery.closeCover(event)">
        <img src="/images/gallery/close.png" id="close" onclick="gallery.closeCover(event)">
        <img src="/images/gallery/next.png" id="prev" class="change" onclick="gallery.prevImage()">
        <img src="/images/gallery/next.png" id="next" class="change" onclick="gallery.nextImage()">
        <img id="coverImage" src="" alt="Full Screen">
    </div>
    <footer>
        <h2>Contact Us</h2>
        <a href="mailto:technojam@galgotiasuniversity.edu.in">
            <img src="/images/social/mail.png" alt="Mail icon">techno<span>jam@galgotiasun</span>iversity.edu.in
        </a>
        <a href="https://www.facebook.com/technojam.scse/" target="_blank">
            <img src="/images/social/facebook.png" alt="Facebook icon">@technojam.scse
        </a>
        <a href="https://www.instagram.com/technojam_galgotias/" target="_blank">
            <img src="/images/social/instagram.png" alt="Instagram icon">@technojam_galgotias
        </a>
    </footer>
    <script>
        const forRange = (begin, end, fn) => {
            for (let i = begin; i < end; i++) fn(i, begin, end);
        }
        let gallery = {
            event: {
                nop: null,
                get numberOfPhotos() {
                    return this.nop;
                }, set numberOfPhotos(val) {
                    this.nop = Number(val);
                }
            },
            currentImage: 0,
            linkFromNumber: i => '/images/events/' + gallery.event.folder + '/' + String(i) + '.png',
            initialize: () => {
                const getInfo = () => {
                    const info = document.location.href.split('#', 2)[1];
                    if (info) {
                        const arr = decodeURIComponent(info).split('&');
                        for (const el of arr) {
                            const entry = el.split('=');
                            gallery.event[entry[0]] = entry[1];
                        }
                    }
                };
                const setInfo = name => {
                    const elem = document.getElementById(name);
                    if (elem) elem.innerHTML = gallery.event[name];
                };

                getInfo();
                for (const x in gallery.event) setInfo(x);
                document.title = gallery.event.name + ' | Team TechnoJam | Galgotias University';

                const wrapper = document.querySelector('article > .wrapper');
                forRange(1, Number(gallery.event.numberOfPhotos) + 1, i => {
                    const img = document.createElement('img');
                    const link = gallery.linkFromNumber(i);
                    img.src = link;
                    img.addEventListener('click', () => gallery.showImage(i));
                    wrapper.appendChild(img);
                });
            }, showImage: i => {
                gallery.currentImage = Number(i);
                const cover = document.getElementById('cover');
                if (cover.style.opacity == '1') {
                    const coverImage = document.getElementById('coverImage');
                    coverImage.classList.add('hideImage');
                    setTimeout(() => {
                        coverImage.src = gallery.linkFromNumber(i);
                        coverImage.classList.remove('hideImage');
                    }, 300);
                } else {
                    document.getElementById('coverImage').src = gallery.linkFromNumber(i);
                    cover.style.opacity = '1';
                    cover.style.zIndex = '30';
                    document.body.style.overflowY = 'hidden';
                }
                if (i === 1) {
                    document.getElementById('prev').style.display = 'none';
                } else {
                    document.getElementById('prev').style.display = 'block';
                }
                if (i == gallery.event.numberOfPhotos) {
                    document.getElementById('next').style.display = 'none';
                } else {
                    document.getElementById('next').style.display = 'block';
                }
            }, prevImage: () => gallery.showImage(gallery.currentImage - 1),
            nextImage: () => gallery.showImage(gallery.currentImage + 1),
            closeCover: e => {
                const id = e.target.id;
                if (id === 'cover' || id === 'close') {
                    const cover = document.getElementById('cover');
                    cover.style.opacity = '0';
                    document.body.style.overflowY = 'initial';
                    setTimeout(() => cover.style.zIndex = '-1', 750);
                }
            }
        };
        gallery.initialize();
    </script>
    <script src="/js/global.js"></script>
</body>
</html>