{"id":2167,"date":"2026-07-09T22:26:29","date_gmt":"2026-07-09T22:26:29","guid":{"rendered":"https:\/\/myy-tech.com\/?page_id=2167"},"modified":"2026-07-09T22:43:16","modified_gmt":"2026-07-09T22:43:16","slug":"photo-library","status":"publish","type":"page","link":"https:\/\/myy-tech.com\/es\/photo-library\/","title":{"rendered":"PHOTO LIBRARY"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2167\" class=\"elementor elementor-2167\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d90287 e-flex e-con-boxed e-con e-parent\" data-id=\"4d90287\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-11411c9 elementor-widget elementor-widget-html\" data-id=\"11411c9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- =====================================================================\n     MY-TECH \u2014 Photo Library (click-to-enlarge gallery)\n     Paste this whole block into an Elementor \"HTML\" widget,\n     or into a WPCode \"HTML Snippet\" set to run on the Photos page.\n\n     Photos load automatically from the manifest the server builds:\n       \/wp-content\/uploads\/photos\/photos.json\n     To ADD a photo:      drop it in the PHOTO folder, run upload_photos.sh\n                           (or the refresh-photo alias)\n     To set titles\/text:  edit photos.json (your edits are preserved)\n     ===================================================================== -->\n\n<div id=\"myt-photos\">\n\n  <div class=\"myt-pic-intro\">\n    <h2>Photo Library<\/h2>\n    <p>Browse our photos below. Click any image to enlarge.<\/p>\n  <\/div>\n\n  <div class=\"myt-pic-grid\" id=\"myt-pic-grid\"><\/div>\n\n<\/div>\n\n<!-- Lightbox overlay -->\n<div id=\"myt-pic-lightbox\" class=\"myt-pic-lightbox\">\n  <button class=\"myt-pic-close\" aria-label=\"Close\">&times;<\/button>\n  <button class=\"myt-pic-nav myt-pic-prev\" aria-label=\"Previous\">&#8249;<\/button>\n  <button class=\"myt-pic-nav myt-pic-next\" aria-label=\"Next\">&#8250;<\/button>\n  <figure class=\"myt-pic-figure\">\n    <img decoding=\"async\" src=\"\" alt=\"\">\n    <figcaption>\n      <span class=\"myt-pic-lb-desc\"><\/span>\n    <\/figcaption>\n  <\/figure>\n<\/div>\n\n<style>\n#myt-photos { max-width: 1100px; margin: 0 auto; }\n\n.myt-pic-intro { text-align: center; margin-bottom: 32px; }\n.myt-pic-intro h2 {\n  font-size: 28px; font-weight: 700; color: #1a2332; margin: 0 0 8px;\n  letter-spacing: -0.01em;\n}\n.myt-pic-intro p { font-size: 16px; color: #5a6472; margin: 0; }\n\n.myt-pic-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n  gap: 20px;\n}\n\n.myt-pic-card {\n  background: #fff;\n  border: 1px solid #e3e7ed;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 2px 8px rgba(26,35,50,.06);\n  transition: transform .18s ease, box-shadow .18s ease;\n  display: flex; flex-direction: column;\n}\n.myt-pic-card:hover {\n  transform: translateY(-3px);\n  box-shadow: 0 8px 24px rgba(26,35,50,.12);\n}\n\n.myt-pic-media {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 4 \/ 3;\n  background: #1a2332;\n  cursor: zoom-in;\n  overflow: hidden;\n}\n.myt-pic-media img {\n  width: 100%; height: 100%; object-fit: cover; display: block;\n  transition: transform .25s ease;\n}\n.myt-pic-media:hover img { transform: scale(1.04); }\n\n.myt-pic-overlay {\n  position: absolute; inset: 0;\n  display: flex; align-items: center; justify-content: center;\n  background: linear-gradient(180deg, rgba(26,35,50,0) 60%, rgba(26,35,50,.35) 100%);\n  opacity: 0; transition: opacity .2s ease;\n}\n.myt-pic-media:hover .myt-pic-overlay { opacity: 1; }\n\n.myt-pic-zoom {\n  width: 44px; height: 44px; border-radius: 50%;\n  background: rgba(13,110,253,.92);\n  display: flex; align-items: center; justify-content: center;\n  box-shadow: 0 4px 16px rgba(0,0,0,.3);\n  position: absolute; bottom: 10px; right: 10px;\n}\n.myt-pic-zoom svg { width: 20px; height: 20px; fill: #fff; }\n\n.myt-pic-body { padding: 14px 16px 16px; }\n.myt-pic-desc { font-size: 13px; line-height: 1.5; color: #5a6472; margin: 0; }\n\n\/* Lightbox *\/\n.myt-pic-lightbox {\n  position: fixed; inset: 0; z-index: 9999;\n  background: rgba(15,18,26,.94);\n  display: none; align-items: center; justify-content: center;\n  padding: 40px;\n}\n.myt-pic-lightbox.open { display: flex; }\n.myt-pic-figure { max-width: 92vw; max-height: 88vh; text-align: center; margin: 0; }\n.myt-pic-figure img {\n  max-width: 92vw; max-height: 76vh; object-fit: contain;\n  border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5);\n  display: block; margin: 0 auto;\n}\n.myt-pic-figure figcaption { color: #eef1f5; margin-top: 14px; }\n.myt-pic-lb-desc { display: block; font-size: 14px; color: #b7bfca; }\n\n.myt-pic-close, .myt-pic-nav {\n  position: absolute; background: rgba(255,255,255,.08); border: none; color: #fff;\n  cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  transition: background .18s ease;\n}\n.myt-pic-close:hover, .myt-pic-nav:hover { background: rgba(255,255,255,.2); }\n.myt-pic-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 28px; line-height: 1; }\n.myt-pic-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 32px; }\n.myt-pic-prev { left: 16px; }\n.myt-pic-next { right: 16px; }\n\n@media (max-width: 480px) {\n  .myt-pic-grid { grid-template-columns: 1fr 1fr; gap: 12px; }\n  .myt-pic-nav { width: 40px; height: 40px; font-size: 24px; }\n  .myt-pic-close { width: 36px; height: 36px; font-size: 22px; }\n}\n<\/style>\n\n<script>\n(function () {\n  var BASE = '\/wp-content\/uploads\/photos\/';\n  var ZOOM_ICON = '<svg viewBox=\"0 0 24 24\"><path d=\"M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z\"\/><\/svg>';\n  var grid = document.getElementById('myt-pic-grid');\n  var lightbox = document.getElementById('myt-pic-lightbox');\n  var lbImg = lightbox.querySelector('img');\n  var lbDesc = lightbox.querySelector('.myt-pic-lb-desc');\n  var list = [];\n  var idx = 0;\n\n  function esc(s){ return String(s).replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;'); }\n\n  function buildCard(v, i){\n    var card = document.createElement('div');\n    card.className = 'myt-pic-card';\n    card.innerHTML =\n      '<div class=\"myt-pic-media\">' +\n        '<img decoding=\"async\" src=\"'+esc(v.src)+'\" alt=\"'+esc(v.title)+'\" loading=\"lazy\">' +\n        '<div class=\"myt-pic-overlay\"><div class=\"myt-pic-zoom\">'+ZOOM_ICON+'<\/div><\/div>' +\n      '<\/div>' +\n      (v.desc ? '<div class=\"myt-pic-body\"><p class=\"myt-pic-desc\">'+esc(v.desc)+'<\/p><\/div>' : '');\n    card.querySelector('.myt-pic-media').addEventListener('click', function(){ openLightbox(i); });\n    return card;\n  }\n\n  function openLightbox(i){\n    idx = i;\n    var v = list[idx];\n    lbImg.src = v.src;\n    lbImg.alt = v.title;\n    lbDesc.textContent = v.desc || '';\n    lightbox.classList.add('open');\n  }\n  function closeLightbox(){ lightbox.classList.remove('open'); lbImg.src=''; }\n  function step(dir){\n    idx = (idx + dir + list.length) % list.length;\n    openLightbox(idx);\n  }\n\n  lightbox.querySelector('.myt-pic-close').onclick = closeLightbox;\n  lightbox.querySelector('.myt-pic-prev').onclick = function(){ step(-1); };\n  lightbox.querySelector('.myt-pic-next').onclick = function(){ step(1); };\n  lightbox.addEventListener('click', function(e){ if (e.target === lightbox) closeLightbox(); });\n  document.addEventListener('keydown', function(e){\n    if (!lightbox.classList.contains('open')) return;\n    if (e.key === 'Escape') closeLightbox();\n    if (e.key === 'ArrowLeft') step(-1);\n    if (e.key === 'ArrowRight') step(1);\n  });\n\n  fetch(BASE + 'photos.json', {cache: 'no-store'})\n    .then(function(r){ return r.json(); })\n    .then(function(d){\n      var photos = (d && d.photos) ? d.photos : [];\n      if (!photos.length) {\n        grid.innerHTML = '<p style=\"text-align:center;color:#5a6472;\">No photos available yet.<\/p>';\n        return;\n      }\n      list = photos.filter(function(p){ return p.file; }).map(function(p){\n        return { title: p.title || p.file, desc: p.desc || '', src: BASE + p.file };\n      });\n      list.forEach(function(v, i){ grid.appendChild(buildCard(v, i)); });\n    })\n    .catch(function(){\n      grid.innerHTML = '<p style=\"text-align:center;color:#5a6472;\">Unable to load the photo list right now.<\/p>';\n    });\n})();\n<\/script>\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":"<p>Photo Library Browse our photos below. Click any image to enlarge. &times; &#8249; &#8250;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2167","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/pages\/2167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/comments?post=2167"}],"version-history":[{"count":10,"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/pages\/2167\/revisions"}],"predecessor-version":[{"id":2178,"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/pages\/2167\/revisions\/2178"}],"wp:attachment":[{"href":"https:\/\/myy-tech.com\/es\/wp-json\/wp\/v2\/media?parent=2167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}