[
  {
    "id": 2082,
    "title": "リッチメディア_P-7",
    "icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewbox=\"0 0 256 256\"><path d=\"M224,56V178.06l-39.72-39.72a8,8,0,0,0-11.31,0L147.31,164,97.66,114.34a8,8,0,0,0-11.32,0L32,168.69V56a8,8,0,0,1,8-8H216A8,8,0,0,1,224,56Z\" fill=\"#9aa8c9\"/><path d=\"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z\" fill=\"#1a1a2e\"/></svg>",
    "keywords": [
      "リッチメディア",
      "画像",
      "メディア・ビジュアル"
    ],
    "slug": "lazyblock/premium-media",
    "description": "高品質なメディアです。",
    "category": "Lazyblocks Pro",
    "category_label": "Lazyblocks Pro",
    "supports": {
      "customClassName": true,
      "anchor": false,
      "html": false,
      "multiple": true,
      "inserter": true,
      "reusable": true,
      "color": false,
      "layout": false,
      "shadow": false,
      "spacing": false,
      "dimensions": false,
      "typography": false,
      "lock": true,
      "align": [
        "wide",
        "full"
      ],
      "ghostkit": {
        "effects": false,
        "position": false,
        "spacings": false,
        "frame": false,
        "transform": false,
        "customCSS": false,
        "display": false,
        "attributes": false
      }
    },
    "controls": {
      "control_6bcac94375": {
        "type": "gallery",
        "name": "premium_gallery",
        "default": "",
        "label": "画像",
        "help": "複数枚アップロードするとスライダーになります。",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": "",
        "preview_size": "full"
      },
      "control_da387e4527": {
        "type": "text",
        "name": "citation_text",
        "default": "",
        "label": "引用元の名前",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      },
      "control_c328bb419d": {
        "type": "url",
        "name": "citation_url",
        "default": "",
        "label": "引用元のURL",
        "help": "",
        "child_of": "",
        "placement": "inspector",
        "group": "settings",
        "width": "100",
        "hide_if_not_selected": "false",
        "required": "false",
        "translate": "false",
        "save_in_meta": "false",
        "save_in_meta_name": "",
        "placeholder": "",
        "characters_limit": ""
      }
    },
    "code": {
      "output_method": "php",
      "editor_html": "",
      "editor_callback": "",
      "frontend_html": "<?php\r\n$attributes = $attributes ?? [];\r\n// Galleryコントロールから画像配列を取得\r\n$images     = !empty($attributes['premium_gallery']) && is_array($attributes['premium_gallery']) ? $attributes['premium_gallery'] : [];\r\n$img_count  = count($images);\r\n// 引用元の取得\r\n$cite_text  = isset($attributes['citation_text']) ? $attributes['citation_text'] : '';\r\n$cite_url   = isset($attributes['citation_url']) ? $attributes['citation_url'] : '';\r\n?>\r\n\r\n<div class=\"lzb-premium-media-wrap\">\r\n    <?php if ( $img_count > 0 ) : ?>\r\n        <div class=\"lzb-premium-media-frame <?php echo $img_count > 1 ? 'lzb-is-slider' : ''; ?>\">\r\n            \r\n            <div class=\"<?php echo $img_count > 1 ? 'lzb-slider-track' : 'lzb-single-track'; ?>\">\r\n                <?php foreach ( $images as $img ) : ?>\r\n                    <div class=\"lzb-slide\">\r\n                        <img src=\"<?php echo esc_url( $img['url'] ); ?>\" alt=\"<?php echo esc_attr( ! empty( $img['alt'] ) ? $img['alt'] : ( $cite_text ?: '' ) ); ?>\" loading=\"lazy\" decoding=\"async\" class=\"lzb-premium-image\" tabindex=\"0\" role=\"button\" aria-label=\"画像を拡大表示\">\r\n                    </div>\r\n                <?php endforeach; ?>\r\n            </div>\r\n\r\n            <?php if ( $img_count > 1 ) : ?>\r\n                <div class=\"lzb-slider-controls\">\r\n                    <button type=\"button\" class=\"lzb-slider-btn lzb-prev\" aria-label=\"前の画像\">\r\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"15 18 9 12 15 6\"></polyline></svg>\r\n                    </button>\r\n                    <div class=\"lzb-slider-counter\">\r\n                        <span class=\"lzb-current-num\">1</span> <span class=\"lzb-total-num\">/ <?php echo $img_count; ?></span>\r\n                    </div>\r\n                    <button type=\"button\" class=\"lzb-slider-btn lzb-next\" aria-label=\"次の画像\">\r\n                        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"9 18 15 12 9 6\"></polyline></svg>\r\n                    </button>\r\n                </div>\r\n            <?php endif; ?>\r\n\r\n            <?php if ( $cite_text ) : ?>\r\n                <div class=\"lzb-premium-citation\">\r\n                    出典: \r\n                    <?php if ( $cite_url ) : ?>\r\n                        <a href=\"<?php echo esc_url( $cite_url ); ?>\" target=\"_blank\" rel=\"noopener noreferrer\"><?php echo esc_html( $cite_text ); ?></a>\r\n                    <?php else : ?>\r\n                        <?php echo esc_html( $cite_text ); ?>\r\n                    <?php endif; ?>\r\n                </div>\r\n            <?php endif; ?>\r\n\r\n        </div>\r\n    <?php else : ?>\r\n        <div class=\"lzb-media-placeholder\">\r\n            <div class=\"lzb-media-placeholder-icon\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"></rect><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"></circle><polyline points=\"21 15 16 10 5 21\"></polyline></svg>\r\n            </div>\r\n            <p><strong>プレミアム画像ブロック</strong><br>右パネルから画像を追加してください（複数選択でスライダーになります）</p>\r\n        </div>\r\n    <?php endif; ?>\r\n</div>",
      "frontend_callback": "",
      "show_preview": "always",
      "single_output": true
    },
    "style": {
      "block": "@charset \"UTF-8\";\r\n\r\n.lzb-premium-media-wrap {\r\n  margin: 3rem 0;\r\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n  overflow: hidden;\r\n}\r\n\r\n.lzb-premium-media-frame {\r\n  margin: 0 auto;\r\n  padding: 1.25rem;\r\n  background-color: #f1f5f9;\r\n  border: 1px solid #e2e8f0;\r\n  border-radius: 20px;\r\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: fit-content; \r\n  max-width: 100%;\r\n  box-sizing: border-box;\r\n  opacity: 0;\r\n  transform: translateY(40px);\r\n  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);\r\n}\r\n\r\n.lzb-premium-media-frame.is-visible {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n.lzb-premium-media-frame .lzb-single-track { display: block; }\r\n.lzb-premium-media-frame .lzb-slider-track {\r\n  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;\r\n  scrollbar-width: none; -ms-overflow-style: none; gap: 1.25rem;\r\n}\r\n.lzb-premium-media-frame .lzb-slider-track::-webkit-scrollbar { display: none; }\r\n\r\n.lzb-premium-media-frame .lzb-slide {\r\n  flex: 0 0 100%; scroll-snap-align: center; display: flex; justify-content: center;\r\n}\r\n.lzb-premium-image {\r\n  display: block; max-width: 100%; height: auto; max-height: 520px; object-fit: contain;\r\n  border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n  border: 1px solid rgba(255, 255, 255, 0.8); transition: transform 0.4s ease;\r\n}\r\n\r\n.lzb-premium-media-frame.is-visible:not(.lzb-is-slider) .lzb-premium-image:hover { transform: scale(1.02); }\r\n\r\n.lzb-premium-media-frame .lzb-slider-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.25rem; }\r\n.lzb-premium-media-frame .lzb-slider-btn {\r\n  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;\r\n  background-color: #ffffff; border: 1px solid #cbd5e1; color: #475569; cursor: pointer;\r\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: all 0.2s ease;\r\n}\r\n.lzb-premium-media-frame .lzb-slider-btn:hover { background-color: #3b82f6; border-color: #3b82f6; color: #ffffff; transform: scale(1.05); }\r\n.lzb-premium-media-frame .lzb-slider-counter { font-size: 0.95rem; font-weight: 700; color: #64748b; letter-spacing: 0.05em; background: #e2e8f0; padding: 6px 16px; border-radius: 20px; }\r\n.lzb-premium-media-frame .lzb-current-num { color: #0f172a; font-size: 1.05rem; }\r\n\r\n@media (max-width: 600px) {\r\n  .lzb-premium-media-wrap { margin: 2rem 0; }\r\n  .lzb-premium-media-frame { width: 100%; padding: 0.75rem; border-radius: 14px; }\r\n  .lzb-premium-image { max-height: 380px; }\r\n}\r\n\r\n/* 引用元のスタイル */\r\n.lzb-premium-citation {\r\n  margin-top: 1rem;\r\n  width: 100%;\r\n  text-align: right;\r\n  font-size: 0.85rem;\r\n  color: #64748b;\r\n}\r\n\r\n.lzb-premium-citation a {\r\n  color: #3b82f6;\r\n  text-decoration: none;\r\n  transition: color 0.2s ease, text-decoration 0.2s ease;\r\n}\r\n\r\n.lzb-premium-citation a:hover {\r\n  color: #2563eb;\r\n  text-decoration: underline;\r\n  text-underline-offset: 3px;\r\n}\r\n\r\n/* ライトボックス（画像タップで拡大表示） */\r\n.lzb-premium-image { cursor: zoom-in; }\r\n.lzb-lightbox-overlay {\r\n  position: fixed; inset: 0; z-index: 100000; background: rgba(15, 23, 42, 0.92);\r\n  display: flex; align-items: center; justify-content: center; padding: 24px;\r\n  opacity: 0; visibility: hidden; transition: opacity 0.25s ease;\r\n}\r\n.lzb-lightbox-overlay.is-open { opacity: 1; visibility: visible; }\r\n.lzb-lightbox-overlay img { max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }\r\n.lzb-lightbox-close {\r\n  position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%;\r\n  background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 24px; cursor: pointer;\r\n  display: flex; align-items: center; justify-content: center; transition: background 0.2s ease;\r\n}\r\n.lzb-lightbox-close:hover { background: rgba(255,255,255,0.25); }\r\n@media (max-width: 480px) { .lzb-lightbox-close { top: 10px; right: 10px; width: 38px; height: 38px; } }",
      "editor": "@charset \"UTF-8\";\r\n\r\n.lzb-premium-media-wrap {\r\n  margin: 1.5rem 0;\r\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n}\r\n\r\n.lzb-premium-media-frame {\r\n  margin: 0 auto;\r\n  padding: 1.25rem;\r\n  background-color: #f1f5f9;\r\n  border: 1px solid #e2e8f0;\r\n  border-radius: 20px;\r\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  width: fit-content; \r\n  max-width: 100%;\r\n  box-sizing: border-box;\r\n  opacity: 1 !important;\r\n  transform: none !important;\r\n}\r\n\r\n.lzb-premium-media-frame .lzb-single-track { display: block; }\r\n.lzb-premium-media-frame .lzb-slider-track {\r\n  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;\r\n  scrollbar-width: none; gap: 1.25rem;\r\n}\r\n.lzb-premium-media-frame .lzb-slider-track::-webkit-scrollbar { display: none; }\r\n\r\n.lzb-premium-media-frame .lzb-slide {\r\n  flex: 0 0 100%; scroll-snap-align: center; display: flex; justify-content: center;\r\n}\r\n\r\n.lzb-premium-image {\r\n  display: block; max-width: 100%; height: auto; max-height: 520px; object-fit: contain;\r\n  border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n  border: 1px solid rgba(255, 255, 255, 0.8);\r\n  pointer-events: none;\r\n}\r\n\r\n.lzb-premium-media-frame .lzb-slider-controls { \r\n  display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.25rem; \r\n  pointer-events: none; opacity: 0.8;\r\n}\r\n\r\n.lzb-premium-media-frame .lzb-slider-btn {\r\n  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;\r\n  background-color: #ffffff; border: 1px solid #cbd5e1; color: #475569;\r\n}\r\n.lzb-premium-media-frame .lzb-slider-counter { font-size: 0.95rem; font-weight: 700; color: #64748b; letter-spacing: 0.05em; background: #e2e8f0; padding: 6px 16px; border-radius: 20px; }\r\n.lzb-premium-media-frame .lzb-current-num { color: #0f172a; font-size: 1.05rem; }\r\n\r\n.lzb-media-placeholder {\r\n  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem;\r\n  background-color: #f8fafc; border: 2px dashed #cbd5e1; border-radius: 12px; text-align: center; color: #64748b;\r\n}\r\n.lzb-media-placeholder-icon { margin-bottom: 1rem; color: #94a3b8; }\r\n\r\n/* 引用元のスタイル */\r\n.lzb-premium-citation {\r\n  margin-top: 1rem;\r\n  width: 100%;\r\n  text-align: right;\r\n  font-size: 0.85rem;\r\n  color: #64748b;\r\n}\r\n\r\n.lzb-premium-citation a {\r\n  color: #3b82f6;\r\n  text-decoration: none;\r\n  transition: color 0.2s ease, text-decoration 0.2s ease;\r\n}\r\n\r\n.lzb-premium-citation a:hover {\r\n  color: #2563eb;\r\n  text-decoration: underline;\r\n  text-underline-offset: 3px;\r\n}"
    },
    "script": {
      "view": "document.addEventListener(\"DOMContentLoaded\", function() {\r\n    \r\n    // 1. スクロールによるフェードイン\r\n    const mediaFrames = document.querySelectorAll('.lzb-premium-media-wrap .lzb-premium-media-frame');\r\n    \r\n    if (mediaFrames.length > 0) {\r\n        const observerOptions = {\r\n            rootMargin: \"0px 0px -10% 0px\", \r\n            threshold: 0.1\r\n        };\r\n\r\n        const revealObserver = new IntersectionObserver((entries, observer) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('is-visible');\r\n                    observer.unobserve(entry.target);\r\n                }\r\n            });\r\n        }, observerOptions);\r\n\r\n        mediaFrames.forEach(frame => {\r\n            revealObserver.observe(frame);\r\n        });\r\n    }\r\n\r\n    // 2. ネイティブスライダー処理\r\n    const mediaSliders = document.querySelectorAll('.lzb-premium-media-wrap .lzb-premium-media-frame.lzb-is-slider');\r\n    \r\n    mediaSliders.forEach(slider => {\r\n        const track = slider.querySelector('.lzb-slider-track');\r\n        const btnPrev = slider.querySelector('.lzb-prev');\r\n        const btnNext = slider.querySelector('.lzb-next');\r\n        const currentNum = slider.querySelector('.lzb-current-num');\r\n        \r\n        if (!track) return;\r\n\r\n        const updateCounter = () => {\r\n            const index = Math.round(track.scrollLeft / track.clientWidth);\r\n            if (currentNum) currentNum.textContent = index + 1;\r\n        };\r\n\r\n        track.addEventListener('scroll', () => { updateCounter(); });\r\n\r\n        if (btnPrev) {\r\n            btnPrev.addEventListener('click', () => {\r\n                track.scrollBy({ left: -track.clientWidth, behavior: 'smooth' });\r\n            });\r\n        }\r\n        \r\n        if (btnNext) {\r\n            btnNext.addEventListener('click', () => {\r\n                track.scrollBy({ left: track.clientWidth, behavior: 'smooth' });\r\n            });\r\n        }\r\n    });\r\n\r\n\r\n    // 3. ライトボックス（画像を拡大表示）\r\n    var lightbox = document.querySelector('.lzb-lightbox-overlay');\r\n    if (!lightbox) {\r\n        lightbox = document.createElement('div');\r\n        lightbox.className = 'lzb-lightbox-overlay';\r\n        lightbox.innerHTML = '<button type=\"button\" class=\"lzb-lightbox-close\" aria-label=\"閉じる\">&times;</button><img src=\"\" alt=\"\">';\r\n        document.body.appendChild(lightbox);\r\n\r\n        var lightboxImg = lightbox.querySelector('img');\r\n        var closeLightbox = function () {\r\n            lightbox.classList.remove('is-open');\r\n            lightboxImg.src = '';\r\n        };\r\n        lightbox.querySelector('.lzb-lightbox-close').addEventListener('click', closeLightbox);\r\n        lightbox.addEventListener('click', function (e) {\r\n            if (e.target === lightbox) closeLightbox();\r\n        });\r\n        document.addEventListener('keydown', function (e) {\r\n            if (e.key === 'Escape') closeLightbox();\r\n        });\r\n    }\r\n\r\n    document.querySelectorAll('.lzb-premium-media-wrap .lzb-premium-image').forEach(function (img) {\r\n        if (img.dataset.lightboxBound) return;\r\n        img.dataset.lightboxBound = 'true';\r\n        var open = function () {\r\n            var overlayImg = document.querySelector('.lzb-lightbox-overlay img');\r\n            overlayImg.src = img.src;\r\n            overlayImg.alt = img.alt;\r\n            document.querySelector('.lzb-lightbox-overlay').classList.add('is-open');\r\n        };\r\n        img.addEventListener('click', open);\r\n        img.addEventListener('keydown', function (e) {\r\n            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); }\r\n        });\r\n    });\r\n});"
    },
    "styles": [],
    "condition": [],
    "edit_url": null,
    "provide_context_to_blocks": "",
    "custom_context_slug": "",
    "allowed_blocks": "",
    "ancestor": ""
  }
]