templates/ProfilePreview/components/media.js.twig line 1

Open in your IDE?
  2. <script type="module">
  3.     import PhotoSwipeLightbox from 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe-lightbox.esm.min.js';
  5.     async function initLightbox() {
  6.         const imageData = [
  7.             {%- set photo = profile|avatar -%}
  8.             {%- if photo and photo.path -%}
  9.                 {
  10.                     src: '{{ responsive_asset(photo.path, 'profile_media', "fullsize", "jpg") }}',
  11.                     alt: 'Avatar'
  12.                 },
  13.             {%- endif -%}
  15.             {%- if profile.photos is defined and profile.photos|length > 0 -%}
  16.                 {%- for photo in profile.photos -%}
  17.                     {%- if photo.path -%}
  18.                         {
  19.                             src: '{{ responsive_asset(photo.path, "profile_media", "fullsize", "jpg") }}',
  20.                             alt: 'Фото профиля {{loop.index}}'
  21.                         },
  22.                     {%- endif -%}
  23.                 {%- endfor -%}
  24.             {%- endif -%}
  26.             {%- if profile.selfies is defined -%}
  27.                 {%- for photo in profile.selfies -%}
  28.                     {%- if photo.path -%}
  29.                         {
  30.                             src: '{{ responsive_asset(photo.path, "profile_media", "fullsize", "jpg") }}',
  31.                             alt: 'Селфи профиля {{ loop.index }}'
  32.                         }{% if not loop.last %},{% endif %}
  33.                     {%- endif -%}
  34.                 {%- endfor -%}
  35.             {%- endif -%}
  36.         ];
  38.         const dataSource = [];
  39.         for (const item of imageData) {
  40.             const img = new Image();
  41.             img.src = item.src;
  42.             await new Promise(resolve => {
  43.                 img.onload = resolve;
  44.                 img.onerror = resolve;
  45.             });
  46.             dataSource.push({
  47.                 src: item.src,
  48.                 width: img.naturalWidth || 1,
  49.                 height: img.naturalHeight || 1,
  50.                 alt: item.alt
  51.             });
  52.         }
  54.         const lightbox = new PhotoSwipeLightbox({
  55.             dataSource,
  56.             showHideAnimationType: 'none',
  57.             pswpModule: () => import('https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.esm.min.js'),
  58.             preload: [1, 2],
  59.         });
  61.         lightbox.init();
  63.         document.querySelectorAll('a[data-gallery]').forEach(el => {
  64.             el.addEventListener('click', e => {
  65.                 e.preventDefault();
  66.                 const id = +e.currentTarget.getAttribute('data-index');
  67.                 lightbox.loadAndOpen(id); // defines start slide index
  68.             });
  69.         });
  70.     }
  72.     initLightbox();
  73. </script>
  74. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.min.css" integrity="sha512-LFWtdAXHQuwUGH9cImO9blA3a3GfQNkpF2uRlhaOpSbDevNyK1rmAjs13mtpjvWyi+flP7zYWboqY+8Mkd42xA==" crossorigin="anonymous" referrerpolicy="no-referrer" />