Galeria com Lazy Load<\/title>\r\n\r\n<style>\r\n\r\n*{\r\n margin:0;\r\n padding:0;\r\n box-sizing:border-box;\r\n font-family:Arial, Helvetica, sans-serif;\r\n}\r\n\r\nbody{\r\n background:#f2f2f2;\r\n padding:30px;\r\n}\r\n\r\n.galeria{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit,minmax(220px,1fr));\r\n gap:15px;\r\n}\r\n\r\n.galeria img{\r\n width:100%;\r\n height:220px;\r\n object-fit:cover;\r\n border-radius:10px;\r\n cursor:pointer;\r\n transition:.3s;\r\n box-shadow:0 5px 15px rgba(0,0,0,.2);\r\n \/* Efeito de fade ao carregar *\/\r\n opacity:0;\r\n transition: opacity 0.4s ease-in-out, transform .3s;\r\n background: #e8e8e8;\r\n min-height:220px;\r\n}\r\n\r\n.galeria img.loaded{\r\n opacity:1;\r\n}\r\n\r\n.galeria img:hover{\r\n transform:scale(1.05);\r\n}\r\n\r\n\/* ========================= *\/\r\n\/* MODAL *\/\r\n\/* ========================= *\/\r\n\r\n.modal{\r\n display:none;\r\n position:fixed;\r\n inset:0;\r\n background:rgba(0,0,0,.95);\r\n justify-content:center;\r\n align-items:center;\r\n z-index:9999;\r\n}\r\n\r\n.modal img{\r\n max-width:95%;\r\n max-height:95%;\r\n object-fit:contain;\r\n border-radius:8px;\r\n animation:zoom .25s;\r\n}\r\n\r\n@keyframes zoom{\r\n from{\r\n transform:scale(.9);\r\n opacity:0;\r\n }\r\n to{\r\n transform:scale(1);\r\n opacity:1;\r\n }\r\n}\r\n\r\n.fechar{\r\n position:absolute;\r\n top:15px;\r\n right:25px;\r\n color:white;\r\n font-size:45px;\r\n cursor:pointer;\r\n user-select:none;\r\n}\r\n\r\n.seta{\r\n position:absolute;\r\n top:50%;\r\n transform:translateY(-50%);\r\n color:white;\r\n font-size:60px;\r\n cursor:pointer;\r\n user-select:none;\r\n padding:20px;\r\n}\r\n\r\n.esquerda{\r\n left:15px;\r\n}\r\n\r\n.direita{\r\n right:15px;\r\n}\r\n\r\n.seta:hover,\r\n.fechar:hover{\r\n color:#ddd;\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"galeria\">\r\n\r\n \r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/sdD09FT3\/0-TEN-DENT-BARRACHINI-ESFCEx-2022.jpg\" alt=\"Foto 1\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/KcSZt5Rk\/0-TEN-DENT-FERNANDA-PIRES-ESFCEx-2022.jpg\" alt=\"Foto 2\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/VWbCg32s\/0-TEN-DENT-FULANA-CADAR-2023.jpg\" alt=\"Foto 3\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/tTbJxW3X\/0-TEN-DENT-LOPES-CADAR-2023.jpg\" alt=\"Foto 4\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/jvW9FkzS\/0-TEN-HELENA-AYRES-E-CMTE-ANA-PORTO.jpg\" alt=\"Foto 5\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/wZr8T2Sn\/0-TEN-LAUREN-RADIOLOGIA-CADAR-2023.jpg\" alt=\"Foto 6\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/7xJJwDrv\/20220423-111657.jpg\" alt=\"Foto 7\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/Y79SRZYT\/20220513-110357.jpg\" alt=\"Foto 8\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/Mxzp0jB9\/20220513-113652.jpg\" alt=\"Foto 9\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/3ywLHXcq\/20221122-105756.jpg\" alt=\"Foto 10\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/1fC0z1W7\/20230415-102704.jpg\" alt=\"Foto 11\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/d05FwPV4\/20230415-112545.jpg\" alt=\"Foto 12\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/B5yRYd9C\/20230512-113340.jpg\" alt=\"Foto 13\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/hF6DTL17\/20230512-224348.jpg\" alt=\"Foto 14\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/Kp98BT3N\/20250201-103242.jpg\" alt=\"Foto 15\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/mF990WSt\/20250201-103409.jpg\" alt=\"Foto 16\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/WrSnBb0\/20250201-104242.jpg\" alt=\"Foto 17\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/gZzVwCvd\/20250201-112515.jpg\" alt=\"Foto 18\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/Y7Pgh730\/20250201-112853.jpg\" alt=\"Foto 19\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/2DXrSXw\/DSC-0096.jpg\" alt=\"Foto 20\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/7Jv62Lzy\/DSC-0159.jpg\" alt=\"Foto 21\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/8DQkbQVg\/DSC-0369.jpg\" alt=\"Foto 22\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/7tmwkzdN\/DSC-0604.jpg\" alt=\"Foto 23\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/gFrrqmW7\/DSC-0606.jpg\" alt=\"Foto 24\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/tPKr0WsG\/DSC-0695.jpg\" alt=\"Foto 25\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/xqKx5jxw\/Formatura-Ex-rcito-2016-1.jpg\" alt=\"Foto 26\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/Kj3RfYMS\/IMG-20231023-WA0027.jpg\" alt=\"Foto 27\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/HTDxp7qK\/IMG-20231023-WA0106.jpg\" alt=\"Foto 28\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/Xrdqf2Ws\/RODRIGO-e-SEU-IRM-O.jpg\" alt=\"Foto 29\">\r\n <img loading=\"lazy\" data-src=\"https:\/\/i.ibb.co\/20bm5t7W\/Whats-App-Image-2020-10-22-at-20-26-39.jpg\" alt=\"Foto 30\">\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"modal\" id=\"modal\">\r\n <span class=\"fechar\">×<\/span>\r\n <span class=\"seta esquerda\">❮<\/span>\r\n <img id=\"imagemModal\">\r\n <span class=\"seta direita\">❯<\/span>\r\n<\/div>\r\n\r\n<script>\r\n\r\n\/\/ ============================================\r\n\/\/ LAZY LOAD - CARREGAR IMAGENS AO ROLAR\r\n\/\/ ============================================\r\n\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n const imagens = document.querySelectorAll('.galeria img');\r\n \r\n \/\/ Verifica se o navegador suporta Intersection Observer\r\n if ('IntersectionObserver' in window) {\r\n const imageObserver = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const img = entry.target;\r\n const src = img.getAttribute('data-src');\r\n \r\n if (src) {\r\n img.src = src;\r\n img.removeAttribute('data-src');\r\n img.classList.add('loaded');\r\n imageObserver.unobserve(img);\r\n }\r\n }\r\n });\r\n }, {\r\n \/\/ Carrega um pouco antes da imagem entrar na tela\r\n rootMargin: '50px 0px'\r\n });\r\n \r\n imagens.forEach(img => imageObserver.observe(img));\r\n } else {\r\n \/\/ Fallback para navegadores antigos\r\n imagens.forEach(img => {\r\n const src = img.getAttribute('data-src');\r\n if (src) {\r\n img.src = src;\r\n img.classList.add('loaded');\r\n }\r\n });\r\n }\r\n});\r\n\r\n\/\/ ============================================\r\n\/\/ MODAL - FUNCIONALIDADE DE GALERIA\r\n\/\/ ============================================\r\n\r\nconst imagens = document.querySelectorAll(\".galeria img\");\r\nconst modal = document.getElementById(\"modal\");\r\nconst imagemModal = document.getElementById(\"imagemModal\");\r\nconst fechar = document.querySelector(\".fechar\");\r\nconst esquerda = document.querySelector(\".esquerda\");\r\nconst direita = document.querySelector(\".direita\");\r\n\r\nlet indice = 0;\r\n\r\nfunction abrir(i) {\r\n indice = i;\r\n \/\/ Pega a imagem que j\u00e1 foi carregada (ou carrega se ainda n\u00e3o foi)\r\n const imgSelecionada = imagens[indice];\r\n \/\/ Se a imagem ainda n\u00e3o foi carregada, carrega agora\r\n if (imgSelecionada.getAttribute('data-src')) {\r\n const src = imgSelecionada.getAttribute('data-src');\r\n imgSelecionada.src = src;\r\n imgSelecionada.removeAttribute('data-src');\r\n imgSelecionada.classList.add('loaded');\r\n }\r\n imagemModal.src = imagens[indice].src;\r\n modal.style.display = \"flex\";\r\n}\r\n\r\nfunction proxima() {\r\n indice++;\r\n if (indice >= imagens.length) indice = 0;\r\n \/\/ Carrega a imagem se necess\u00e1rio\r\n const img = imagens[indice];\r\n if (img.getAttribute('data-src')) {\r\n const src = img.getAttribute('data-src');\r\n img.src = src;\r\n img.removeAttribute('data-src');\r\n img.classList.add('loaded');\r\n }\r\n imagemModal.src = imagens[indice].src;\r\n}\r\n\r\nfunction anterior() {\r\n indice--;\r\n if (indice < 0) indice = imagens.length - 1;\r\n const img = imagens[indice];\r\n if (img.getAttribute('data-src')) {\r\n const src = img.getAttribute('data-src');\r\n img.src = src;\r\n img.removeAttribute('data-src');\r\n img.classList.add('loaded');\r\n }\r\n imagemModal.src = imagens[indice].src;\r\n}\r\n\r\n\/\/ Adiciona evento de clique em cada imagem\r\nimagens.forEach((img, i) => {\r\n img.addEventListener(\"click\", () => abrir(i));\r\n});\r\n\r\n\/\/ Eventos do modal\r\ndireita.onclick = proxima;\r\nesquerda.onclick = anterior;\r\n\r\nfechar.onclick = () => {\r\n modal.style.display = \"none\";\r\n}\r\n\r\nmodal.onclick = (e) => {\r\n if (e.target === modal)\r\n modal.style.display = \"none\";\r\n}\r\n\r\n\/\/ Teclas do teclado\r\ndocument.addEventListener(\"keydown\", (e) => {\r\n if (modal.style.display != \"flex\") return;\r\n \r\n if (e.key == \"Escape\")\r\n modal.style.display = \"none\";\r\n \r\n if (e.key == \"ArrowRight\")\r\n proxima();\r\n \r\n if (e.key == \"ArrowLeft\")\r\n anterior();\r\n});\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-608d5d34 elementor-section-boxed elementor-section-height-default elementor-section-height-default reptro-section-padding-large reptro_section_top_bottom_padding_no\" data-id=\"608d5d34\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-extended\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6ab360a\" data-id=\"6ab360a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-aac4878 elementor-widget elementor-widget-reptro_section_title\" data-id=\"aac4878\" data-element_type=\"widget\" data-widget_type=\"reptro_section_title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h1 class=\"reptro-section-title text-default margin-bottom-small section-title-type-default margin-top-none section-title-font-size-default section-title-color-default\"><span>Depoimento de alunos<\/span><\/h1>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e2f329d elementor-widget elementor-widget-text-editor\" data-id=\"1e2f329d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h5 class=\"paragraph normal ng-star-inserted\" data-start-index=\"649\"><span class=\"ng-star-inserted\" data-start-index=\"649\">\ud83d\udc49 <\/span><b class=\"ng-star-inserted\" data-start-index=\"652\">Clique aqui e assista alguns depoimentos em v\u00eddeo de nossos alunos<\/b><span class=\"ng-star-inserted\" data-start-index=\"718\"> e veja como a nossa metodologia ajudou a mudar a vida de tantos profissionais.<\/span><\/h5>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9a6203 elementor-widget elementor-widget-reptro_video_popup\" data-id=\"e9a6203\" data-element_type=\"widget\" data-widget_type=\"reptro_video_popup.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n <div class=\"xt-video xt-video-popup-type-button_only\">\r\n <div class=\"xt-video-popup-btn-wrapper\"><a class=\"xt-video-popup-btn\" data-fancybox href=\"https:\/\/www.youtube.com\/watch?v=T-4jTSkvPBQ\"><span class=\"video-popup-play-icon\"><\/span><\/a><span>Odontologia Marinha - Entrevista com Andressa Filizzolla sobre Concurso<\/span><\/div> <\/div>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-01896da elementor-widget elementor-widget-reptro_video_popup\" data-id=\"01896da\" data-element_type=\"widget\" data-widget_type=\"reptro_video_popup.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n <div class=\"xt-video xt-video-popup-type-button_only\">\r\n <div class=\"xt-video-popup-btn-wrapper\"><a class=\"xt-video-popup-btn\" data-fancybox href=\"https:\/\/www.youtube.com\/watch?v=9NCSjBzL-zc\"><span class=\"video-popup-play-icon\"><\/span><\/a><span>Concurso de Odontologia - Entrevista com Natasha, aprovada para a AERON\u00c1UTICA, no CADAR 2022<\/span><\/div> <\/div>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aee6fac elementor-widget elementor-widget-reptro_video_popup\" data-id=\"aee6fac\" data-element_type=\"widget\" data-widget_type=\"reptro_video_popup.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n <div class=\"xt-video xt-video-popup-type-button_only\">\r\n <div class=\"xt-video-popup-btn-wrapper\"><a class=\"xt-video-popup-btn\" data-fancybox href=\"https:\/\/www.youtube.com\/watch?v=yNqWLfGPLLk\"><span class=\"video-popup-play-icon\"><\/span><\/a><span>Concursos de Odontologia - Natasha estudou por apenas 3 meses e foi aprovada no CADAR<\/span><\/div> <\/div>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f24db3 elementor-widget elementor-widget-reptro_video_popup\" data-id=\"4f24db3\" data-element_type=\"widget\" data-widget_type=\"reptro_video_popup.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\r\n <div class=\"xt-video xt-video-popup-type-button_only\">\r\n <div class=\"xt-video-popup-btn-wrapper\"><a class=\"xt-video-popup-btn\" data-fancybox href=\"https:\/\/www.youtube.com\/watch?v=ogZMUmtA1MA\"><span class=\"video-popup-play-icon\"><\/span><\/a><span>Concurso de Odontologia - Entrevista com Raquel Losso, aluna do MCA Concursos aprovada na Marinha<\/span><\/div> <\/div>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Galeria dos Campe\u00f5es do MCA Concursos Cada aprovado aqui representa dedica\u00e7\u00e3o, foco e a excel\u00eancia da prepara\u00e7\u00e3o que oferecemos no MCA Concursos. Deixe-se inspirar por quem j\u00e1 alcan\u00e7ou o oficialato…<\/p>\n","protected":false},"author":63959,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"acf":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mcaconcursos.com\/v1\/wp-json\/wp\/v2\/pages\/99305"}],"collection":[{"href":"https:\/\/mcaconcursos.com\/v1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mcaconcursos.com\/v1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mcaconcursos.com\/v1\/wp-json\/wp\/v2\/users\/63959"}],"replies":[{"embeddable":true,"href":"https:\/\/mcaconcursos.com\/v1\/wp-json\/wp\/v2\/comments?post=99305"}],"version-history":[{"count":15,"href":"https:\/\/mcaconcursos.com\/v1\/wp-json\/wp\/v2\/pages\/99305\/revisions"}],"predecessor-version":[{"id":99417,"href":"https:\/\/mcaconcursos.com\/v1\/wp-json\/wp\/v2\/pages\/99305\/revisions\/99417"}],"wp:attachment":[{"href":"https:\/\/mcaconcursos.com\/v1\/wp-json\/wp\/v2\/media?parent=99305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}