templates/elements/curtain-ad.html.twig line 1

Open in your IDE?
  1. {% if ad %}
  2. <div class="col-sm-12 col-md-8">
  3.     <div class="curtaincontainer">
  4.         <img class="teaseradc" src="{{ad.getSecondaryMediaURL()}}" scale="0" data-mitem-id="{{ad.getId()}}" loading='lazy' alt="Curtain Ad">
  5.         <div class="curtainad">
  6.             <a href="{{ad.getExternalUrl()}}" data-mitem-id="{{ad.getId()}}" aria-label="Curtain Ad">
  7.                 <img class="fulladc" style="background-color:white; max-height:360px; max-width:360px" src="{{ad.getMediaURL()}}" data-src="gaplg=7693&amp;t=bdc8e619bb9207fba2e1434a6aa79f81" scale="0" loading='lazy' alt="Curtain Ad">
  8.             </a>
  9.         </div>
  10.     </div>
  11. </div>
  12. <whitespace style="height: 0px; transition: all 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0s;" >
  13. </whitespace>
  15. <script>
  16.     $('.teaseradc').on('click, mouseover', ()=>{
  17.         if($('.curtainad').css('max-height') == '550px'){
  18.             $('.curtainad').css('max-height', '0')
  19.             $('whitespace').css('height', '0')
  20.         }else{
  21.             $('.curtainad').css('max-height', '550px')
  22.             $('whitespace').css('height', '50px')
  23.             $('.curtainad').addClass('dropShadowOnAd')
  24.         }
  25.     })
  26.     $('.curtaincontainer').mouseleave(()=>{
  27.         $('.curtainad').css('max-height', '0')
  28.         $('whitespace').css('height', '0')
  29.             $('.curtainad').removeClass('dropShadowOnAd')
  30.     })
  31. </script>
  32. {% endif %}