{"id":4257,"date":"2025-10-01T10:30:40","date_gmt":"2025-10-01T10:30:40","guid":{"rendered":"https:\/\/www.tritunggaljayaabadi.com\/?page_id=4257"},"modified":"2025-10-01T11:09:08","modified_gmt":"2025-10-01T11:09:08","slug":"e-catalog","status":"publish","type":"page","link":"https:\/\/www.tritunggaljayaabadi.com\/?page_id=4257","title":{"rendered":"E-CATALOG"},"content":{"rendered":"<p><!-- ============ E-CATALOG FLIPBOOK \u2013 Fix v3 (with Fallback) ============ --><br \/>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@10\/swiper-bundle.min.js\" defer><\/script><\/p>\n<style>\n  :root{ --tja-primary:#103C83; --tja-light:#EAF3FF; --tja-accent:#F2C94C; }<br \/>\n  .tja-wrap{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#111}<br \/>\n  .tja-topbar{position:sticky;top:0;background:#fff;backdrop-filter:blur(6px);border-bottom:1px solid #e5e7eb;z-index:9}<br \/>\n  .tja-topbar .inner{max-width:1024px;margin:auto;padding:10px 16px;display:flex;align-items:center;gap:8px}<br \/>\n  .tja-brand{font-weight:700;color:var(--tja-primary)}<br \/>\n  .tja-small{font-size:12px;color:#6b7280}<br \/>\n  .tja-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid #e5e7eb;background:#fff !important;border-radius:10px;cursor:pointer;color:#111 !important}<br \/>\n  .tja-btn:hover{background:#f8fafc !important}<\/p>\n<p>  .tja-area{max-width:960px;margin:16px auto;padding:0 16px}<br \/>\n  .tja-card{border:1px solid #e5e7eb;border-radius:16px;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.04);overflow:hidden}<\/p>\n<p>  \/* Frame 4:5 dengan tinggi pasti *\/<br \/>\n  .tja-frame{position:relative;width:100%;max-width:900px;margin:auto}<br \/>\n  .tja-frame::before{content:\"\";display:block;padding-top:125%} \/* 4:5 *\/<br \/>\n  .tja-frame-in{position:absolute;inset:0}<\/p>\n<p>  \/* Paksa Swiper punya tinggi penuh *\/<br \/>\n  .tja-frame-in .swiper,<br \/>\n  .tja-frame-in .swiper-wrapper,<br \/>\n  .tja-frame-in .swiper-slide{height:100% !important;width:100%}<\/p>\n<p>  .tja-page{position:relative;width:100%;height:100%;background:#fff;display:flex;align-items:center;justify-content:center}<br \/>\n  .tja-page img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}<\/p>\n<p>  \/* Zoom *\/<br \/>\n  .tja-zoom-wrap{width:100%;height:100%;transform-origin:center center;transition:transform .2s}<\/p>\n<p>  \/* Pagination brand *\/<br \/>\n  .swiper{--swiper-pagination-color:var(--tja-primary)}<br \/>\n  .swiper-pagination-bullet{opacity:.5}<br \/>\n  .swiper-pagination-bullet-active{opacity:1}<\/p>\n<p>  \/* Thumbs *\/<br \/>\n  .tja-thumbs{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #e5e7eb;z-index:9}<br \/>\n  .tja-thumbs .inner{max-width:1100px;margin:auto;padding:12px 16px}<br \/>\n  .tja-thumbs-grid{display:grid;grid-auto-flow:column;grid-auto-columns:36%}<br \/>\n  @media (min-width:640px){.tja-thumbs-grid{grid-auto-columns:22%}}<br \/>\n  @media (min-width:960px){.tja-thumbs-grid{grid-auto-columns:18%}}<br \/>\n  .tja-thumb{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff}<br \/>\n  .tja-thumb.active{border-color:var(--tja-primary)}<br \/>\n  .tja-thumb .ph{aspect-ratio:4\/5;background:#f3f4f6}<br \/>\n  .tja-thumb img{width:100%;height:100%;object-fit:cover;display:block}<br \/>\n  .tja-thumb .tx{font-size:11px;padding:6px 8px;color:#374151}<br \/>\n  .tja-hide{display:none}<\/p>\n<p>  \/* CTA WA *\/<br \/>\n  .tja-wa{position:fixed;right:16px;bottom:16px;z-index:9;background:var(--tja-primary);color:#fff;border:none;border-radius:16px;padding:12px 16px;font-weight:600}<\/p>\n<p>  \/* Fallback stack (tanpa JS) *\/<br \/>\n  .tja-stack{display:grid;gap:12px;padding:16px}<br \/>\n  .tja-stack .ph{aspect-ratio:4\/5;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}<br \/>\n  .tja-stack img{width:100%;height:100%;object-fit:cover;display:block}<br \/>\n<\/style>\n<div id=\"tja-flipbook\" class=\"tja-wrap\">\n<p><!-- Topbar --><\/p>\n<div class=\"tja-topbar\">\n<div class=\"inner\"><button type=\"button\" class=\"tja-btn\" id=\"tja-prev\">\u2039<\/button><\/p>\n<div style=\"flex: 1 1 auto;\">\n<div class=\"tja-brand\">Tritunggal Jaya Abadi<\/div>\n<div class=\"tja-small\">E-Catalog \u2022 <span id=\"tja-idx\">1<\/span>\/<span id=\"tja-total\">\u2014<\/span><\/div>\n<\/div>\n<p><button type=\"button\" class=\"tja-btn\" id=\"tja-zoom-in\">ZOOM +<\/button><br \/>\n<button type=\"button\" class=\"tja-btn\" id=\"tja-zoom-out\">ZOOM \u2212<\/button><br \/>\n<button type=\"button\" class=\"tja-btn\" id=\"tja-toggle-thumbs\">\u2261<\/button><br \/>\n<button type=\"button\" class=\"tja-btn\" id=\"tja-next\">\u203a<\/button><\/p>\n<\/div>\n<\/div>\n<p><!-- Flipbook (JS) --><\/p>\n<div class=\"tja-area\" id=\"tja-js-area\">\n<div class=\"tja-card\">\n<div class=\"tja-frame\">\n<div class=\"tja-frame-in\">\n<div class=\"swiper\" id=\"tja-swiper\">\n<div class=\"swiper-wrapper\"><!-- ===== GANTI GAMBAR HALAMAN DI SINI ===== --><\/p>\n<div class=\"swiper-slide\">\n<div class=\"tja-zoom-wrap\">\n<div class=\"tja-page\" style=\"background: linear-gradient(135deg,var(--tja-primary),#1E4FA8,var(--tja-light));\">\n<div style=\"position: relative; text-align: center; color: #fff; padding: 24px; max-width: 80%;\">\n<h1 style=\"font-size: 40px; line-height: 1.1; margin: 0 0 8px 0; font-weight: 800;\">Tritunggal Jaya Abadi<\/h1>\n<p style=\"opacity: .95;\">Katalog Produk \u2022 2025\/2026<\/p>\n<div style=\"margin-top: 16px; background: rgba(255,255,255,.15); border-radius: 16px; padding: 12px;\"><small>Botol \u2022 Jerigen \u2022 Pot Cream \u2022 Tutup &amp; Aksesoris<\/small><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"swiper-slide\">\n<div class=\"tja-zoom-wrap\">\n<div class=\"tja-page\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1604594220509-08fd3afb0f31?q=80&amp;w=1360&amp;auto=format&amp;fit=crop\" alt=\"AGRO 50\u20131000 ml\" \/><\/div>\n<\/div>\n<\/div>\n<div class=\"swiper-slide\">\n<div class=\"tja-zoom-wrap\">\n<div class=\"tja-page\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1523246192149-2f3f0a16ad62?q=80&amp;w=1360&amp;auto=format&amp;fit=crop\" alt=\"Boston Round 60 ml\" \/><\/div>\n<\/div>\n<\/div>\n<div class=\"swiper-slide\">\n<div class=\"tja-zoom-wrap\">\n<div class=\"tja-page\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1611930022073-b7a4ba5fcccd?q=80&amp;w=1360&amp;auto=format&amp;fit=crop\" alt=\"Pot Cream 12.5 g\" \/><\/div>\n<\/div>\n<\/div>\n<div class=\"swiper-slide\">\n<div class=\"tja-zoom-wrap\">\n<div class=\"tja-page\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1541643600914-78b084683601?q=80&amp;w=1360&amp;auto=format&amp;fit=crop\" alt=\"Jerigen 1 L\" \/><\/div>\n<\/div>\n<\/div>\n<p><!-- ===== \/GANTI GAMBAR HALAMAN DI SINI ===== --><\/p>\n<\/div>\n<div class=\"swiper-pagination\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><!-- Fallback TANPA JS (kalau Swiper gagal) --><\/p>\n<div class=\"tja-area tja-hide\" id=\"tja-fallback\">\n<div class=\"tja-card\">\n<div class=\"tja-stack\" id=\"tja-stack\"><!-- Gambar yang sama untuk fallback --><\/p>\n<div class=\"ph\" style=\"background: linear-gradient(135deg,var(--tja-primary),#1E4FA8,var(--tja-light));\"><\/div>\n<div class=\"ph\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1604594220509-08fd3afb0f31?q=80&amp;w=1360&amp;auto=format&amp;fit=crop\" alt=\"\" \/><\/div>\n<div class=\"ph\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1523246192149-2f3f0a16ad62?q=80&amp;w=1360&amp;auto=format&amp;fit=crop\" alt=\"\" \/><\/div>\n<div class=\"ph\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1611930022073-b7a4ba5fcccd?q=80&amp;w=1360&amp;auto=format&amp;fit=crop\" alt=\"\" \/><\/div>\n<div class=\"ph\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1541643600914-78b084683601?q=80&amp;w=1360&amp;auto=format&amp;fit=crop\" alt=\"\" \/><\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><!-- Thumbnails --><\/p>\n<div class=\"tja-thumbs tja-hide\" id=\"tja-thumbs\">\n<div class=\"inner\">\n<div class=\"tja-small\" style=\"margin-bottom: 8px;\">Thumbnail \u2022 klik untuk lompat halaman<\/div>\n<div class=\"tja-thumbs-grid\" id=\"tja-thumbs-grid\" style=\"gap: 12px; overflow: auto; padding-bottom: 6px;\"><\/div>\n<\/div>\n<\/div>\n<p><!-- CTA WhatsApp --><br \/>\n<a class=\"tja-wa\" href=\"https:\/\/wa.me\/628989113154?text=Halo%20Tritunggal%20Jaya%20Abadi%2C%20saya%20tertarik%20dengan%20produk%20di%20katalog.\" target=\"_blank\" rel=\"noopener\">Tanya \/ Order<\/a><\/p>\n<\/div>\n<p><script>\n(function(){\n  \/\/ Jika CDN \/ inline JS ditunda oleh plugin, kita polling sampai Swiper tersedia\n  function initFlipbook(){\n    if(!window.Swiper){ return false; }<\/p>\n<p>    const jsArea = document.getElementById('tja-js-area');\n    const fallback = document.getElementById('tja-fallback');\n    if (jsArea && fallback){ fallback.classList.add('tja-hide'); jsArea.classList.remove('tja-hide'); }<\/p>\n<p>    const swiper = new Swiper('#tja-swiper', {\n      effect: 'flip',\n      grabCursor: true,\n      keyboard: { enabled: true },\n      mousewheel: true,\n      pagination: { el: '.swiper-pagination', clickable: true },\n      observer: true, observeParents: true\n    });<\/p>\n<p>    \/\/ Counter halaman\n    const idxEl = document.getElementById('tja-idx');\n    const totEl = document.getElementById('tja-total');\n    totEl.textContent = document.querySelectorAll('#tja-swiper .swiper-slide').length;\n    const updateIdx = () => { idxEl.textContent = (swiper.activeIndex + 1); highlightThumb(); };\n    swiper.on('slideChange', updateIdx); updateIdx();<\/p>\n<p>    \/\/ Prev\/Next\n    document.getElementById('tja-prev').addEventListener('click', ()=> swiper.slidePrev());\n    document.getElementById('tja-next').addEventListener('click', ()=> swiper.slideNext());<\/p>\n<p>    \/\/ Zoom\n    let scale = 1; const clamp = (v,min,max)=>Math.max(min,Math.min(max,v));\n    function setScale(s){\n      scale = clamp(s, 0.75, 2);\n      document.querySelectorAll('.tja-zoom-wrap').forEach(el=>{\n        el.style.transform = 'scale(' + scale.toFixed(2) + ')';\n      });\n    }\n    document.getElementById('tja-zoom-in').addEventListener('click',()=>setScale(scale+0.1));\n    document.getElementById('tja-zoom-out').addEventListener('click',()=>setScale(scale-0.1));<\/p>\n<p>    \/\/ Thumbs\n    const thumbs = document.getElementById('tja-thumbs');\n    const grid = document.getElementById('tja-thumbs-grid');\n    document.getElementById('tja-toggle-thumbs').addEventListener('click',()=> thumbs.classList.toggle('tja-hide'));<\/p>\n<p>    \/\/ Bangun thumbnails\n    const slides = Array.from(document.querySelectorAll('#tja-swiper .swiper-slide'));\n    slides.forEach((sl,i)=>{\n      const img = sl.querySelector('img');\n      const title = img ? (img.getAttribute('alt') || 'Halaman ' + (i+1)) : (i === 0 ? 'Cover' : 'Halaman ' + (i+1));\n      const src = img ? img.getAttribute('src') : null;<\/p>\n<p>      const card = document.createElement('button');\n      card.className = 'tja-thumb'; card.setAttribute('data-idx', i);\n      card.addEventListener('click', ()=>{ swiper.slideTo(i); });<\/p>\n<p>      const ph = document.createElement('div'); ph.className = 'ph';\n      if(src){ const im = document.createElement('img'); im.src = src; im.alt = title; ph.appendChild(im); }\n      else { ph.style.display='flex'; ph.style.alignItems='center'; ph.style.justifyContent='center'; ph.style.color='#6b7280'; ph.style.fontSize='12px'; ph.textContent = title; }<\/p>\n<p>      const tx = document.createElement('div'); tx.className = 'tx'; tx.innerHTML = (i+1)+'. <strong>'+title+'<\/strong>';<\/p>\n<p>      card.appendChild(ph); card.appendChild(tx); grid.appendChild(card);\n    });<\/p>\n<p>    window.highlightThumb = function(){\n      grid.querySelectorAll('.tja-thumb').forEach((el)=> el.classList.remove('active'));\n      const cur = grid.querySelector('.tja-thumb[data-idx=\"'+swiper.activeIndex+'\"]');\n      if(cur) cur.classList.add('active');\n    }\n    window.highlightThumb();\n    return true;\n  }<\/p>\n<p>  function boot(){\n    if (initFlipbook()) return;\n    \/\/ Jika masih belum ada Swiper, tampilkan fallback & coba lagi\n    document.getElementById('tja-fallback')?.classList.remove('tja-hide');\n    const timer = setInterval(function(){\n      if(initFlipbook()){ clearInterval(timer); }\n    }, 400);\n    \/\/ stop polling setelah 10 detik\n    setTimeout(()=>clearInterval(timer), 10000);\n  }<\/p>\n<p>  \/\/ Jalankan setelah DOM siap\n  if (document.readyState === 'loading'){\n    document.addEventListener('DOMContentLoaded', boot);\n  } else { boot(); }\n})();\n<\/script><br \/>\n<!-- ============ \/E-CATALOG FLIPBOOK \u2013 Fix v3 ============ --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u2039 Tritunggal Jaya Abadi E-Catalog \u2022 1\/\u2014 ZOOM + ZOOM \u2212 \u2261 \u203a Tritunggal Jaya Abadi Katalog Produk \u2022 2025\/2026 Botol \u2022 Jerigen \u2022 Pot Cream \u2022 Tutup &amp; Aksesoris Thumbnail \u2022 klik untuk lompat halaman Tanya \/ Order<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":4213,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4257","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.tritunggaljayaabadi.com\/index.php?rest_route=\/wp\/v2\/pages\/4257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tritunggaljayaabadi.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tritunggaljayaabadi.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tritunggaljayaabadi.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tritunggaljayaabadi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4257"}],"version-history":[{"count":6,"href":"https:\/\/www.tritunggaljayaabadi.com\/index.php?rest_route=\/wp\/v2\/pages\/4257\/revisions"}],"predecessor-version":[{"id":4263,"href":"https:\/\/www.tritunggaljayaabadi.com\/index.php?rest_route=\/wp\/v2\/pages\/4257\/revisions\/4263"}],"up":[{"embeddable":true,"href":"https:\/\/www.tritunggaljayaabadi.com\/index.php?rest_route=\/wp\/v2\/pages\/4213"}],"wp:attachment":[{"href":"https:\/\/www.tritunggaljayaabadi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}