custom/static-plugins/NdTheme/src/Resources/views/storefront/component/product/image-gallery/zoom-modal.html.twig line 1

Open in your IDE?
  1. {% block element_image_gallery_inner_zoom_modal %}
  2.     <div class="modal is-fullscreen zoom-modal js-zoom-modal{% if imageCount is same as(1) %} no-thumbnails{% endif %}"
  3.          data-image-zoom-modal="true"
  4.          tabindex="-1"
  5.          role="dialog">
  6.         {% block element_image_gallery_inner_zoom_modal_dialog %}
  7.             <div class="modal-dialog"
  8.                  role="document">
  9.                 {% block element_image_gallery_inner_zoom_modal_content %}
  10.                     <div class="modal-content"{% if imageCount > 1 %} data-modal-gallery-slider="true"{% endif %}>
  11.                         {% block element_image_gallery_inner_zoom_modal_close_button %}
  12.                             <button type="button"
  13.                                     class="{{ modalCloseBtnClass }} close"
  14.                             {{ dataBsDismissAttr }}="modal"
  15.                             aria-label="Close">
  16.                             {% block element_image_gallery_inner_zoom_modal_close_icon %}
  17.                                 <span aria-hidden="true">
  18.                                     {% sw_icon 'x' style { 'pack': 'hero', 'class': 'block w-6 h-6' } %}
  19.                                 </span>
  20.                             {% endblock %}
  21.                             </button>
  22.                         {% endblock %}
  24.                         {% block element_image_gallery_inner_zoom_modal_body %}
  25.                             <div class="modal-body pt-4">
  26.                                 {% block element_image_gallery_inner_zoom_modal_slider %}
  27.                                     {% set gallerySliderOptions = {
  28.                                         "arrows": true,
  29.                                         "infinite": false,
  30.                                         "dots": false,
  31.                                         "asNavFor": ".gallery-slider-thumbnails-zoom-modal",
  32.                                         "prevArrow": "#prev-slide-123456789",
  33.                                         "nextArrow": "#next-slide-123456789",
  34.                                         "slidesToShow": 1
  35.                                     } %}
  36.                                     <div class="gallery-slider-zoom-modal slick-init slick-init-ajax"
  37.                                          data-slick='{{ gallerySliderOptions|json_encode }}'>
  38.                                         {% block element_image_gallery_inner_zoom_modal_slider_items %}
  39.                                             {% for image in mediaItems %}
  40.                                                 {% block element_image_gallery_inner_zoom_modal_slider_item %}
  41.                                                     <div>
  42.                                                         <div class="flex items-center h-[90vh]">
  43.                                                             {% block element_image_gallery_inner_zoom_modal_slider_item_zoom_container %}
  44.                                                             <div class="image-zoom-container ratio ratio_product_image max-w-[90vh] m-auto w-full">
  45.                                                                 {% block element_image_gallery_inner_zoom_modal_slider_item_image %}
  46.                                                                     {% sw_thumbnails 'gallery-slider-image-thumbnails' with {
  47.                                                                         media: image,
  48.                                                                         attributes: {
  49.                                                                             'class': 'gallery-slider-image js-image-zoom-element js-load-img',
  50.                                                                             'alt': (image.translated.alt ?: fallbackImageTitle),
  51.                                                                             'title': (image.translated.title ?: fallbackImageTitle)
  52.                                                                         },
  53.                                                                         load: false,
  54.                                                                         loadOriginalImage: true,
  55.                                                                         autoColumnSizes: false
  56.                                                                     } %}
  57.                                                                 {% endblock %}
  58.                                                             </div>
  59.                                                         </div>
  60.                                                         {% endblock %}
  61.                                                     </div>
  62.                                                 {% endblock %}
  63.                                             {% endfor %}
  64.                                         {% endblock %}
  65.                                     </div>
  66.                                 {% endblock %}
  67.                             </div>
  68.                         {% endblock %}
  70.                         {% if imageCount > 1 %}
  71.                             {% block element_image_gallery_inner_zoom_modal_footer %}
  72.                                 <div class="footer w-full max-w-sm mx-auto px-8 relative">
  73.                                     {% block element_image_gallery_inner_zoom_modal_thumbnails_controls %}
  74.                                         <div class="gallery-slider-modal-controls">
  75.                                             <div class="gallery-slider-modal-thumbnails">
  76.                                                 <button id="prev-thumbnail-123456789"
  77.                                                         class=" absolute top-1/2 -translate-y-1/2 left-1"
  78.                                                         aria-label="{{ 'general.previous'|trans|striptags }}">
  79.                                                     {% sw_icon 'arrow-left' style{'pack': 'hero', 'class': 'block w-6 h-6'} %}
  80.                                                 </button>
  81.                                                 <button id="next-thumbnail-123456789"
  82.                                                         class=" absolute top-1/2 -translate-y-1/2 right-1"
  83.                                                         aria-label="{{ 'general.next'|trans|striptags }}">
  84.                                                     {% sw_icon 'arrow-right' style{'pack': 'hero', 'class': 'block w-6 h-6'} %}
  85.                                                 </button>
  86.                                             </div>
  87.                                         </div>
  88.                                     {% endblock %}
  90.                                     {% block element_image_gallery_inner_zoom_modal_thumbnails %}
  91.                                         {% set gallerySliderThumbnailOptions = {
  92.                                             "asNavFor": ".gallery-slider-zoom-modal",
  93.                                             "slidesToShow": 4,
  94.                                             "infinite": false,
  95.                                             "prevArrow": "#prev-thumbnail-123456789",
  96.                                             "nextArrow": "#next-thumbnail-123456789",
  97.                                             "variableWidth": true,
  98.                                             "focusOnSelect": true
  99.                                         } %}
  100.                                         <div class="gallery-slider-thumbnails-zoom-modal slick-init slick-init-ajax slick-space-2 px-2"
  101.                                              data-slick='{{ gallerySliderThumbnailOptions|json_encode }}'>
  102.                                             {% block element_image_gallery_inner_zoom_modal_thumbnails_items %}
  103.                                                 {% for image in mediaItems %}
  104.                                                     {% block element_image_gallery_inner_zoom_modal_thumbnails_item_inner %}
  105.                                                         <div>
  106.                                                             <div class="gallery-slider-thumbnails-item-inner ratio ratio_product_image !w-12">
  107.                                                                 {% sw_thumbnails 'gallery-slider-thumbnails-image-thumbnails' with {
  108.                                                                     media: image,
  109.                                                                     sizes: {
  110.                                                                         'default': '200px'
  111.                                                                     },
  112.                                                                     attributes: {
  113.                                                                         'class': 'gallery-slider-thumbnails-image js-load-img',
  114.                                                                         'alt': (image.translated.alt ?: fallbackImageTitle),
  115.                                                                         'title': (image.translated.title ?: fallbackImageTitle)
  116.                                                                     },
  117.                                                                     load: false
  118.                                                                 } %}
  119.                                                             </div>
  120.                                                         </div>
  121.                                                     {% endblock %}
  122.                                                 {% endfor %}
  123.                                             {% endblock %}
  124.                                         </div>
  125.                                     {% endblock %}
  126.                                 </div>
  127.                             {% endblock %}
  128.                         {% endif %}
  129.                     </div>
  130.                 {% endblock %}
  131.             </div>
  132.         {% endblock %}
  133.     </div>
  134. {% endblock %}