{"id":6931,"date":"2026-03-08T03:24:41","date_gmt":"2026-03-08T02:24:41","guid":{"rendered":"https:\/\/www.jg-media.eu\/?page_id=6931"},"modified":"2026-08-03T18:47:57","modified_gmt":"2026-08-03T16:47:57","slug":"navod","status":"publish","type":"page","link":"https:\/\/www.jg-media.eu\/cs\/videa-do-galerie-produktov-na-shoptete\/navod\/","title":{"rendered":"N\u00e1vod pre video gal\u00e9riu produktov pre Shoptet"},"content":{"rendered":"<p class=\"qtranxs-available-languages-message qtranxs-available-languages-message-cs\">Omlouv\u00e1me se, tato polo\u017eka je k dispozici pouze v <a href=\"https:\/\/www.jg-media.eu\/sk\/wp-json\/wp\/v2\/pages\/6931\" class=\"qtranxs-available-language-link qtranxs-available-language-link-sk\" title=\"Sloven\u010dina\">Sloven\u010dina<\/a>.<\/p><div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-4aff589\" id=\"navod-pre-video-galeriu-produktov-pre-shoptet\" data-block-id=\"4aff589\"><h1 class=\"stk-block-heading__text\">N\u00e1vod pre video gal\u00e9riu produktov pre Shoptet<\/h1><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-104b8f7\" data-block-id=\"104b8f7\"><style>.stk-104b8f7 {margin-bottom:50px !important;}<\/style><p class=\"stk-block-text__text\">Na tejto str\u00e1nke n\u00e1jdete jednoduch\u00fd n\u00e1vod pre Shoptet doplnok Video gal\u00e9ria produktov, ktor\u00fd v\u00e1m poskytne z\u00e1kladn\u00e9 inform\u00e1cie nastaven\u00ed spolu s&nbsp;mo\u017enos\u0165ami nastavenia a&nbsp;prisp\u00f4sobenia doplnku.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-fb9ae28\" id=\"ako-nastavit-video-do-produktovej-galerie\" data-block-id=\"fb9ae28\"><h3 class=\"stk-block-heading__text\">Ako nastavi\u0165 video do produktovej gal\u00e9rie:<\/h3><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-6ca257b\" data-block-id=\"6ca257b\"><p class=\"stk-block-text__text\">Priradenie vide\u00ed k&nbsp;produktu funguje pomocou popisn\u00fdch parametrov (nastaven\u00e9 parametre pre video sa na&nbsp;e-shope nebud\u00fa zobrazova\u0165). K&nbsp;jedn\u00e9mu produktu m\u00f4\u017eete priradi\u0165 viacero vide\u00ed z&nbsp;r\u00f4znych zdrojov, tie\u017e je mo\u017en\u00e9 nastavi\u0165 r\u00f4zne vide\u00e1 pre in\u00e9 cudzie jazyky &#8211; slovensk\u00e9 alebo \u010desk\u00e9 video pre dom\u00e1ci trh, anglick\u00e9 pre shop v&nbsp;anglickom jazyku.<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-d15299a\" data-block-id=\"d15299a\"><style>.stk-d15299a {margin-bottom:0px !important;}.stk-d15299a-column{--stk-columns-spacing:0px !important;--stk-column-gap:40px !important;row-gap:20px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-d15299a-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-e3309d0\" data-v=\"4\" data-block-id=\"e3309d0\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-e3309d0-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-e3309d0-inner-blocks\">\n<ul class=\"wp-block-list\">\n<li><strong>N\u00e1zev&nbsp;parametru<\/strong>&nbsp;&#8211; sem sa zad\u00e1va text <code>video_X<\/code> .. kde X je poradie videa v&nbsp;gal\u00e9rii, tj. ak zad\u00e1te <code>video_3<\/code>, video bude za druhou fotkou tretie v&nbsp;porad\u00ed.<\/li>\n\n\n\n<li><strong>Hodnota&nbsp;popisn\u00e9ho&nbsp;parametru<\/strong>&nbsp;&#8211; sem sa zad\u00e1va url adresa na&nbsp;video, link zo spr\u00e1vcu s\u00faborov ak nahr\u00e1te vlastn\u00e9 video (.mp4) alebo link z&nbsp;YouTube, YouTube Shorts, Vimeo. Vlastn\u00e9 vide\u00e1 in\u00e9ho form\u00e1tu ako .mp4 nie je mo\u017en\u00e9 prehr\u00e1va\u0165.<\/li>\n\n\n\n<li><strong>Vysv\u011btlivka n\u00e1zvu&nbsp;parametru<\/strong>&nbsp;&#8211; url na&nbsp;n\u00e1h\u013eadov\u00fd obr\u00e1zok, rozmer posta\u010duje 200x200px, zobrazuje sa len v&nbsp;men\u0161\u00edch n\u00e1h\u013eadov\u00fdch fotografi\u00e1ch pod gal\u00e9riou v&nbsp;pr\u00edpade, ak vyu\u017e\u00edvate priame prehr\u00e1vanie vide\u00ed v&nbsp;gal\u00e9rii. Ak vide\u00e1 prehr\u00e1vate a\u017e po kliku v&nbsp;popup okne, odpor\u00fa\u010dam nastavi\u0165 n\u00e1h\u013eadov\u00fa fotografiu rovnakej ve\u013ekosti, ako hlavn\u00e1 produktov\u00e1 fotka.<br><br>Ak sa nezad\u00e1 \u017eiadna url obr\u00e1zku, zobraz\u00ed sa biele pozadie s&nbsp;tla\u010didlom play. Pri YouTube, YouTube Shorts a&nbsp;Viemo sa zobraz\u00ed n\u00e1h\u013eadov\u00e1 fotka videa automaticky v&nbsp;pr\u00edpade, ak nenastav\u00edte \u017eiadny vlastn\u00fd obr\u00e1zok.<\/li>\n<\/ul>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-1195451\" data-v=\"4\" data-block-id=\"1195451\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-1195451-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-1195451-inner-blocks\">\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-bf4f469\" data-block-id=\"bf4f469\"><figure><span class=\"stk-img-wrapper stk-image--shape-stretch stk--has-lightbox\"><img loading=\"lazy\" decoding=\"async\" class=\"stk-img wp-image-6954\" src=\"https:\/\/www.jg-media.eu\/wp-content\/uploads\/2026\/03\/navod-video-2.jpg\" width=\"1267\" height=\"883\" srcset=\"https:\/\/www.jg-media.eu\/wp-content\/uploads\/2026\/03\/navod-video-2.jpg 1267w, https:\/\/www.jg-media.eu\/wp-content\/uploads\/2026\/03\/navod-video-2-300x209.jpg 300w, https:\/\/www.jg-media.eu\/wp-content\/uploads\/2026\/03\/navod-video-2-1024x714.jpg 1024w, https:\/\/www.jg-media.eu\/wp-content\/uploads\/2026\/03\/navod-video-2-768x535.jpg 768w\" sizes=\"auto, (max-width: 1267px) 100vw, 1267px\" \/><\/span><\/figure><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-spacer stk-block-spacer stk--no-padding stk-block stk-21b2955\" data-block-id=\"21b2955\"><style>.stk-21b2955 {height:50px !important;}<\/style><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-01d1bde\" data-block-id=\"01d1bde\"><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-01d1bde-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-25298a8 stk-block-background\" data-v=\"4\" data-block-id=\"25298a8\"><style>.stk-25298a8-container{max-width:600px !important;min-width:auto !important;margin-right:auto !important;margin-left:auto !important;}<\/style><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-25298a8-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-25298a8-inner-blocks\">\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\" style=\"margin-top:0;margin-bottom:0\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"N\u00e1vod pre Shoptet doplnok Video gal\u00e9ria produktov pre Shoptet\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/MJcpS_fUXyA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-d7a9e67\" id=\"konfigurator-galerie\" data-block-id=\"d7a9e67\"><h3 class=\"stk-block-heading__text\">Konfigur\u00e1tor gal\u00e9rie<\/h3><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Pomocou jednoduch\u00e9ho konfigur\u00e1tora si m\u00f4\u017eete prisp\u00f4sobi\u0165 vzh\u013ead a&nbsp;mo\u017enosti vide\u00ed v&nbsp;gal\u00e9rii. V\u00fdsledn\u00fd k\u00f3d skop\u00edrujete a&nbsp;vlo\u017e\u00edte do editora, ktor\u00fd n\u00e1jdete v&nbsp;administr\u00e1cii va\u0161eho obchodu v&nbsp;\u010dasti Vzh\u013ead a&nbsp;obsah &#8211; Editor &#8211; z\u00e1lo\u017eka HTML k\u00f3d.<\/p>\n\n\n<style>\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  :root {\n    --bg: #f4f3f0;\n    --surface: #ffffff;\n    --surface2: #f9f8f6;\n    --border: #e8e6e1;\n    --text: #1a1916;\n    --text2: #6b6860;\n    --accent: #2563eb;\n    --accent-light: #eff6ff;\n    --success: #16a34a;\n    --success-light: #f0fdf4;\n    --radius: 12px;\n    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);\n  }\n\n  .jgm-konfigurator {\n    font-family: inherit;\n    background: var(--bg);\n    color: var(--text);\n    padding: 32px 16px;\n  }\n\n  .wrap {\n    max-width: 1400px;\n    margin: 0 auto;\n  }\n\n  .main-cols {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n    align-items: start;\n    margin-bottom: 20px;\n  }\n\n  .main-cols .card {\n    margin-bottom: 0;\n  }\n\n  @media (max-width: 992px) {\n    .main-cols { grid-template-columns: 1fr; }\n  }\n\n\n  .card {\n    background: var(--surface);\n    border: 1px solid var(--border);\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n    margin-bottom: 20px;\n    overflow: hidden;\n  }\n\n  .card-header {\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--border);\n    background: var(--surface2);\n    font-weight: 600;\n    font-size: 14px;\n    letter-spacing: 0.3px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .card-header .icon {\n    width: 20px;\n    height: 20px;\n    background: var(--accent);\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 11px;\n  }\n\n  .card-body {\n    padding: 20px;\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n  }\n\n  @media (max-width: 600px) {\n    .grid { grid-template-columns: 1fr; }\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .field label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text2);\n  }\n\n  .field .hint {\n    font-size: 12px;\n    color: var(--text2);\n    opacity: 0.7;\n    margin-top: 2px;\n  }\n\n  \/* Toggle *\/\n  .toggle-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--border);\n  }\n\n  .toggle-row:last-child { border-bottom: none; }\n\n  .toggle-info { flex: 1; }\n  .toggle-info span { display: block; font-size: 14px; font-weight: 500; }\n  .toggle-info small { font-size: 12px; color: var(--text2); }\n\n  .toggle {\n    position: relative;\n    width: 44px;\n    height: 24px;\n    flex-shrink: 0;\n    margin-left: 16px;\n  }\n\n  .toggle input { opacity: 0; width: 0; height: 0; }\n\n  .toggle-slider {\n    position: absolute;\n    inset: 0;\n    background: #d1d0cb;\n    border-radius: 24px;\n    cursor: pointer;\n    transition: background 0.2s;\n  }\n\n  .toggle-slider::after {\n    content: '';\n    position: absolute;\n    width: 18px;\n    height: 18px;\n    background: white;\n    border-radius: 50%;\n    top: 3px;\n    left: 3px;\n    transition: transform 0.2s;\n    box-shadow: 0 1px 4px rgba(0,0,0,0.2);\n  }\n\n  .toggle input:checked + .toggle-slider { background: var(--accent); }\n  .toggle input:checked + .toggle-slider::after { transform: translateX(20px); }\n\n  .choice-pair {\n    display: flex;\n    gap: 6px;\n    margin-left: 16px;\n    flex-shrink: 0;\n  }\n\n  .choice {\n    cursor: pointer;\n  }\n\n  .choice input { display: none; }\n\n  .choice span {\n    display: block;\n    padding: 6px 12px;\n    font-size: 12px;\n    font-weight: 500;\n    border: 1px solid var(--border);\n    border-radius: 8px;\n    background: white;\n    color: var(--text2);\n    transition: all 0.15s;\n    user-select: none;\n    white-space: nowrap;\n  }\n\n  .choice input:checked + span {\n    background: var(--accent);\n    border-color: var(--accent);\n    color: white;\n  }\n\n  \/* Number input *\/\n  .num-input {\n    display: flex;\n    align-items: center;\n    gap: 0;\n    border: 1px solid var(--border);\n    border-radius: 8px;\n    overflow: hidden;\n    width: 120px;\n  }\n\n  .num-input button {\n    width: 32px;\n    height: 36px;\n    border: none;\n    background: var(--surface2);\n    cursor: pointer;\n    font-size: 16px;\n    color: var(--text2);\n    transition: background 0.15s;\n    flex-shrink: 0;\n  }\n\n  .num-input button:hover { background: var(--border); }\n\n  .num-input input {\n    width: 56px;\n    height: 36px;\n    border: none;\n    border-left: 1px solid var(--border);\n    border-right: 1px solid var(--border);\n    text-align: center;\n    font-family: monospace;\n    font-size: 14px;\n    background: white;\n    color: var(--text);\n    outline: none;\n  }\n\n  \/* Color picker *\/\n  .color-field {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    border: 1px solid var(--border);\n    border-radius: 8px;\n    padding: 6px 10px;\n    background: white;\n  }\n\n  .color-field input[type=\"color\"] {\n    width: 28px;\n    height: 28px;\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    padding: 0;\n    background: none;\n    flex-shrink: 0;\n  }\n\n  .color-field input[type=\"text\"] {\n    border: none;\n    outline: none;\n    font-family: monospace;\n    font-size: 13px;\n    color: var(--text);\n    width: 80px;\n    background: transparent;\n    text-transform: uppercase;\n  }\n\n  \/* Select *\/\n  select {\n    border: 1px solid var(--border);\n    border-radius: 8px;\n    padding: 8px 12px;\n    font-family: inherit;\n    font-size: 14px;\n    background: white;\n    color: var(--text);\n    outline: none;\n    cursor: pointer;\n    width: 100%;\n  }\n\n  select:focus { border-color: var(--accent); }\n\n  .output-block {\n    background: #f8f7f5;\n    border: 1px solid var(--border);\n    border-radius: var(--radius);\n    overflow: hidden;\n    margin-bottom: 16px;\n  }\n\n  .output-block-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 10px 16px;\n    background: #eceae6;\n    border-bottom: 1px solid var(--border);\n  }\n\n  .output-block-header span {\n    font-size: 12px;\n    color: var(--text2);\n    font-family: monospace;\n  }\n\n  .copy-btn {\n    border: 1px solid var(--border);\n    background: white;\n    color: var(--text);\n    border-radius: 6px;\n    padding: 4px 12px;\n    font-size: 12px;\n    font-family: inherit;\n    cursor: pointer;\n    transition: all 0.15s;\n  }\n\n  .copy-btn:hover { background: var(--border); }\n  .copy-btn.copied { background: var(--success); border-color: var(--success); color: white; }\n\n  .output-block pre {\n    padding: 16px;\n    font-family: monospace;\n    font-size: 13px;\n    line-height: 1.7;\n    color: var(--text);\n    white-space: pre-wrap;\n    word-break: break-all;\n    max-height: 340px;\n    overflow-y: auto;\n  }\n\n  .output-block pre .key { color: #86c1ff; }\n  .output-block pre .val { color: #b5f0a0; }\n  .output-block pre .str { color: #ffd580; }\n  .output-block pre .comment { color: #6b6960; }\n\n  \/* Generate button *\/\n  .generate-btn {\n    width: 100%;\n    padding: 14px;\n    background: var(--accent);\n    color: white;\n    border: none;\n    border-radius: var(--radius);\n    font-family: inherit;\n    font-size: 15px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s;\n    margin-bottom: 20px;\n    letter-spacing: 0.2px;\n  }\n\n  .generate-btn:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3); }\n  .generate-btn:active { transform: translateY(0); }\n\n  .section-label {\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--text2);\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n    margin-bottom: 10px;\n    margin-top: 4px;\n  }\n\n  .opacity-field {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .opacity-field input[type=\"range\"] {\n    flex: 1;\n    accent-color: var(--accent);\n  }\n\n  .opacity-field .val-label {\n    font-family: monospace;\n    font-size: 13px;\n    width: 32px;\n    text-align: right;\n    color: var(--text2);\n  }\n\n  .aspect-row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .aspect-row input[type=\"text\"] {\n    border: 1px solid var(--border);\n    border-radius: 8px;\n    padding: 8px 12px;\n    font-family: monospace;\n    font-size: 13px;\n    width: 120px;\n    outline: none;\n    color: var(--text);\n  }\n\n  .aspect-row input:focus { border-color: var(--accent); }\n  .aspect-row label { font-size: 13px; color: var(--text2); }\n\n  .info-box {\n    background: var(--accent-light);\n    border: 1px solid #bfdbfe;\n    border-radius: 8px;\n    padding: 12px 14px;\n    font-size: 13px;\n    color: #1e40af;\n    margin-bottom: 16px;\n    line-height: 1.5;\n  }\n<\/style>\n<div class=\"jgm-konfigurator\">\n<div class=\"wrap\">\n  <div class=\"main-cols\">\n    <!-- CSS NASTAVENIA -->\n    <div class=\"card\">\n      <div class=\"card-header\">Farby a&nbsp;vzh\u013ead<\/div>\n      <div class=\"card-body\">\n        <div class=\"grid\">\n\n          <div class=\"field\">\n            <label>Zaoblenie rohov galerie<\/label>\n            <div class=\"opacity-field\">\n              <input type=\"range\" id=\"gallery_radius\" min=\"0\" max=\"25\" step=\"1\" value=\"0\">\n              <span class=\"val-label\" id=\"radius_label\">0px<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"field\">\n            <label>Prieh\u013eadnos\u0165 \u0161\u00edpok galerie<\/label>\n            <div class=\"opacity-field\">\n              <input type=\"range\" id=\"gallery_arrow_opacity\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0.7\">\n              <span class=\"val-label\" id=\"opacity_label\">0.7<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"field\">\n            <label>Pozadie \u0161\u00edpok<\/label>\n            <div class=\"color-field\">\n              <input type=\"color\" id=\"gallery_arrow_background_picker\" value=\"#ffffff\">\n              <input type=\"text\" id=\"gallery_arrow_background\" value=\"#FFFFFF\" maxlength=\"7\">\n            <\/div>\n          <\/div>\n\n          <div class=\"field\">\n            <label>Farba \u0161\u00edpok<\/label>\n            <div class=\"color-field\">\n              <input type=\"color\" id=\"gallery_arrow_color_picker\" value=\"#000000\">\n              <input type=\"text\" id=\"gallery_arrow_color\" value=\"#000000\" maxlength=\"7\">\n            <\/div>\n          <\/div>\n\n          <div class=\"field\">\n            <label>Farba akt\u00edvnej bodky (pagination)<\/label>\n            <div class=\"color-field\">\n              <input type=\"color\" id=\"gallery_pagination_color_active_picker\" value=\"#000000\">\n              <input type=\"text\" id=\"gallery_pagination_color_active\" value=\"\" placeholder=\"ako \u0161\u00edpky\" maxlength=\"7\">\n            <\/div>\n            <span class=\"hint\">Predvolen\u00e1 hodnota: farba \u0161\u00edpok<\/span>\n          <\/div>\n\n          <div class=\"field\">\n            <label>Farba neakt\u00edvnej bodky (pagination)<\/label>\n            <div class=\"color-field\">\n              <input type=\"color\" id=\"gallery_pagination_color_picker\" value=\"#dadada\">\n              <input type=\"text\" id=\"gallery_pagination_color\" value=\"\" placeholder=\"farba eshopu\" maxlength=\"7\">\n            <\/div>\n            <span class=\"hint\">Predvolen\u00e1 hodnota: farba okrajov eshopu<\/span>\n          <\/div>\n\n          <div class=\"field\">\n            <label>Pozadie tla\u010didla play<\/label>\n            <div class=\"color-field\">\n              <input type=\"color\" id=\"gallery_play_background_picker\" value=\"#2563eb\">\n              <input type=\"text\" id=\"gallery_play_background\" value=\"\" placeholder=\"farba eshopu\" maxlength=\"7\">\n            <\/div>\n            <span class=\"hint\">Predvolen\u00e1 hodnota: farba eshopu<\/span>\n          <\/div>\n\n          <div class=\"field\">\n            <label>Farba ikony play<\/label>\n            <div class=\"color-field\">\n              <input type=\"color\" id=\"gallery_play_color_picker\" value=\"#ffffff\">\n              <input type=\"text\" id=\"gallery_play_color\" value=\"#FFFFFF\" maxlength=\"7\">\n            <\/div>\n          <\/div>\n\n          <div class=\"field\">\n            <label>Okraj hlavn\u00e9ho obr\u00e1zka<\/label>\n            <div class=\"color-field\">\n              <input type=\"color\" id=\"gallery_main_border_color_picker\" value=\"#ffffff\">\n              <input type=\"text\" id=\"gallery_main_border_color\" value=\"transparent\" maxlength=\"7\">\n            <\/div>\n            <span class=\"hint\">Zadajte &#8222;transparent&#8220; pre bez okraja<\/span>\n          <\/div>\n\n          <div class=\"field\">\n            <label>Okraj miniat\u00far<\/label>\n            <div class=\"color-field\">\n              <input type=\"color\" id=\"gallery_thumbnail_border_color_picker\" value=\"#dadada\">\n              <input type=\"text\" id=\"gallery_thumbnail_border_color\" value=\"\" placeholder=\"farba eshopu\" maxlength=\"7\">\n            <\/div>\n            <span class=\"hint\">Predvolen\u00e1 hodnota: farba okrajov eshopu<\/span>\n          <\/div>\n\n          <div class=\"field\">\n            <label>Okraj akt\u00edvnej miniat\u00fary<\/label>\n            <div class=\"color-field\">\n              <input type=\"color\" id=\"gallery_thumbnail_border_color_active_picker\" value=\"#2563eb\">\n              <input type=\"text\" id=\"gallery_thumbnail_border_color_active\" value=\"\" placeholder=\"farba eshopu\" maxlength=\"7\">\n            <\/div>\n            <span class=\"hint\">Predvolen\u00e1 hodnota: farba eshopu<\/span>\n          <\/div>\n\n        <\/div>\n\n        <div style=\"margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border);\">\n          <div style=\"font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text2); margin-bottom: 14px;\">Lightbox (zobrazenie na&nbsp;cel\u00fa obrazovku)<\/div>\n          <div class=\"grid\">\n\n            <div class=\"field\">\n              <label>Pozadie lightboxu<\/label>\n              <div class=\"color-field\">\n                <input type=\"color\" id=\"gallery_lightbox_background_picker\" value=\"#000000\">\n                <input type=\"text\" id=\"gallery_lightbox_background\" value=\"#000000\" maxlength=\"7\">\n              <\/div>\n            <\/div>\n\n            <div class=\"field\">\n              <label>Prieh\u013eadnos\u0165 pozadia lightboxu<\/label>\n              <div class=\"opacity-field\">\n                <input type=\"range\" id=\"gallery_lightbox_opacity\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0.7\">\n                <span class=\"val-label\" id=\"lightbox_opacity_label\">0.7<\/span>\n              <\/div>\n            <\/div>\n\n            <div class=\"field\">\n              <label>Pozadie \u0161\u00edpok v&nbsp;lightboxe<\/label>\n              <div class=\"color-field\">\n                <input type=\"color\" id=\"gallery_lightbox_arrow_background_picker\" value=\"#000000\">\n                <input type=\"text\" id=\"gallery_lightbox_arrow_background\" value=\"none\" maxlength=\"7\">\n              <\/div>\n              <span class=\"hint\">Zadajte &#8222;none&#8220; pre bez pozadia<\/span>\n            <\/div>\n\n            <div class=\"field\">\n              <label>Farba \u0161\u00edpok v&nbsp;lightboxe<\/label>\n              <div class=\"color-field\">\n                <input type=\"color\" id=\"gallery_lightbox_arrow_color_picker\" value=\"#ffffff\">\n                <input type=\"text\" id=\"gallery_lightbox_arrow_color\" value=\"#FFFFFF\" maxlength=\"7\">\n              <\/div>\n            <\/div>\n\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- JS NASTAVENIA -->\n    <div class=\"card\">\n      <div class=\"card-header\">Spr\u00e1vanie galerie<\/div>\n      <div class=\"card-body\">\n\n        <div class=\"toggle-row\">\n          <div class=\"toggle-info\">\n            <span>\u0160\u00edpky v&nbsp;gal\u00e9rii<\/span>\n            <small>Zobrazova\u0165 \u0161\u00edpky na&nbsp;prech\u00e1dzanie hlavnej galerie<\/small>\n          <\/div>\n          <label class=\"toggle\">\n            <input type=\"checkbox\" id=\"galleryArrows\" checked>\n            <span class=\"toggle-slider\"><\/span>\n          <\/label>\n        <\/div>\n\n        <div class=\"toggle-row\">\n          <div class=\"toggle-info\">\n            <span>Bodky (pagination)<\/span>\n            <small>Zobrazova\u0165 bodky pod hlavnou gal\u00e9riou<\/small>\n          <\/div>\n          <label class=\"toggle\">\n            <input type=\"checkbox\" id=\"galleryDots\">\n            <span class=\"toggle-slider\"><\/span>\n          <\/label>\n        <\/div>\n\n        <div class=\"toggle-row\">\n          <div class=\"toggle-info\">\n            <span>\u0160\u00edpky miniat\u00far<\/span>\n            <small>Zobrazova\u0165 \u0161\u00edpky na&nbsp;prech\u00e1dzanie miniat\u00far<\/small>\n          <\/div>\n          <label class=\"toggle\">\n            <input type=\"checkbox\" id=\"thumbnailsArrows\" checked>\n            <span class=\"toggle-slider\"><\/span>\n          <\/label>\n        <\/div>\n\n        <div class=\"toggle-row\">\n          <div class=\"toggle-info\">\n            <span>MP4 vide\u00e1 inline<\/span>\n            <small>Prehr\u00e1va\u0165 MP4 vide\u00e1 priamo v&nbsp;gal\u00e9rii<\/small>\n          <\/div>\n          <label class=\"toggle\">\n            <input type=\"checkbox\" id=\"videoInlineMp4\" checked>\n            <span class=\"toggle-slider\"><\/span>\n          <\/label>\n        <\/div>\n\n        <div class=\"toggle-row\">\n          <div class=\"toggle-info\">\n            <span>YouTube vide\u00e1 inline<\/span>\n            <small>Prehr\u00e1va\u0165 YouTube vide\u00e1 priamo v&nbsp;gal\u00e9rii<\/small>\n          <\/div>\n          <label class=\"toggle\">\n            <input type=\"checkbox\" id=\"videoInlineYt\" checked>\n            <span class=\"toggle-slider\"><\/span>\n          <\/label>\n        <\/div>\n\n        <div class=\"toggle-row\">\n          <div class=\"toggle-info\">\n            <span>Vimeo vide\u00e1 inline<\/span>\n            <small>Prehr\u00e1va\u0165 Vimeo vide\u00e1 priamo v&nbsp;gal\u00e9rii<\/small>\n          <\/div>\n          <label class=\"toggle\">\n            <input type=\"checkbox\" id=\"videoInlineVimeo\" checked>\n            <span class=\"toggle-slider\"><\/span>\n          <\/label>\n        <\/div>\n\n        <div class=\"toggle-row\">\n          <div class=\"toggle-info\">\n            <span>Ovl\u00e1dacie prvky videa<\/span>\n            <small>Zobrazova\u0165 play\/pause li\u0161tu na&nbsp;vide\u00e1ch<\/small>\n          <\/div>\n          <label class=\"toggle\">\n            <input type=\"checkbox\" id=\"videoControls\" checked>\n            <span class=\"toggle-slider\"><\/span>\n          <\/label>\n        <\/div>\n\n        <div class=\"toggle-row\">\n          <div class=\"toggle-info\">\n            <span>Lightbox na&nbsp;mobile<\/span>\n            <small>Otv\u00e1ra\u0165 obr\u00e1zky\/vide\u00e1 v&nbsp;lightboxe na&nbsp;mobiln\u00fdch zariadeniach<\/small>\n          <\/div>\n          <label class=\"toggle\">\n            <input type=\"checkbox\" id=\"mobileLightbox\">\n            <span class=\"toggle-slider\"><\/span>\n          <\/label>\n        <\/div>\n\n        <div class=\"toggle-row\">\n          <div class=\"toggle-info\">\n            <span>Vertik\u00e1lne miniat\u00fary<\/span>\n            <small>Nechajte obe vypnut\u00e9 pre predvolen\u00e9 nastavenie \u0161abl\u00f3ny<\/small>\n          <\/div>\n          <div class=\"choice-pair\">\n            <label class=\"choice\">\n              <input type=\"checkbox\" id=\"verticalThumbsOn\">\n              <span>Zapn\u00fa\u0165<\/span>\n            <\/label>\n            <label class=\"choice\">\n              <input type=\"checkbox\" id=\"verticalThumbsOff\">\n              <span>Vypn\u00fa\u0165<\/span>\n            <\/label>\n          <\/div>\n        <\/div>\n\n        <div style=\"margin-top: 20px;\">\n          <div class=\"grid\">\n            <div class=\"field\">\n              <label>Po\u010det miniat\u00far \u2013 po\u010d\u00edta\u010d<\/label>\n              <div class=\"num-input\">\n                <button onclick=\"changeNum('pcThumbs', -1)\">\u2212<\/button>\n                <input type=\"number\" id=\"pcThumbs\" value=\"6\" min=\"1\" max=\"12\">\n                <button onclick=\"changeNum('pcThumbs', 1)\">+<\/button>\n              <\/div>\n            <\/div>\n\n            <div class=\"field\">\n              <label>Po\u010det miniat\u00far \u2013 tablet<\/label>\n              <div class=\"num-input\">\n                <button onclick=\"changeNum('tabletThumbs', -1)\">\u2212<\/button>\n                <input type=\"number\" id=\"tabletThumbs\" value=\"7\" min=\"1\" max=\"12\">\n                <button onclick=\"changeNum('tabletThumbs', 1)\">+<\/button>\n              <\/div>\n            <\/div>\n\n            <div class=\"field\">\n              <label>Po\u010det miniat\u00far \u2013 mobil<\/label>\n              <div class=\"num-input\">\n                <button onclick=\"changeNum('mobileThumbs', -1)\">\u2212<\/button>\n                <input type=\"number\" id=\"mobileThumbs\" value=\"4\" min=\"1\" max=\"12\">\n                <button onclick=\"changeNum('mobileThumbs', 1)\">+<\/button>\n              <\/div>\n            <\/div>\n\n            <div class=\"field\">\n              <label>Medzera medzi miniat\u00farami (px)<\/label>\n              <div class=\"num-input\">\n                <button onclick=\"changeNum('gapThumbs', -1)\">\u2212<\/button>\n                <input type=\"number\" id=\"gapThumbs\" value=\"10\" min=\"0\" max=\"40\">\n                <button onclick=\"changeNum('gapThumbs', 1)\">+<\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"field\" style=\"margin-top: 16px;\">\n            <label>Pomer str\u00e1n videa v&nbsp;lightboxe<\/label>\n            <select id=\"aspectRatio\">\n              <option value=\"\">Automaticky pod\u013ea obr\u00e1zka<\/option>\n              <option value=\"1.78\">16:9 \u2013 \u0161irokouhl\u00fd (YouTube)<\/option>\n              <option value=\"1.33\">4:3 \u2013 klasick\u00fd<\/option>\n              <option value=\"1\">1:1 \u2013 \u0161tvorec<\/option>\n              <option value=\"0.75\">3:4 \u2013 na&nbsp;v\u00fd\u0161ku<\/option>\n              <option value=\"0.67\">2:3 \u2013 portr\u00e9t<\/option>\n            <\/select>\n            <span class=\"hint\">Plat\u00ed len pre zobrazenie videa v&nbsp;lightboxe<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div><!-- end main-cols -->\n\n  <button class=\"generate-btn\" onclick=\"generate()\">Vygenerova\u0165 k\u00f3d<\/button>\n\n  <!-- OUTPUT -->\n  <div id=\"output\" style=\"display:none;\">\n    <div class=\"info-box\">\n      Skop\u00edrujte k\u00f3d <strong>Z\u00e1hlavie (pred uz\u00e1tv\u00e1raj\u00fac\u00edm tagom HEAD)<\/strong> do sekcie <strong>Z\u00e1hlavie (pred uz\u00e1tv\u00e1raj\u00fac\u00edm tagom HEAD)<\/strong> v&nbsp;editore eshopu, a&nbsp;k\u00f3d <strong>P\u00e4ti\u010dka (pred uz\u00e1tv\u00e1raj\u00fac\u00edm tagom BODY)<\/strong> do sekcie <strong>P\u00e4ti\u010dka (pred uz\u00e1tv\u00e1raj\u00fac\u00edm tagom BODY)<\/strong> v&nbsp;editore eshopu.\n    <\/div>\n\n    <div style=\"display:grid; grid-template-columns:1fr 1fr; gap:16px;\">\n      <div>\n        <p class=\"section-label\">Z\u00e1hlavie (pred uz\u00e1tv\u00e1raj\u00fac\u00edm tagom HEAD)<\/p>\n        <div class=\"output-block\">\n          <div class=\"output-block-header\">\n            <button class=\"copy-btn\" onclick=\"copyCode('css_output', this)\">Kop\u00edrova\u0165<\/button>\n          <\/div>\n          <pre id=\"css_output\"><\/pre>\n        <\/div>\n      <\/div>\n      <div>\n        <p class=\"section-label\">P\u00e4ti\u010dka (pred uz\u00e1tv\u00e1raj\u00fac\u00edm tagom BODY)<\/p>\n        <div class=\"output-block\">\n          <div class=\"output-block-header\">\n            <button class=\"copy-btn\" onclick=\"copyCode('js_output', this)\">Kop\u00edrova\u0165<\/button>\n          <\/div>\n          <pre id=\"js_output\"><\/pre>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<\/div><!-- end jgm-konfigurator -->\n\n<script>\n\/\/ defaults\nconst CSS_DEFAULTS = {\n  gallery_radius: '0',\n  gallery_arrow_opacity: '0.7',\n  gallery_arrow_background: '#ffffff',\n  gallery_arrow_color: '#000000',\n  gallery_play_background: 'var(--color-secondary)',\n  gallery_play_color: '#ffffff',\n  gallery_pagination_color_active: 'var(--color-secondary)',\n  gallery_pagination_color: 'var(--colors-foregrounds-borders-secondary)',\n  gallery_main_border_color: 'transparent',\n  gallery_thumbnail_border_color: 'var(--colors-foregrounds-borders-secondary)',\n  gallery_thumbnail_border_color_active: 'var(--color-secondary)',\n  gallery_lightbox_background_color: '#000000',\n  gallery_lightbox_background_opacity: '0.7',\n  gallery_lightbox_arrow_color: '#ffffff',\n};\n\nconst JS_DEFAULTS = {\n  galleryArrows: true,\n  galleryDots: false,\n  thumbnailsArrows: true,\n  pcThumbs: 6,\n  tabletThumbs: 7,\n  mobileThumbs: 4,\n  gapThumbs: 10,\n  verticalThumbs: null,\n  videoInlineMp4: true,\n  videoInlineYt: true,\n  videoInlineVimeo: true,\n  aspectRatio: null,\n  videoControls: true,\n  mobileLightbox: false,\n};\n\nfunction changeNum(id, delta) {\n  const el = document.getElementById(id);\n  const min = parseInt(el.min) || 0;\n  const max = parseInt(el.max) || 99;\n  el.value = Math.min(max, Math.max(min, parseInt(el.value) + delta));\n}\n\n\/\/ Sync color pickers with text inputs\nfunction setupColorSync(pickerId, textId) {\n  const picker = document.getElementById(pickerId);\n  const text = document.getElementById(textId);\n  if (!picker || !text) return;\n\n  picker.addEventListener('input', () => {\n    text.value = picker.value.toUpperCase();\n  });\n\n  text.addEventListener('input', () => {\n    const val = text.value.trim();\n    if (\/^#[0-9a-fA-F]{6}$\/.test(val)) {\n      picker.value = val;\n    }\n  });\n}\n\nsetupColorSync('gallery_arrow_background_picker', 'gallery_arrow_background');\nsetupColorSync('gallery_arrow_color_picker', 'gallery_arrow_color');\nsetupColorSync('gallery_play_background_picker', 'gallery_play_background');\nsetupColorSync('gallery_play_color_picker', 'gallery_play_color');\nsetupColorSync('gallery_pagination_color_active_picker', 'gallery_pagination_color_active');\nsetupColorSync('gallery_pagination_color_picker', 'gallery_pagination_color');\nsetupColorSync('gallery_main_border_color_picker', 'gallery_main_border_color');\nsetupColorSync('gallery_thumbnail_border_color_picker', 'gallery_thumbnail_border_color');\nsetupColorSync('gallery_thumbnail_border_color_active_picker', 'gallery_thumbnail_border_color_active');\nsetupColorSync('gallery_lightbox_background_picker', 'gallery_lightbox_background');\nsetupColorSync('gallery_lightbox_arrow_background_picker', 'gallery_lightbox_arrow_background');\nsetupColorSync('gallery_lightbox_arrow_color_picker', 'gallery_lightbox_arrow_color');\n\n\/\/ -------------------------------------------------\n\/\/ setupExclusivePair\n\/\/ -------------------------------------------------\nfunction setupExclusivePair(onId, offId) {\n  const onEl = document.getElementById(onId);\n  const offEl = document.getElementById(offId);\n  onEl.addEventListener('change', function() {\n    if (this.checked) offEl.checked = false;\n  });\n  offEl.addEventListener('change', function() {\n    if (this.checked) onEl.checked = false;\n  });\n}\n\nsetupExclusivePair('verticalThumbsOn', 'verticalThumbsOff');\n\n\/\/ Slider labels\ndocument.getElementById('gallery_radius').addEventListener('input', function() {\n  document.getElementById('radius_label').textContent = this.value === '0' ? '0px' : this.value + 'px';\n});\n\ndocument.getElementById('gallery_arrow_opacity').addEventListener('input', function() {\n  document.getElementById('opacity_label').textContent = this.value;\n});\n\ndocument.getElementById('gallery_lightbox_opacity').addEventListener('input', function() {\n  document.getElementById('lightbox_opacity_label').textContent = this.value;\n});\n\nfunction hexToRgba(hex, opacity) {\n  const r = parseInt(hex.slice(1,3), 16);\n  const g = parseInt(hex.slice(3,5), 16);\n  const b = parseInt(hex.slice(5,7), 16);\n  return `rgba(${r}, ${g}, ${b}, ${opacity})`;\n}\n\nfunction safeColor(id, fallback) {\n  const val = document.getElementById(id).value.trim().toLowerCase();\n  if (!val) return fallback;\n  return val;\n}\n\nfunction generate() {\n  const cssVars = {};\n  const jsVars = {};\n\n  \/\/ --- CSS ---\n  const radiusVal = parseInt(document.getElementById('gallery_radius').value);\n  if (radiusVal !== 0) cssVars['--jgm-product-video-gallery-radius'] = radiusVal + 'px';\n\n  const arrowOpacity = document.getElementById('gallery_arrow_opacity').value;\n  if (arrowOpacity !== CSS_DEFAULTS.gallery_arrow_opacity) cssVars['--jgm-product-video-gallery-arrow-opacity'] = arrowOpacity;\n\n  const arrowBg = safeColor('gallery_arrow_background', 'transparent');\n  if (arrowBg !== CSS_DEFAULTS.gallery_arrow_background) cssVars['--jgm-product-video-gallery-arrow-background'] = arrowBg;\n\n  const arrowColor = safeColor('gallery_arrow_color', 'transparent');\n  if (arrowColor !== CSS_DEFAULTS.gallery_arrow_color) cssVars['--jgm-product-video-gallery-arrow-color'] = arrowColor;\n\n  const playBg = safeColor('gallery_play_background', 'transparent');\n  if (\/^#\/.test(playBg) && playBg !== CSS_DEFAULTS.gallery_play_background) cssVars['--jgm-product-video-gallery-play-background'] = playBg;\n\n  const playColor = safeColor('gallery_play_color', 'transparent');\n  if (playColor !== CSS_DEFAULTS.gallery_play_color) cssVars['--jgm-product-video-gallery-play-color'] = playColor;\n\n  const paginationColorActive = safeColor('gallery_pagination_color_active', 'transparent');\n  if (\/^#\/.test(paginationColorActive) && paginationColorActive !== CSS_DEFAULTS.gallery_pagination_color_active) cssVars['--jgm-product-video-gallery-pagination-color-active'] = paginationColorActive;\n\n  const paginationColor = safeColor('gallery_pagination_color', 'transparent');\n  if (\/^#\/.test(paginationColor) && paginationColor !== CSS_DEFAULTS.gallery_pagination_color) cssVars['--jgm-product-video-gallery-pagination-color'] = paginationColor;\n\n  const mainBorder = safeColor('gallery_main_border_color', 'transparent');\n  if (mainBorder !== CSS_DEFAULTS.gallery_main_border_color) cssVars['--jgm-product-video-gallery-main-border-color'] = mainBorder;\n\n  const thumbBorder = safeColor('gallery_thumbnail_border_color', 'transparent');\n  if (\/^#\/.test(thumbBorder) && thumbBorder !== CSS_DEFAULTS.gallery_thumbnail_border_color) cssVars['--jgm-product-video-gallery-thumbnail-border-color'] = thumbBorder;\n\n  const thumbBorderActive = safeColor('gallery_thumbnail_border_color_active', 'transparent');\n  if (\/^#\/.test(thumbBorderActive) && thumbBorderActive !== CSS_DEFAULTS.gallery_thumbnail_border_color_active) cssVars['--jgm-product-video-gallery-thumbnail-border-color-active'] = thumbBorderActive;\n\n  const lightboxColor = safeColor('gallery_lightbox_background', '#000000');\n  const lightboxOpacity = document.getElementById('gallery_lightbox_opacity').value;\n  const lightboxRgba = \/^#[0-9a-f]{6}$\/.test(lightboxColor) ? hexToRgba(lightboxColor, lightboxOpacity) : hexToRgba('#000000', lightboxOpacity);\n  const defaultLightbox = hexToRgba('#000000', '0.7');\n  if (lightboxRgba !== defaultLightbox) cssVars['--jgm-product-video-gallery-lightbox-background'] = lightboxRgba;\n\n  const lightboxArrowBg = safeColor('gallery_lightbox_arrow_background', 'transparent');\n  if (lightboxArrowBg !== 'none') cssVars['--jgm-product-video-gallery-lightbox-arrow-background'] = lightboxArrowBg;\n\n  const lightboxArrowColor = safeColor('gallery_lightbox_arrow_color', 'transparent');\n  if (lightboxArrowColor !== CSS_DEFAULTS.gallery_lightbox_arrow_color) cssVars['--jgm-product-video-gallery-lightbox-arrow-color'] = lightboxArrowColor;\n\n  \/\/ --- JS ---\n  const galleryArrows = document.getElementById('galleryArrows').checked;\n  if (galleryArrows !== JS_DEFAULTS.galleryArrows) jsVars['galleryArrows'] = galleryArrows;\n\n  const galleryDots = document.getElementById('galleryDots').checked;\n  if (galleryDots !== JS_DEFAULTS.galleryDots) jsVars['galleryDots'] = galleryDots;\n\n  const thumbnailsArrows = document.getElementById('thumbnailsArrows').checked;\n  if (thumbnailsArrows !== JS_DEFAULTS.thumbnailsArrows) jsVars['thumbnailsArrows'] = thumbnailsArrows;\n\n  const verticalThumbsOn = document.getElementById('verticalThumbsOn').checked;\n  const verticalThumbsOff = document.getElementById('verticalThumbsOff').checked;\n  if (verticalThumbsOn) jsVars['verticalThumbs'] = true;\n  else if (verticalThumbsOff) jsVars['verticalThumbs'] = false;\n\n  const videoInlineMp4 = document.getElementById('videoInlineMp4').checked;\n  if (videoInlineMp4 !== JS_DEFAULTS.videoInlineMp4) jsVars['videoInlineMp4'] = videoInlineMp4;\n\n  const videoInlineYt = document.getElementById('videoInlineYt').checked;\n  if (videoInlineYt !== JS_DEFAULTS.videoInlineYt) jsVars['videoInlineYt'] = videoInlineYt;\n\n  const videoInlineVimeo = document.getElementById('videoInlineVimeo').checked;\n  if (videoInlineVimeo !== JS_DEFAULTS.videoInlineVimeo) jsVars['videoInlineVimeo'] = videoInlineVimeo;\n\n  const videoControls = document.getElementById('videoControls').checked;\n  if (videoControls !== JS_DEFAULTS.videoControls) jsVars['videoControls'] = videoControls;\n\n  const mobileLightbox = document.getElementById('mobileLightbox').checked;\n  if (mobileLightbox !== JS_DEFAULTS.mobileLightbox) jsVars['mobileLightbox'] = mobileLightbox;\n\n  const pcThumbs = parseInt(document.getElementById('pcThumbs').value);\n  if (pcThumbs !== JS_DEFAULTS.pcThumbs) jsVars['pcThumbs'] = pcThumbs;\n\n  const tabletThumbs = parseInt(document.getElementById('tabletThumbs').value);\n  if (tabletThumbs !== JS_DEFAULTS.tabletThumbs) jsVars['tabletThumbs'] = tabletThumbs;\n\n  const mobileThumbs = parseInt(document.getElementById('mobileThumbs').value);\n  if (mobileThumbs !== JS_DEFAULTS.mobileThumbs) jsVars['mobileThumbs'] = mobileThumbs;\n\n  const gapThumbs = parseInt(document.getElementById('gapThumbs').value);\n  if (gapThumbs !== JS_DEFAULTS.gapThumbs) jsVars['gapThumbs'] = gapThumbs;\n\n  const aspectRatio = document.getElementById('aspectRatio').value;\n  if (aspectRatio && aspectRatio !== '') jsVars['aspectRatio'] = aspectRatio;\n\n  \/\/ --- Build CSS output ---\n  let cssOut = '';\n  if (Object.keys(cssVars).length === 0) {\n    cssOut = '<!-- \u017diadne zmeny oproti predvolen\u00e9mu nastaveniu -->';\n  } else {\n    cssOut = '<!-- jg-media.eu video gal\u00e9ria produktov - nastavenia -->\\n';\n    cssOut += '<style>\\n  :root {\\n';\n    for (const [k, v] of Object.entries(cssVars)) {\n      cssOut += `    ${k}: ${v};\\n`;\n    }\n    cssOut += '  }\\n<\/style>\\n';\n    cssOut += '<!-- koniec \/\/ jg-media.eu video gal\u00e9ria produktov - nastavenia -->';\n  }\n\n  \/\/ --- Build JS output ---\n  let jsOut = '';\n  if (Object.keys(jsVars).length === 0) {\n    jsOut = '<!-- \u017diadne zmeny oproti predvolen\u00e9mu nastaveniu -->';\n  } else {\n    jsOut = '<!-- jg-media.eu video gal\u00e9ria produktov - nastavenia -->\\n';\n    jsOut += '<script>\\n';\n    for (const [k, v] of Object.entries(jsVars)) {\n      if (k === 'aspectRatio') {\n        jsOut += `  window.jgmProductVideoGallery.${k} = '${v}';\\n`;\n      } else if (typeof v === 'boolean') {\n        jsOut += `  window.jgmProductVideoGallery.${k} = ${v};\\n`;\n      } else {\n        jsOut += `  window.jgmProductVideoGallery.${k} = ${v};\\n`;\n      }\n    }\n    jsOut += '<\\\/script>\\n';\n    jsOut += '<!-- koniec \/\/ jg-media.eu video gal\u00e9ria produktov - nastavenia -->';\n  }\n\n  document.getElementById('css_output').textContent = cssOut;\n  document.getElementById('js_output').textContent = jsOut;\n  document.getElementById('output').style.display = 'block';\n  document.getElementById('output').scrollIntoView({ behavior: 'smooth', block: 'start' });\n}\n\nfunction copyCode(id, btn) {\n  const text = document.getElementById(id).textContent;\n  navigator.clipboard.writeText(text).then(() => {\n    btn.textContent = 'Skop\u00edrovan\u00e9 \u2713';\n    btn.classList.add('copied');\n    setTimeout(() => {\n      btn.textContent = 'Kop\u00edrova\u0165';\n      btn.classList.remove('copied');\n    }, 2000);\n  });\n}\n<\/script>\n\n\n<div class=\"wp-block-stackable-spacer stk-block-spacer stk--no-padding stk-block stk-03afd09\" data-block-id=\"03afd09\"><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-a269820\" id=\"priklad-umiestnenia-vygenerovaneho-kodu-v-administracii-shoptet\" data-block-id=\"a269820\"><h3 class=\"stk-block-heading__text\">Pr\u00edklad umiestnenia vygenerovan\u00e9ho k\u00f3du v administr\u00e1cii Shoptet:<\/h3><\/div>\n\n\n\n<div class=\"wp-block-stackable-columns stk-block-columns stk-block stk-c4c7812\" data-block-id=\"c4c7812\"><style>.stk-c4c7812-column{--stk-columns-spacing:0px !important;--stk-column-gap:20px !important;row-gap:30px !important;}<\/style><div class=\"stk-row stk-inner-blocks stk-block-content stk-content-align stk-c4c7812-column\">\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-f596521\" data-v=\"4\" data-block-id=\"f596521\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-f596521-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-f596521-inner-blocks\">\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-5129e42\" data-block-id=\"5129e42\"><style>.stk-5129e42 {margin-bottom:5px !important;}.stk-5129e42 .stk-block-text__text{font-size:14px !important;}@media screen and (max-width:999px){.stk-5129e42 .stk-block-text__text{font-size:14px !important;}}<\/style><p class=\"stk-block-text__text\">Z\u00e1hlavie (pred uz\u00e1tv\u00e1raj\u00fac\u00edm tagom HEAD)<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-5e0a422 stk--has-lightbox\" data-block-id=\"5e0a422\"><figure><span class=\"stk-img-wrapper stk-image--shape-stretch\"><img loading=\"lazy\" decoding=\"async\" class=\"stk-img wp-image-5426\" src=\"https:\/\/www.jg-media.eu\/wp-content\/uploads\/2025\/02\/headcss.jpg\" width=\"1258\" height=\"383\" srcset=\"https:\/\/www.jg-media.eu\/wp-content\/uploads\/2025\/02\/headcss.jpg 1258w, https:\/\/www.jg-media.eu\/wp-content\/uploads\/2025\/02\/headcss-300x91.jpg 300w, https:\/\/www.jg-media.eu\/wp-content\/uploads\/2025\/02\/headcss-1024x312.jpg 1024w, https:\/\/www.jg-media.eu\/wp-content\/uploads\/2025\/02\/headcss-768x234.jpg 768w\" sizes=\"auto, (max-width: 1258px) 100vw, 1258px\" \/><\/span><\/figure><\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-column stk-block-column stk-column stk-block stk-e5b4a9b\" data-v=\"4\" data-block-id=\"e5b4a9b\"><div class=\"stk-column-wrapper stk-block-column__content stk-container stk-e5b4a9b-container stk--no-background stk--no-padding\"><div class=\"stk-block-content stk-inner-blocks stk-e5b4a9b-inner-blocks\">\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-045df78\" data-block-id=\"045df78\"><style>.stk-045df78 {margin-bottom:5px !important;}.stk-045df78 .stk-block-text__text{font-size:14px !important;}@media screen and (max-width:999px){.stk-045df78 .stk-block-text__text{font-size:14px !important;}}<\/style><p class=\"stk-block-text__text\">P\u00e4ti\u010dka (pred uz\u00e1tv\u00e1raj\u00fac\u00edm tagom BODY)<\/p><\/div>\n\n\n\n<div class=\"wp-block-stackable-image stk-block-image stk-block stk-eeb1392 stk--has-lightbox\" data-block-id=\"eeb1392\"><figure><span class=\"stk-img-wrapper stk-image--shape-stretch\"><img loading=\"lazy\" decoding=\"async\" class=\"stk-img wp-image-5254\" src=\"https:\/\/www.jg-media.eu\/wp-content\/uploads\/2025\/02\/js.jpg\" width=\"1258\" height=\"383\" srcset=\"https:\/\/www.jg-media.eu\/wp-content\/uploads\/2025\/02\/js.jpg 1258w, https:\/\/www.jg-media.eu\/wp-content\/uploads\/2025\/02\/js-300x91.jpg 300w, https:\/\/www.jg-media.eu\/wp-content\/uploads\/2025\/02\/js-1024x312.jpg 1024w, https:\/\/www.jg-media.eu\/wp-content\/uploads\/2025\/02\/js-768x234.jpg 768w\" sizes=\"auto, (max-width: 1258px) 100vw, 1258px\" \/><\/span><\/figure><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-stackable-spacer stk-block-spacer stk--no-padding stk-block stk-cfdc765\" data-block-id=\"cfdc765\"><style>.stk-cfdc765 {height:50px !important;}<\/style><\/div>\n\n\n\n<div class=\"wp-block-stackable-heading stk-block-heading stk-block-heading--v2 stk-block stk-8069427\" id=\"pre-developerov-sledovanie-eventov-v-konzole\" data-block-id=\"8069427\"><h3 class=\"stk-block-heading__text\">Pre developerov - sledovanie eventov v konzole<\/h3><\/div>\n\n\n\n<div class=\"wp-block-stackable-text stk-block-text stk-block stk-24c7e8d\" data-block-id=\"24c7e8d\"><p class=\"stk-block-text__text\">Gal\u00e9ria vysiela vlastn\u00e9 DOM eventy, ktor\u00e9 m\u00f4\u017eete po\u010d\u00fava\u0165 vo svojom custom JS k\u00f3de. V\u010faka tomu m\u00f4\u017eete reagova\u0165 na dianie v gal\u00e9rii bez toho, aby ste menili jej k\u00f3d.<\/p><\/div>\n\n\n\n<pre class=\"wp-block-code\"><code>document.addEventListener('jgmProductVideoGallery:init', function() {\n    console.log('&#91;JGM] Gal\u00e9ria na\u010d\u00edtan\u00e1');\n});\n\ndocument.addEventListener('jgmProductVideoGallery:slideChange', function(e) {\n    console.log('&#91;JGM] Slide:', e.detail.index);\n});\n\ndocument.addEventListener('jgmProductVideoGallery:videoPlay', function() {\n    console.log('&#91;JGM] Video spusten\u00e9');\n});\n\ndocument.addEventListener('jgmProductVideoGallery:videoPause', function() {\n    console.log('&#91;JGM] Video pauznut\u00e9');\n});\n\ndocument.addEventListener('jgmProductVideoGallery:fancyboxOpen', function() {\n    console.log('&#91;JGM] Lightbox otvoren\u00fd');\n});\n\ndocument.addEventListener('jgmProductVideoGallery:fancyboxClose', function() {\n    console.log('&#91;JGM] Lightbox zatvoren\u00fd');\n});<\/code><\/pre>","protected":false},"excerpt":{"rendered":"<p>Omlouv\u00e1me se, tato polo\u017eka je k&nbsp;dispozici pouze v&nbsp;Sloven\u010dina. N\u00e1vod pre video gal\u00e9riu produktov pre Shoptet Na&nbsp;tejto str\u00e1nke n\u00e1jdete jednoduch\u00fd n\u00e1vod pre Shoptet doplnok Video gal\u00e9ria produktov, ktor\u00fd v\u00e1m poskytne z\u00e1kladn\u00e9 inform\u00e1cie nastaven\u00ed spolu s&nbsp;mo\u017enos\u0165ami nastavenia a&nbsp;prisp\u00f4sobenia doplnku. Ako nastavi\u0165 video do produktovej gal\u00e9rie: Priradenie vide\u00ed k&nbsp;produktu funguje pomocou popisn\u00fdch parametrov (nastaven\u00e9 parametre [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":4076,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-6931","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.jg-media.eu\/cs\/wp-json\/wp\/v2\/pages\/6931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jg-media.eu\/cs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jg-media.eu\/cs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jg-media.eu\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jg-media.eu\/cs\/wp-json\/wp\/v2\/comments?post=6931"}],"version-history":[{"count":19,"href":"https:\/\/www.jg-media.eu\/cs\/wp-json\/wp\/v2\/pages\/6931\/revisions"}],"predecessor-version":[{"id":7747,"href":"https:\/\/www.jg-media.eu\/cs\/wp-json\/wp\/v2\/pages\/6931\/revisions\/7747"}],"up":[{"embeddable":true,"href":"https:\/\/www.jg-media.eu\/cs\/wp-json\/wp\/v2\/pages\/4076"}],"wp:attachment":[{"href":"https:\/\/www.jg-media.eu\/cs\/wp-json\/wp\/v2\/media?parent=6931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}