{"id":6339,"date":"2026-03-29T18:08:34","date_gmt":"2026-03-29T18:08:34","guid":{"rendered":"https:\/\/istr.res.in\/?page_id=6339"},"modified":"2026-07-23T01:13:04","modified_gmt":"2026-07-23T01:13:04","slug":"gallery","status":"publish","type":"page","link":"https:\/\/istr.res.in\/hi\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6339\" class=\"elementor elementor-6339\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b3bdf3 e-flex e-con-boxed e-con e-parent\" data-id=\"1b3bdf3\" 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-2ff683dc elementor-widget elementor-widget-text-editor\" data-id=\"2ff683dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<style>\n  \/* ---------- Layout ---------- *\/\n  .gal-wrap { margin: 0 auto; font-family: inherit; }\n  .gal-title { font-weight: 800; text-align: center; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; color: #003366; }\n  .gal-rule { width: 80px; height: 4px; background: linear-gradient(90deg,#003366,#0066cc); margin: 0 auto 30px auto; border-radius: 2px; }\n  .gal-cols { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }\n  .gal-tabs { flex: 0 0 280px; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 20px; }\n  .gal-panels { flex: 1; min-width: 300px; }\n\n  \/* ---------- Left menu buttons (with thumbnails) ---------- *\/\n  .gal-tab {\n    display: flex; align-items: center; gap: 12px;\n    text-align: left; cursor: pointer;\n    border: 1px solid #d5deeb; border-radius: 10px;\n    padding: 8px 12px; font-size: 14px; font-weight: 700;\n    background: #fff; color: #003366;\n    box-shadow: none; transition: all .22s ease;\n    width: 100%;\n  }\n  .gal-tab:hover { border-color: #0066cc; transform: translateX(3px); box-shadow: 0 3px 12px rgba(0,51,102,0.12); }\n  .gal-tab.is-active {\n    border: none; color: #fff;\n    background: linear-gradient(135deg,#003366,#0066cc);\n    box-shadow: 0 3px 12px rgba(0,51,102,0.25);\n  }\n  .gal-tab-thumb {\n    flex: 0 0 46px; width: 46px; height: 46px;\n    border-radius: 7px; object-fit: cover; display: block;\n    border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.18);\n  }\n  .gal-tab-thumb--all {\n    display: flex; align-items: center; justify-content: center;\n    background: linear-gradient(135deg,#003366,#0066cc);\n    color: #fff; font-size: 20px; font-weight: 800;\n  }\n  .gal-tab-txt { flex: 1; line-height: 1.35; }\n  .gal-tab-count { display: block; font-weight: 600; font-size: 12px; opacity: .7; margin-top: 2px; }\n\n  \/* ---------- Event heading ---------- *\/\n  .gal-head {\n    font-weight: 800; color: #003366; margin: 0 0 16px 0;\n    padding: 8px 16px; background: #eef3fb;\n    border-left: 5px solid #003366; border-radius: 4px;\n  }\n\n  \/* ---------- Masonry (natural aspect ratios, no cropping) ---------- *\/\n  .gal-masonry { column-count: 3; column-gap: 14px; margin-bottom: 34px; }\n  @media (max-width: 1100px) { .gal-masonry { column-count: 2; } }\n  @media (max-width: 600px)  { .gal-masonry { column-count: 1; } .gal-tabs { flex: 1 1 100%; position: static; } }\n\n  .gal-card {\n    \/* The inline-block + width:100% combo is what forces Safari\/WebKit to\n       actually honour break-inside:avoid. Without it, images get sliced\n       across the column boundary. *\/\n    display: inline-block;\n    width: 100%;\n    break-inside: avoid;\n    -webkit-column-break-inside: avoid;\n    page-break-inside: avoid;\n    margin: 0 0 14px; border-radius: 10px; overflow: hidden;\n    box-shadow: 0 6px 18px rgba(0,0,0,0.12); background: #fff;\n    position: relative; cursor: zoom-in;\n    vertical-align: top;\n  }\n  .gal-card img {\n    width: 100%; height: auto; display: block;\n    transition: transform .45s ease;\n    background: #eef3fb; \/* placeholder tint while loading *\/\n    \/* Create the compositing layer up front. Without this, Safari only\n       paints the image the first time you hover it. *\/\n    transform: translateZ(0);\n    -webkit-backface-visibility: hidden;\n    backface-visibility: hidden;\n  }\n  .gal-card:hover img { transform: scale(1.07) translateZ(0); }\n\n  \/* Caption overlay on hover *\/\n  .gal-cap {\n    position: absolute; left: 0; right: 0; bottom: 0;\n    padding: 26px 14px 12px;\n    background: linear-gradient(to top, rgba(0,20,45,0.88), rgba(0,20,45,0));\n    color: #fff; font-size: 13px; font-weight: 700; line-height: 1.4;\n    opacity: 0; transform: translateY(10px);\n    transition: opacity .3s ease, transform .3s ease;\n    pointer-events: none;\n    margin: 0;\n  }\n  .gal-card:hover .gal-cap { opacity: 1; transform: translateY(0); }\n\n  \/* ---------- Lightbox ---------- *\/\n  .gal-lb {\n    position: fixed; inset: 0; z-index: 99999;\n    background: rgba(4,10,24,0.94);\n    display: none; align-items: center; justify-content: center;\n  }\n  .gal-lb.is-open { display: flex; }\n  .gal-lb img {\n    max-width: 88vw; max-height: 82vh;\n    border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.6);\n    display: block;\n  }\n  .gal-lb-cap {\n    position: absolute; bottom: 22px; left: 0; right: 0;\n    text-align: center; color: #fff; font-size: 15px; font-weight: 700;\n    text-shadow: 0 2px 8px rgba(0,0,0,0.8); padding: 0 60px;\n  }\n  .gal-lb-btn {\n    position: absolute; top: 50%; transform: translateY(-50%);\n    width: 52px; height: 52px; border: none; border-radius: 50%;\n    background: rgba(255,255,255,0.14); color: #fff;\n    font-size: 26px; line-height: 1; cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    transition: background .2s ease;\n  }\n  .gal-lb-btn:hover { background: rgba(255,255,255,0.3); }\n  .gal-lb-prev { left: 20px; }\n  .gal-lb-next { right: 20px; }\n  .gal-lb-close {\n    position: absolute; top: 18px; right: 22px;\n    width: 44px; height: 44px; border: none; border-radius: 50%;\n    background: rgba(255,255,255,0.14); color: #fff;\n    font-size: 24px; cursor: pointer;\n    display: flex; align-items: center; justify-content: center;\n    transition: background .2s ease;\n  }\n  .gal-lb-close:hover { background: rgba(255,255,255,0.3); }\n  @media (max-width: 600px) {\n    .gal-lb-btn { width: 42px; height: 42px; font-size: 20px; }\n    .gal-lb-prev { left: 8px; } .gal-lb-next { right: 8px; }\n  }\n<\/style>\n\n<div class=\"gal-wrap\">\n  <h2 class=\"gal-title\">Gallery<\/h2>\n  <div class=\"gal-rule\"><\/div>\n  <div class=\"gal-cols\">\n    <div id=\"gal-tabs\" class=\"gal-tabs\"><\/div>\n    <div id=\"gal-panels\" class=\"gal-panels\"><\/div>\n  <\/div>\n<\/div>\n\n<!-- Lightbox -->\n<div id=\"gal-lb\" class=\"gal-lb\">\n  <button id=\"gal-lb-close\" class=\"gal-lb-close\" aria-label=\"Close\">&#10005;<\/button>\n  <button id=\"gal-lb-prev\" class=\"gal-lb-btn gal-lb-prev\" aria-label=\"Previous\">&#10094;<\/button>\n  <img id=\"gal-lb-img\" alt=\"\" \/>\n  <button id=\"gal-lb-next\" class=\"gal-lb-btn gal-lb-next\" aria-label=\"Next\">&#10095;<\/button>\n  <div id=\"gal-lb-cap\" class=\"gal-lb-cap\"><\/div>\n<\/div>\n\n<script>\n\/* ============================================================\n   ADD NEW EVENTS \/ PHOTOS HERE \u2014 this is the only part to edit.\n\n   NEW EVENT:  copy a { ... } block, change the title,\n               paste the image URLs into photos[].\n   NEW PHOTO:  add one more URL line to an existing photos[].\n\n   The menu, thumbnails, panels and lightbox all build themselves.\n   Remember: comma after each } except the last one.\n   ============================================================ *\/\nvar GALLERY = [\n  {\n    title: \"Best Institute Award\",\n    photos: [\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/03\/BEST-INSTITUTE-AWARD-PHOTO-2-1024x682.jpeg\"\n    ]\n  },\n  {\n    title: \"Institute Photos\",\n    photos: [\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/institute-photo-scaled.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/institute-photo1-scaled.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/institute-photo2-scaled.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/institute-photo3-scaled.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/institute-photo4-scaled.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/institute-photo5-scaled.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/institute-photo8-scaled.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/institute-photo9-scaled.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/institute-photo10-scaled.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/institute-photo11-scaled.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/institute-photo13-scaled.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/institute-photo14-scaled.jpeg\"\n    ]\n  },\n  {\n    title: \"Foreigner Visit\",\n    photos: [\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/03\/FOREIGNER-VISIT-PHOTO-1-1024x768.jpeg\"\n    ]\n  },\n  {\n    title: \"Institute & Events\",\n    photos: [\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-02-19-at-6.00.59-PM-1-1024x462.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-02-19-at-6.01.41-PM-1-1024x576.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-02-19-at-6.01.42-PM-1-1024x576.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-02-19-at-6.01.44-PM-1-1024x576.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/03\/WhatsApp-Image-2026-02-09-at-12.14.45-PM-3-1024x576.jpeg\"\n    ]\n  },\n  {\n    title: \"Environmental Day Celebration - 05.06.2026\",\n    photos: [\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-06-at-19.55.34-300x166.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-06-at-19.55.35-300x135.jpeg\"\n    ]\n  },\n  {\n    title: \"Hindi Workshop\",\n    photos: [\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-06-at-19.59.48-300x169.jpeg\"\n    ]\n  },\n  {\n    title: \"Training Programmes\",\n    photos: [\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/Seed-Act-Training-300x135.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/Training-for-Registered-Seed-Producers-300x169.jpeg\"\n    ]\n  },\n  {\n    title: \"Visit of Member Secretary\",\n    photos: [\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/Visit-of-Member-Secretary-300x200.jpeg\"\n    ]\n  },\n  {\n    title: \"Official Language Implementation Committee Meeting\",\n    photos: [\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/Official-Language-Implementation-Committee-Meeting.jpeg\"\n    ]\n  },\n  {\n    title: \"Yoga Day\",\n    photos: [\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/YogaDay_1-scaled.jpeg\",\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/YogaDay_2-scaled.jpeg\"\n    ]\n  },\n  {\n    title: \"Har Ghar Tiranga\",\n    photos: [\n      \"https:\/\/istr.res.in\/wp-content\/uploads\/2026\/07\/HarGharTiranga.jpeg\"\n    ]\n  }\n];\n\/* ==================== END OF EDITABLE SECTION ==================== *\/\n\n(function () {\n  var tabsBox   = document.getElementById('gal-tabs');\n  var panelsBox = document.getElementById('gal-panels');\n\n  \/\/ Flat list of every photo, used by the lightbox for prev\/next.\n  \/\/ flatIdx is stamped onto each photo as we go, so the panel loop\n  \/\/ below doesn't have to search for it.\n  var FLAT = [];\n  GALLERY.forEach(function (ev, ei) {\n    ev._flat = [];\n    ev.photos.forEach(function (src) {\n      ev._flat.push(FLAT.length);\n      FLAT.push({ src: src, title: ev.title, evIdx: ei });\n    });\n  });\n\n  function esc(s) {\n    return String(s).replace(\/&\/g, '&amp;').replace(\/<\/g, '&lt;').replace(\/>\/g, '&gt;').replace(\/\"\/g, '&quot;');\n  }\n\n  \/* ---------- Left menu ---------- *\/\n  var allBtn = document.createElement('button');\n  allBtn.className = 'gal-tab is-active';\n  allBtn.setAttribute('data-idx', 'all');\n  allBtn.innerHTML =\n    '<span class=\"gal-tab-thumb gal-tab-thumb--all\">&#9638;<\/span>' +\n    '<span class=\"gal-tab-txt\">All Events' +\n      '<span class=\"gal-tab-count\">' + FLAT.length + ' photos<\/span>' +\n    '<\/span>';\n  tabsBox.appendChild(allBtn);\n\n  GALLERY.forEach(function (ev, i) {\n    var b = document.createElement('button');\n    b.className = 'gal-tab';\n    b.setAttribute('data-idx', String(i));\n    b.innerHTML =\n      '<img decoding=\"async\" class=\"gal-tab-thumb\" src=\"' + esc(ev.photos[0]) + '\" alt=\"\" loading=\"lazy\" \/>' +\n      '<span class=\"gal-tab-txt\">' + esc(ev.title) +\n        '<span class=\"gal-tab-count\">' + ev.photos.length + ' photo' + (ev.photos.length > 1 ? 's' : '') + '<\/span>' +\n      '<\/span>';\n    tabsBox.appendChild(b);\n  });\n\n  \/* ---------- Right panels (masonry) ---------- *\/\n  GALLERY.forEach(function (ev, i) {\n    var panel = document.createElement('div');\n    panel.className = 'gal-panel';\n    panel.setAttribute('data-idx', String(i));\n\n    var h = document.createElement('h3');\n    h.className = 'gal-head';\n    h.textContent = ev.title;\n    panel.appendChild(h);\n\n    var grid = document.createElement('div');\n    grid.className = 'gal-masonry';\n\n    ev.photos.forEach(function (src, pi) {\n      var card = document.createElement('figure');\n      card.className = 'gal-card';\n      card.setAttribute('data-flat', String(ev._flat[pi]));\n      card.innerHTML =\n        '<img src=\"' + esc(src) + '\" alt=\"' + esc(ev.title) + '\" decoding=\"async\" loading=\"lazy\" \/>' +\n        '<figcaption class=\"gal-cap\">' + esc(ev.title) + '<\/figcaption>';\n      grid.appendChild(card);\n    });\n\n    panel.appendChild(grid);\n    panelsBox.appendChild(panel);\n  });\n\n  \/* ---------- Filtering ---------- *\/\n  function show(idx) {\n    Array.prototype.forEach.call(document.querySelectorAll('.gal-tab'), function (t) {\n      t.classList.toggle('is-active', t.getAttribute('data-idx') === idx);\n    });\n    Array.prototype.forEach.call(document.querySelectorAll('.gal-panel'), function (p) {\n      p.style.display = (idx === 'all' || p.getAttribute('data-idx') === idx) ? 'block' : 'none';\n    });\n  }\n  tabsBox.addEventListener('click', function (e) {\n    var btn = e.target.closest('.gal-tab');\n    if (!btn) return;\n    show(btn.getAttribute('data-idx'));\n\n    \/* Filtering makes the page shorter, which would otherwise leave the\n       visitor stranded in empty space at the bottom. Bring them back to\n       the top of the gallery. The offset clears any sticky site header. *\/\n    var wrap = document.querySelector('.gal-wrap');\n    if (!wrap) return;\n    var HEADER_OFFSET = 120; \/\/ increase if your sticky menu overlaps the title\n    var y = wrap.getBoundingClientRect().top + window.pageYOffset - HEADER_OFFSET;\n    window.scrollTo({ top: y < 0 ? 0 : y, behavior: 'smooth' });\n  });\n\n  \/* ---------- Lightbox ---------- *\/\n  var lb      = document.getElementById('gal-lb');\n  var lbImg   = document.getElementById('gal-lb-img');\n  var lbCap   = document.getElementById('gal-lb-cap');\n  var current = 0;\n\n  function render() {\n    var item = FLAT[current];\n    lbImg.src = item.src;\n    lbImg.alt = item.title;\n    lbCap.textContent = item.title + '  (' + (current + 1) + ' \/ ' + FLAT.length + ')';\n  }\n  function open(i)  { current = i; render(); lb.classList.add('is-open'); document.body.style.overflow = 'hidden'; }\n  function close()  { lb.classList.remove('is-open'); document.body.style.overflow = ''; }\n  function step(d)  { current = (current + d + FLAT.length) % FLAT.length; render(); }\n\n  panelsBox.addEventListener('click', function (e) {\n    var card = e.target.closest('.gal-card');\n    if (card) open(parseInt(card.getAttribute('data-flat'), 10));\n  });\n\n  document.getElementById('gal-lb-close').addEventListener('click', close);\n  document.getElementById('gal-lb-prev').addEventListener('click', function (e) { e.stopPropagation(); step(-1); });\n  document.getElementById('gal-lb-next').addEventListener('click', function (e) { e.stopPropagation(); step(1); });\n  lb.addEventListener('click', function (e) { if (e.target === lb) close(); });\n\n  document.addEventListener('keydown', function (e) {\n    if (!lb.classList.contains('is-open')) return;\n    if (e.key === 'Escape')     close();\n    if (e.key === 'ArrowLeft')  step(-1);\n    if (e.key === 'ArrowRight') step(1);\n  });\n\n  show('all');\n\n  \/* Images load at different times; nudge the column layout to recalculate\n     once each one is in, so nothing is left half-drawn. *\/\n  Array.prototype.forEach.call(document.querySelectorAll('.gal-masonry img'), function (img) {\n    if (img.complete) return;\n    img.addEventListener('load', function () {\n      var m = img.closest('.gal-masonry');\n      if (!m) return;\n      m.style.display = 'none';\n      void m.offsetHeight;          \/\/ force reflow\n      m.style.display = '';\n    });\n    img.addEventListener('error', function () {\n      \/\/ A broken URL would otherwise leave an empty white card\n      var card = img.closest('.gal-card');\n      if (card) card.style.display = 'none';\n      console.warn('Gallery image failed to load:', img.src);\n    });\n  });\n})();\n<\/script>\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gallery &#10005; &#10094; &#10095;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"footnotes":""},"class_list":["post-6339","page","type-page","status-publish","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/istr.res.in\/hi\/wp-json\/wp\/v2\/pages\/6339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/istr.res.in\/hi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/istr.res.in\/hi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/istr.res.in\/hi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/istr.res.in\/hi\/wp-json\/wp\/v2\/comments?post=6339"}],"version-history":[{"count":103,"href":"https:\/\/istr.res.in\/hi\/wp-json\/wp\/v2\/pages\/6339\/revisions"}],"predecessor-version":[{"id":7833,"href":"https:\/\/istr.res.in\/hi\/wp-json\/wp\/v2\/pages\/6339\/revisions\/7833"}],"wp:attachment":[{"href":"https:\/\/istr.res.in\/hi\/wp-json\/wp\/v2\/media?parent=6339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}