qs_article-1.0.2/templates/lead-carousel-modal.html.twig

{#
/**
 * @file
 * Theme implementation to display study guide block.
 *
 * Available variables:
 * - carousel_data: Carousel Data .
 *
 * @see template_preprocess_block()
 *
 * @ingroup themeable
 */
#}

{% set counter_vid = 0 %}
{% set counter_img = 0 %}
{% set vkey = [] %}
<div class=" media_modal modal fade _youtube_video_player" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
	  <div class="modal-content">
	    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fal fa-times"></i>
	    </button>
	    <h2 class="_title_gallery" style="height:30px;">

		</h2>
        <div class="areabody">
          <div id="mgallery">
            <div class='slider'>
              {% for key,item in carousel_data %}
                {% if item.type == 'video' %}
                <!-- <h2>{{ item.video_title }}</h2> -->
	            	{% set counter_vid = counter_vid + 1 %}
	                {% set vkey = vkey|merge([key]) %}
	                <div class="item vid" data-video-id="{{ item.video_id }}" data-h2title="{{ item.video_title }}">
	                	<!-- <div id="player_{{key}}"></div> -->
	                  <iframe frameborder="0" name="X-Frame-Options" value="SAMEORIGIN" id="player_{{key}}" width="498" height="510" src="https://www.youtube.com/embed/{{ item.video_id }}?enablejsapi=1&html5=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	                  <!-- <span class="expand"></span> -->
	                </div>
                {% else %}
                	{% set counter_img = counter_img + 1 %}
                    <div class="item" data-video-id="" data-h2title="{{ item.image_title }}"><img alt="{{ item.image_alt }}" src="{{ item.image_path }}"/>
                    	<!-- <span class="expand"></span> -->
                 </div>
                {% endif %}
              {% endfor %}
            </div>
            {# thumbnils #}
            <div class='slider-nav'>
              {% set totalSlides = 1 %}
              {% for key,item in carousel_data %}
	              {% if item.type == 'video' %}
	              <div class="item vid" data-video-id="{{ item.video_id }}" data-slide="{{ totalSlides }}"><img src="https://img.youtube.com/vi/{{ item.video_id }}/hqdefault.jpg" /></div>
	                {% set totalSlides = totalSlides +1 %}
	              {% else %}
	                <div class="item" data-slide="{{ totalSlides }}"><img alt="{{ item.image_alt }}" src="{{ item.image_path }}"/></div>
	                {% set totalSlides = totalSlides +1 %}
	              {% endif %}
              {% endfor %}
            </div>
          </div>
		</div>
  	</div>
  </div>
</div>

{% for key,item in carousel_data %}
<div class="carousel-data">
  {% if item.type == 'image'  %}
    <div class="_article_default_slide" onclick="open_gallery( this, '', {{key}}, 'image'  )" style="background-image: url({{ item.image_path }})">

    </div>
    <div class="_article_default_slide_text image_title">{{ item.image_title }}</div>
  {% else %}
    <div class="_article_default_slide" style="background-image: url('http://img.youtube.com/vi/{{ item.video_id }}/hqdefault.jpg');" onclick="open_gallery( this, '{{ item.video_id }}', {{key}}, 'video'  )">
    		<button class="video_poster" onclick="open_gallery( this, '{{ item.video_id }}', {{key}}, 'video'  )"><i class="fal fa-play-circle"></i></button>

    </div>
    <div class="_article_default_slide_text image_title">{{ item.video_title }}</div>
  {% endif %}
  </div>
 {% endfor %}