{"id":693,"date":"2026-07-26T15:52:45","date_gmt":"2026-07-26T12:22:45","guid":{"rendered":"https:\/\/vinaderma.com\/languages\/en\/?page_id=693"},"modified":"2026-07-30T19:54:29","modified_gmt":"2026-07-30T16:24:29","slug":"portfolio-gallery","status":"publish","type":"page","link":"https:\/\/vinaderma.com\/en\/portfolio-gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"693\" class=\"elementor elementor-693\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c05440 e-flex e-con-boxed e-con e-parent\" data-id=\"0c05440\" 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-d9e7c85 elementor-widget elementor-widget-text-editor\" data-id=\"d9e7c85\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div><p dir=\"auto\"><strong>Vinaderma Transformation Gallery<\/strong><\/p><\/div><div>\u00a0<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dd3b3f9 e-con-full e-flex e-con e-parent\" data-id=\"dd3b3f9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-92dfc04 elementor-widget elementor-widget-html\" data-id=\"92dfc04\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"gallery-wrapper\">\r\n  <div class=\"grid-container\" id=\"galleryGrid\">\r\n    <!-- Card 1 - Rhinoplasty -->\r\n    <div class=\"card\">\r\n      <div class=\"ba-wrapper\">\r\n        <div class=\"ba-image ba-before\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/1before.webp');\"><\/div>\r\n        <div class=\"ba-image ba-after\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/1after.webp');\"><\/div>\r\n        <div class=\"ba-divider\"><\/div>\r\n        <div class=\"ba-label\">\r\n          <span>Before<\/span>\r\n          <span class=\"divider-line\">|<\/span>\r\n          <span>After<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"card-content\">\r\n        <div class=\"card-title\">\r\n          Rhinoplasty (Nose Surgery)\r\n          <span class=\"tag\">Specialized<\/span>\r\n        <\/div>\r\n        <div class=\"card-desc\">\r\n          <i class=\"fas fa-circle\"><\/i> Reshaping and refining the nose\r\n        <\/div>\r\n        <div class=\"image-links\">\r\n          <i class=\"fas fa-link\"><\/i>\r\n          <a href=\"#\" class=\"before-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/1before.webp\">View Before<\/a>\r\n          <span class=\"sep\">\/<\/span>\r\n          <a href=\"#\" class=\"after-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/1after.webp\">View After<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Card 2 - Face & Neck Lift -->\r\n    <div class=\"card\">\r\n      <div class=\"ba-wrapper\">\r\n        <div class=\"ba-image ba-before\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/2before.webp');\"><\/div>\r\n        <div class=\"ba-image ba-after\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/2after.webp');\"><\/div>\r\n        <div class=\"ba-divider\"><\/div>\r\n        <div class=\"ba-label\">\r\n          <span>Before<\/span>\r\n          <span class=\"divider-line\">|<\/span>\r\n          <span>After<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"card-content\">\r\n        <div class=\"card-title\">\r\n          Face & Neck Lift\r\n          <span class=\"tag\">New<\/span>\r\n        <\/div>\r\n        <div class=\"card-desc\">\r\n          <i class=\"fas fa-circle\"><\/i> Reducing wrinkles and sagging\r\n        <\/div>\r\n        <div class=\"image-links\">\r\n          <i class=\"fas fa-link\"><\/i>\r\n          <a href=\"#\" class=\"before-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/2before.webp\">View Before<\/a>\r\n          <span class=\"sep\">\/<\/span>\r\n          <a href=\"#\" class=\"after-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/2after.webp\">View After<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Card 3 - Dermal Fillers -->\r\n    <div class=\"card\">\r\n      <div class=\"ba-wrapper\">\r\n        <div class=\"ba-image ba-before\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/3before.webp');\"><\/div>\r\n        <div class=\"ba-image ba-after\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/3after.webp');\"><\/div>\r\n        <div class=\"ba-divider\"><\/div>\r\n        <div class=\"ba-label\">\r\n          <span>Before<\/span>\r\n          <span class=\"divider-line\">|<\/span>\r\n          <span>After<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"card-content\">\r\n        <div class=\"card-title\">\r\n          Dermal Fillers\r\n          <span class=\"tag\">Popular<\/span>\r\n        <\/div>\r\n        <div class=\"card-desc\">\r\n          <i class=\"fas fa-circle\"><\/i> Enhancing lip and cheek volume\r\n        <\/div>\r\n        <div class=\"image-links\">\r\n          <i class=\"fas fa-link\"><\/i>\r\n          <a href=\"#\" class=\"before-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/3before.webp\">View Before<\/a>\r\n          <span class=\"sep\">\/<\/span>\r\n          <a href=\"#\" class=\"after-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/3after.webp\">View After<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Card 4 - Botox -->\r\n    <div class=\"card\">\r\n      <div class=\"ba-wrapper\">\r\n        <div class=\"ba-image ba-before\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/4before.webp');\"><\/div>\r\n        <div class=\"ba-image ba-after\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/4after.webp');\"><\/div>\r\n        <div class=\"ba-divider\"><\/div>\r\n        <div class=\"ba-label\">\r\n          <span>Before<\/span>\r\n          <span class=\"divider-line\">|<\/span>\r\n          <span>After<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"card-content\">\r\n        <div class=\"card-title\">\r\n          Botox for Frown Lines\r\n          <span class=\"tag\">Clinic<\/span>\r\n        <\/div>\r\n        <div class=\"card-desc\">\r\n          <i class=\"fas fa-circle\"><\/i> Softening forehead and eye lines\r\n        <\/div>\r\n        <div class=\"image-links\">\r\n          <i class=\"fas fa-link\"><\/i>\r\n          <a href=\"#\" class=\"before-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/4before.webp\">View Before<\/a>\r\n          <span class=\"sep\">\/<\/span>\r\n          <a href=\"#\" class=\"after-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/4after.webp\">View After<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Card 5 - Laser Hair Removal -->\r\n    <div class=\"card\">\r\n      <div class=\"ba-wrapper\">\r\n        <div class=\"ba-image ba-before\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/5before.webp');\"><\/div>\r\n        <div class=\"ba-image ba-after\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/5after.webp');\"><\/div>\r\n        <div class=\"ba-divider\"><\/div>\r\n        <div class=\"ba-label\">\r\n          <span>Before<\/span>\r\n          <span class=\"divider-line\">|<\/span>\r\n          <span>After<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"card-content\">\r\n        <div class=\"card-title\">\r\n          Laser Hair Removal\r\n          <span class=\"tag\">New<\/span>\r\n        <\/div>\r\n        <div class=\"card-desc\">\r\n          <i class=\"fas fa-circle\"><\/i> Smooth and even skin\r\n        <\/div>\r\n        <div class=\"image-links\">\r\n          <i class=\"fas fa-link\"><\/i>\r\n          <a href=\"#\" class=\"before-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/5before.webp\">View Before<\/a>\r\n          <span class=\"sep\">\/<\/span>\r\n          <a href=\"#\" class=\"after-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/5after.webp\">View After<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Card 6 - Microneedling -->\r\n    <div class=\"card\">\r\n      <div class=\"ba-wrapper\">\r\n        <div class=\"ba-image ba-before\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/6before.webp');\"><\/div>\r\n        <div class=\"ba-image ba-after\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/6after.webp');\"><\/div>\r\n        <div class=\"ba-divider\"><\/div>\r\n        <div class=\"ba-label\">\r\n          <span>Before<\/span>\r\n          <span class=\"divider-line\">|<\/span>\r\n          <span>After<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"card-content\">\r\n        <div class=\"card-title\">\r\n          Microneedling\r\n          <span class=\"tag\">Recommended<\/span>\r\n        <\/div>\r\n        <div class=\"card-desc\">\r\n          <i class=\"fas fa-circle\"><\/i> Skin rejuvenation & collagen boost\r\n        <\/div>\r\n        <div class=\"image-links\">\r\n          <i class=\"fas fa-link\"><\/i>\r\n          <a href=\"#\" class=\"before-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/6before.webp\">View Before<\/a>\r\n          <span class=\"sep\">\/<\/span>\r\n          <a href=\"#\" class=\"after-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/6after.webp\">View After<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Card 7 - Lip & Chin Filler -->\r\n    <div class=\"card\">\r\n      <div class=\"ba-wrapper\">\r\n        <div class=\"ba-image ba-before\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/7before.webp');\"><\/div>\r\n        <div class=\"ba-image ba-after\" style=\"background-image: url('https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/7after.webp');\"><\/div>\r\n        <div class=\"ba-divider\"><\/div>\r\n        <div class=\"ba-label\">\r\n          <span>Before<\/span>\r\n          <span class=\"divider-line\">|<\/span>\r\n          <span>After<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"card-content\">\r\n        <div class=\"card-title\">\r\n          Lip & Chin Filler\r\n          <span class=\"tag\">Natural<\/span>\r\n        <\/div>\r\n        <div class=\"card-desc\">\r\n          <i class=\"fas fa-circle\"><\/i> Contour and symmetry\r\n        <\/div>\r\n        <div class=\"image-links\">\r\n          <i class=\"fas fa-link\"><\/i>\r\n          <a href=\"#\" class=\"before-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/7before.webp\">View Before<\/a>\r\n          <span class=\"sep\">\/<\/span>\r\n          <a href=\"#\" class=\"after-link\" data-image=\"https:\/\/vinaderma.com\/en\/wp-content\/uploads\/2026\/07\/7after.webp\">View After<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  \/\/ ===== Before\/After slider =====\r\n  const wrappers = document.querySelectorAll('.ba-wrapper');\r\n  wrappers.forEach(wrapper => {\r\n    const divider = wrapper.querySelector('.ba-divider');\r\n    const beforeImg = wrapper.querySelector('.ba-before');\r\n    const afterImg = wrapper.querySelector('.ba-after');\r\n    if (!divider || !beforeImg || !afterImg) return;\r\n\r\n    function updateSplit(percent) {\r\n      const clamped = Math.min(95, Math.max(5, percent));\r\n      const pos = clamped + '%';\r\n      divider.style.left = pos;\r\n      beforeImg.style.clipPath = `inset(0 ${100 - clamped}% 0 0)`;\r\n      afterImg.style.clipPath = `inset(0 0 0 ${clamped}%)`;\r\n    }\r\n\r\n    let isDragging = false;\r\n\r\n    function onDragStart(e) {\r\n      isDragging = true;\r\n      wrapper.style.cursor = 'ew-resize';\r\n      e.preventDefault();\r\n    }\r\n\r\n    function onDragMove(e) {\r\n      if (!isDragging) return;\r\n      const rect = wrapper.getBoundingClientRect();\r\n      let clientX = e.clientX;\r\n      if (e.touches) clientX = e.touches[0].clientX;\r\n      let percent = ((clientX - rect.left) \/ rect.width) * 100;\r\n      percent = Math.min(95, Math.max(5, percent));\r\n      updateSplit(percent);\r\n      e.preventDefault();\r\n    }\r\n\r\n    function onDragEnd() {\r\n      if (isDragging) {\r\n        isDragging = false;\r\n        wrapper.style.cursor = 'ew-resize';\r\n      }\r\n    }\r\n\r\n    wrapper.addEventListener('mousedown', onDragStart);\r\n    document.addEventListener('mousemove', onDragMove);\r\n    document.addEventListener('mouseup', onDragEnd);\r\n    wrapper.addEventListener('touchstart', onDragStart, { passive: false });\r\n    document.addEventListener('touchmove', onDragMove, { passive: false });\r\n    document.addEventListener('touchend', onDragEnd);\r\n\r\n    updateSplit(50);\r\n  });\r\n\r\n  \/\/ ===== View Before \/ View After links =====\r\n  document.querySelectorAll('.before-link').forEach(link => {\r\n    link.addEventListener('click', function(e) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      const imageUrl = this.getAttribute('data-image');\r\n      if (imageUrl) window.open(imageUrl, '_blank');\r\n    });\r\n  });\r\n\r\n  document.querySelectorAll('.after-link').forEach(link => {\r\n    link.addEventListener('click', function(e) {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      const imageUrl = this.getAttribute('data-image');\r\n      if (imageUrl) window.open(imageUrl, '_blank');\r\n    });\r\n  });\r\n\r\n  console.log('Vinaderma Before\/After Gallery with 7 cards loaded \u2705');\r\n})();\r\n<\/script>\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>Vinaderma Transformation Gallery \u00a0 Before | After Rhinoplasty (Nose Surgery) Specialized Reshaping and refining the nose View Before \/ View After Before | After Face &#038; Neck Lift New Reducing wrinkles and sagging View Before \/ View After Before | After Dermal Fillers Popular Enhancing lip and cheek volume View Before \/ View After Before [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-693","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vinaderma.com\/en\/wp-json\/wp\/v2\/pages\/693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vinaderma.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vinaderma.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vinaderma.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vinaderma.com\/en\/wp-json\/wp\/v2\/comments?post=693"}],"version-history":[{"count":41,"href":"https:\/\/vinaderma.com\/en\/wp-json\/wp\/v2\/pages\/693\/revisions"}],"predecessor-version":[{"id":970,"href":"https:\/\/vinaderma.com\/en\/wp-json\/wp\/v2\/pages\/693\/revisions\/970"}],"wp:attachment":[{"href":"https:\/\/vinaderma.com\/en\/wp-json\/wp\/v2\/media?parent=693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}