{"id":4635,"date":"2024-11-05T16:13:49","date_gmt":"2024-11-05T16:13:49","guid":{"rendered":"https:\/\/unityistanbul.com\/?page_id=4635"},"modified":"2024-11-06T09:57:23","modified_gmt":"2024-11-06T09:57:23","slug":"works-advertising-subfolder","status":"publish","type":"page","link":"https:\/\/unityistanbul.com\/?page_id=4635","title":{"rendered":"Works-Advertising Subfolder"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4635\" class=\"elementor elementor-4635\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-77f1ae1 e-flex e-con-boxed e-con e-parent\" data-id=\"77f1ae1\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-302cc16 elementor-widget elementor-widget-shortcode\" data-id=\"302cc16\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\n    .thumbnailName {\n        text-align: center;\n        margin-top: 5px;\n        font-size: 14px;\n        color: #333;\n    }\n    .nav-overlayVideo {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        width: 10% !important;\n        cursor: pointer;\n    }\n\n    .nav-overlayVideo.left {\n        left: 0;\n    }\n\n    .nav-overlayVideo.right {\n        right: 0;\n    }\n\n    \/* Apply padding only on desktop *\/\n    @media screen and (min-width: 768px) {\n        #gridView {\n            padding-left: 0vw !important;\n            padding-right: 0vw !important;\n        }\n    }\n<\/style>\n\n<div class=\"container\">\n    <div class=\"GalleryHeader\">\n        <div class=\"logo\">MMXX<\/div>\n        <div class=\"close-btn\">CLOSE<\/div>\n    <\/div>\n    <div class=\"viewer\" id=\"singleView\">\n        <img decoding=\"async\" src=\"\" alt=\"\" class=\"main-image\" id=\"mainImage\">\n        <video controls class=\"main-video hidden\" id=\"mainVideo\"><\/video>\n        <div class=\"nav-overlay left\" id=\"prevOverlay\"><\/div>\n        <div class=\"nav-overlay right\" id=\"nextOverlay\"><\/div>\n    <\/div>\n    <ul class=\"thumbnails hidden\" id=\"gridView\">\n        <!-- Thumbnails will be dynamically added here -->\n    <\/ul>\n    <div class=\"image-info\" id=\"image-info\">\n        <span id=\"imageCounter\">01 \/ 09<\/span>\n        <span id=\"name\">Advertising<\/span>\n        <div class=\"view-toggle\">\n            <button class=\"toggle-btn\" id=\"toggleBtn\">Thumbnails<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    const mediaItems = [{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/10\/car-photography-01-1.jpg?v=1789723223', alt: '', name: 'Volkswagen', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/10\/2-car-photography-volkswagen-1-scaled.jpg?v=1789723223', alt: '', name: 'Volkswagen', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Katia-Bony-back-to-school-5.jpg?v=1789723223', alt: '', name: 'Katia&Bony', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Katia-Bony-back-to-school-2.jpg?v=1789723223', alt: '', name: 'Katia&Bony', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Katia-Bony-back-to-school-3.jpg?v=1789723223', alt: '', name: 'Katia&Bony', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Katia-Bony-back-to-school-1.jpg?v=1789723223', alt: '', name: 'Katia&Bony', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/web-moda-reklam-araba-fiat-divarese-urun-fotograf-cekimi-copy.jpg?v=1789723223', alt: '', name: 'Fiat', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Ezgi-Mola-bebek.jpg?v=1789723223', alt: '', name: 'BabyTurco', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Ezgi-Mola-for-Baby-Turco-4.jpg?v=1789723223', alt: '', name: 'Baby Turco', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Ezgi-Mola-for-Baby-Turco-3.jpg?v=1789723223', alt: '', name: 'Baby Turco', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Bobbi-Brown-Rachel-Araz-cekim.jpg?v=1789723223', alt: '', name: 'Baby Turco', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Ezgi-Eyupoglu-2.jpg?v=1789723223', alt: '', name: 'Rachel Araz for Bobbi Brown', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Damla-Biran-Yilmaz-night-estee-lauder.jpg?v=1789723223', alt: '', name: 'Estee Lauder', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Gamze-Ercel-night.jpg?v=1789723223', alt: '', name: 'Estee lauder', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Derya-Sensoy-sheer-night-estee-lauder.jpg?v=1789723223', alt: '', name: 'Estee Lauder', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Gamze-Ercel-sheer-estee-lauder.jpg?v=1789723223', alt: '', name: 'Estee Lauder', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Derya-Sensoy-sheer-estee-lauder.jpg?v=1789723223', alt: '', name: 'Estee Lauder', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Damla-Biran-Yilmaz-Estee-Lauder-Fashion-Photography-Based-Istanbul.jpg?v=1789723223', alt: '', name: 'Estee Lauder', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/09\/Ezgi-Eyupoglu-1.jpg?v=1789723223', alt: '', name: 'Estee Lauder', size: '1' },{ type: 'image', src: 'https:\/\/unityistanbul.com\/wp-content\/uploads\/2024\/10\/moda-fotografcisi-00004.jpg?v=1789723223', alt: '', name: 'Estee Lauder', size: '1' }];\n    const showNames = false;\n\n    const singleView = document.getElementById('singleView');\n    const gridView = document.getElementById('gridView');\n    const mainImage = document.getElementById('mainImage');\n    const mainVideo = document.getElementById('mainVideo');\n    const toggleBtn = document.getElementById('toggleBtn');\n    const prevOverlay = document.getElementById('prevOverlay');\n    const nextOverlay = document.getElementById('nextOverlay');\n    const imageCounter = document.getElementById('imageCounter');\n    const name = document.getElementById('name');\n    const imageInfo = document.getElementById('image-info');\n\n    let currentImageIndex = 0;\n    let isGalleryView = false;\n\tlet captionChange = true;\n\tlet origName = \"Advertising\";\n\n\n\t\n\n    function forceRepaint(element) {\n        element.style.display = 'none';\n        element.offsetHeight; \/\/ trigger a reflow\n        element.style.display = '';\n    }\n\n    function calculateGridLayout() {\n        const thumbnails = document.querySelectorAll('.thumbnailList');\n        const containerWidth = gridView.offsetWidth;\n        const defaultSize = 1;\n        const desiredRowHeight = 200 * defaultSize;\n\n        let currentRowWidth = 0;\n        let currentRow = [];\n        const rows = [];\n\n        thumbnails.forEach((thumbnail, index) => {\n            const media = thumbnail.querySelector('img, video');\n            let width, height;\n            if (media.tagName === 'IMG') {\n                width = media.naturalWidth * defaultSize;\n                height = media.naturalHeight * defaultSize;\n            } else if (media.tagName === 'VIDEO') {\n                width = media.videoWidth * defaultSize;\n                height = media.videoHeight * defaultSize;\n            }\n            const aspectRatio = (width && height) ? (width \/ height) : (16 \/ 9);\n            const scaledWidth = desiredRowHeight * aspectRatio;\n\n            if (currentRowWidth + scaledWidth > containerWidth && currentRow.length > 0) {\n                rows.push(currentRow);\n                currentRow = [];\n                currentRowWidth = 0;\n            }\n\n            currentRow.push({ thumbnail, scaledWidth });\n            currentRowWidth += scaledWidth;\n\n            if (index === thumbnails.length - 1) {\n                rows.push(currentRow);\n            }\n        });\n\n        rows.forEach(row => {\n            const rowWidth = row.reduce((sum, item) => sum + item.scaledWidth, 0);\n            const rowRatio = containerWidth \/ rowWidth;\n\n            row.forEach(item => {\n                const { thumbnail, scaledWidth } = item;\n                const adjustedWidth = scaledWidth;\n\n                thumbnail.style.width = `${adjustedWidth}px`;\n                thumbnail.style.height = `${desiredRowHeight}px`;\n\n                const media = thumbnail.querySelector('img, video');\n                media.style.width = '100%';\n                media.style.height = '100%';\n                media.style.objectFit = 'contain';\n            });\n        });\n    }\n\n  function loadThumbnails() {\n        gridView.innerHTML = '';\n        mediaItems.forEach((item, index) => {\n            const listItem = document.createElement('li');\n            listItem.classList.add('thumbnailList');\n            listItem.id = `listItem${index}`;\n\n            const thumbnail = document.createElement(item.type === 'image' ? 'img' : 'video');\n            thumbnail.src = item.src;\n\n            if (item.type === 'image') {\n                thumbnail.alt = item.alt;\n            } else if (item.type === 'video') {\n                thumbnail.autoplay = true;\n                thumbnail.muted = true;\n                thumbnail.loop = true;\n                thumbnail.playsinline = true;\n            }\n\n            thumbnail.classList.add('thumbnail');\n            thumbnail.addEventListener('click', () => {\n                currentImageIndex = index;\n                updateMainMedia();\n                toggleView();\n            });\n\n            listItem.appendChild(thumbnail);\n\n            \/\/ If showNames is true, add the custom name or filename below the thumbnail\n            if (showNames) {\n                const nameDiv = document.createElement('div');\n                nameDiv.classList.add('thumbnailName');\n                nameDiv.textContent = item.name; \/\/ Use the custom name or filename\n                listItem.appendChild(nameDiv);\n            }\n\n            gridView.appendChild(listItem);\n        });\n\n        calculateGridLayout();\n    }\nfunction updateMainMedia() {\n    const currentItem = mediaItems[currentImageIndex];\n    const timestamp = new Date().getTime(); \/\/ Get a unique timestamp\n    \n    if (currentItem.type === 'image') {\n        mainImage.src = `${currentItem.src}?t=${timestamp}`; \/\/ Append timestamp to image URL\n        mainImage.alt = currentItem.alt;\n        mainImage.classList.remove('hidden');\n        mainVideo.classList.add('hidden');\n    } else if (currentItem.type === 'video') {\n        mainVideo.src = currentItem.src; \/\/ No need for cache-busting on video URLs usually\n        mainVideo.classList.remove('hidden');\n        mainImage.classList.add('hidden');\n    }\n\n    const totalItems = mediaItems.length;\n    const paddedIndex = String(currentImageIndex + 1).padStart(2, '0');\n    const paddedTotal = String(totalItems).padStart(2, '0');\n    imageCounter.textContent = `${paddedIndex} \/ ${paddedTotal}`;\n\n    if (captionChange && isGalleryView) {\n            name.textContent = currentItem.name;\n    }else if(!isGalleryView)\n\t\t{\n\t\tname.textContent = origName;\n\n    }\n\t\n   forceRepaint(mainImage);\n\n}\n\n\nfunction toggleView() {\n    if (isGalleryView) {\n        \/\/ If gallery view is true, show the gallery (grid view) first\n        singleView.classList.add('hidden');\n        gridView.classList.remove('hidden');\n        toggleBtn.textContent = 'Gallery';\n    } else {\n        \/\/ If gallery view is false, show the single view (image\/video) first\n        singleView.classList.remove('hidden');\n        gridView.classList.add('hidden');\n        toggleBtn.textContent = 'Thumbnails';\n    }\n\tconsole.log(\"Yes\")\n    isGalleryView = !isGalleryView; \/\/ Toggle the view for the next button click\n\tupdateMainMedia();\n}\n\n\n    loadThumbnails();\n\n    toggleBtn.addEventListener('click', toggleView);\n    prevOverlay.addEventListener('click', () => {\n        currentImageIndex = (currentImageIndex - 1 + mediaItems.length) % mediaItems.length;\n        updateMainMedia();\n    });\n    nextOverlay.addEventListener('click', () => {\n        currentImageIndex = (currentImageIndex + 1) % mediaItems.length;\n        updateMainMedia();\n    });\n\t\n\t    if (!isGalleryView) {\n        \/\/ If gallery view is true, show the gallery (grid view) first\n        singleView.classList.add('hidden');\n        gridView.classList.remove('hidden');\n        toggleBtn.textContent = 'Gallery';\n    } else {\n        \/\/ If gallery view is false, show the single view (image\/video) first\n        singleView.classList.remove('hidden');\n        gridView.classList.add('hidden');\n        toggleBtn.textContent = 'Thumbnails';\n    }\n\t\n\tupdateMainMedia();\n\n<\/script>\n\n    <\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-4635","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/unityistanbul.com\/index.php?rest_route=\/wp\/v2\/pages\/4635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unityistanbul.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/unityistanbul.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/unityistanbul.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unityistanbul.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4635"}],"version-history":[{"count":31,"href":"https:\/\/unityistanbul.com\/index.php?rest_route=\/wp\/v2\/pages\/4635\/revisions"}],"predecessor-version":[{"id":4696,"href":"https:\/\/unityistanbul.com\/index.php?rest_route=\/wp\/v2\/pages\/4635\/revisions\/4696"}],"wp:attachment":[{"href":"https:\/\/unityistanbul.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}