templates/webcam.html.twig line 1

1. {% extends 'frontend.html.twig' %}
2. {% block article %}
3.     <div class="grid-x grid-padding-x">
4.         <div class="large-12 medium-12 cell">
5.             <div class="callout">
6.                 <div class="grid-x grid-padding-x toptitle">
7.                     <div class="large-12 cell">
8.                         <h1 class="main-heading">Webcams</h1>
9.                     </div>
10.                 </div>
11.                 {% if enGeneral[0].getWebcam360CapBoscVisible()  %}
12.                     <!-- afegit per Oriol -->
13.                 <div class="grid-x grid-padding-x">
14.                     <div class="large-12 medium-12 cell text-center">
15.                         <h3 class="main-heading">LiveCam 360&deg;</h3>
16.                         <h5 class="main-heading">{{"Jumbo Tosa" | trans }}</h5>
17.                     </div>
18.                     <div class="large-12 medium-12 text-center no-movil" style="overflow: hidden!important;">
19.                         <div id="roundshot-thumbnail-54e8157b35bf33b39791639580461ee7" class="cam360" style="border: 1px solid rgba(10, 10, 10, 0.25);"></div><script src="https://backend.roundshot.com/js/roundshot_animated_thumbnail.js" type="text/javascript"></script><script type="text/javascript"> roundshot.animate({id: "54e8157b35bf33b39791639580461ee7", picture: "https://backend.roundshot.com/cams/54e8157b35bf33b39791639580461ee7/thumbnail", link: "https://masella.roundshot.com/", angle: 360, width: 1174, height: 260, bounce: false, open_in_new_tab: true, speed: 20});</script>
20.                     </div>
21.                     <div class="large-12 medium-12 cell si-movil" style="overflow: hidden!important;">
22.                         <!--vertical-->  <div id="roundshot-thumbnail-54e8157b35bf33b39791639580461ee72" class="cam360 si-movil" style="border: 1px solid rgba(10, 10, 10, 0.25); overflow:hidden;"></div><script src="https://backend.roundshot.com/js/roundshot_animated_thumbnail.js" type="text/javascript"></script><script type="text/javascript"> roundshot.animate({id: "54e8157b35bf33b39791639580461ee72", picture: "https://backend.roundshot.com/cams/54e8157b35bf33b39791639580461ee7/thumbnail", link: "https://masella.roundshot.com/", angle: 360, width: 600, height: 220, bounce: false, open_in_new_tab: true, speed: 20});</script>
23.                     </div>
24.                     <p style="text-align: center; margin-bottom: 2rem;">{{"Clicar la imatge" | trans }}</p>
25.                 </div>
26.                 <!-- fi per Oriol -->
27.                 {% endif %}
28.                 <div class="grid-x grid-padding-x">
29.                 {% for webcam in enWebcams %}
30.                     <div class="large-6 medium-6 cell">
31.                         <div class="callout webcam" style="background-image:url(https://www.masella.com/cam1/mini/{{webcam.getUrl()}}?int={{ random() }})">
32.                             <a id="a{{webcam.getId()}}" class="aClick" data-open="modalWebcam" href="#" title="{{webcam.getNom()}}"><img id="img{{webcam.getId()}}" src="{{asset('/frontoffice/images/box-webcam.png')}}">
33.                                 <div class="large-12 medium-12 small-12 cell">
34.                                     <h6><i class="fas fa-video"></i> {{webcam.getNom()}}</h6>
35.                                 </div>
36.                             </a>
37.                         </div>
38.                     </div>
39.                 {% endfor %}
40.                 </div>
41.             </div>
42.             <div id="modalWebcam" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
43.                 <div class="large-12 cell">
44.                     <div class="imagecams">
45.                         <div id="mi-slider" class="mi-slider" style="position:relative;">
46.                             {% for webcam in enWebcams %}
47.                                 <ul>
48.                                     <!--<li><img src="https://www.masella.com/cam1/mini/{{webcam.getUrl()}}?int={{ random() }}"><h4>{{webcam.getNom()}}</h4></li>-->
49.                                     <li><img src="/webcam/view/{{webcam.getId()}}?int={{ random() }}"><h4>{{webcam.getNom()}}</h4></li>
50.                                 </ul>
51.                             {% endfor %}
52.                             <img src="{{asset('/frontoffice/images/bg-slider.png')}}" class="bg-slider" />
54.                             <nav>
56.                                 {% for webcam in enWebcams %}
57.                                     <a id="a{{webcam.getId()}}Aux" href="#">{{webcam.getNom()}}</a>
58.                                 {% endfor %}
59.                             </nav>
60.                         </div>
61.                     </div>
62.                 </div>
63.                 <a class="close-button"  data-close aria-label="Close reveal"><span aria-hidden="true">&times;</span></a>
64.             </div>
65.             <div id="my-popup" class="mfp-hide white-popup">
66.                 Inline popup
67.             </div>
68.         </div>
69.     </div>
70. </div>
71. {% endblock %}
72. {% block javascripts %}
73.     <style>
74.         .callout.trans{text-align:center; }
75.         img.foto{ max-height:160px; display:inline-block; margin:0 auto;}
76.     </style>
77.     {{parent()}}
78.     <script src="{{asset('/frontoffice/js/jquery.mixitup.js')}}"></script>
79.     <script src="{{asset('/frontoffice/js/smooth-scroll.js')}}" ></script>
80.     <script src="{{asset('/frontoffice/js/owl.carousel.js')}}" ></script>
81.     <!--POP UP-->
82.     <script>
83.         $(function () {
84.             $('#mi-slider').catslider();
85.             $('.aClick').on('click', function () {
86.                 name = $(this).attr('id');
87.                 //alert (name);
88.                 $(".mi-slider img").each(function (index) {
89.                     scr = $(this).attr('src');
90.                     //alert (scr);
91.                     //scr.replace('cam1/mini/', 'cam1/');
92.                     $(this).attr('src', scr.replace('cam1/mini/', 'cam1/'));
93.                     //alert (name + 'Aux');
94.                     $('#' + name + 'Aux').trigger('click');
95.                 });
96.             });
97.         });
98.     </script>
99. {% endblock%}