templates/main/album.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig'%}
  3. {% block stylesheets %}
  4. {{ parent() }}
  6. <link rel="stylesheet" href="{{ asset('node_modules/galleria/dist/themes/classic/galleria.classic.css')}}">
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.5.1/dist/leaflet.css">
  8. <link rel="preconnect" href="https://fonts.gstatic.com">
  9. <link type="stylesheet" href="{{ asset('node_modules/leaflet/dist/leaflet.css')}}"></link>
  10. <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
  11. <link rel="stylesheet" href="{{ asset('css/album.css') }}">
  13. {% endblock %}
  15. {% block title %}Album {{title}}{% endblock %}
  17. {% block body%}
  18. <div class="content-w content-w-map">
  19. <div class="header-menu" data-menu="navmenuAlbum"></div>
  20. <div class="content-back"><a href="{{ path('main_sub', {sub: backnav}) }}"><span class="content-back-inner">{{backmenutitle}}</span></a></div>
  21. <div class="content">
  22. <div class="chapters" id="chapters">
  23. <div class="toggler"><span></span></div>
  24. <ul class="chapters-list">
  25. </ul>
  26. </div>
  27. <div class="galleria-w">
  28. <div class="galleria" data-asset-url="{{asset('albums')}}" data-asset-images="{{asset('images')}}">
  29. </div>
  30. <div id="map" class="map"></div>
  31. </div>
  32. </div>
  33. </div>
  34. {% endblock %}
  36. {% block javascripts %}
  37. {{ parent() }}
  38. <script type="text/javascript" src="{{ asset('node_modules/galleria/dist/galleria.js')}}"></script>
  39. <script type="text/javascript" src="{{ asset('node_modules/galleria/dist/themes/classic/galleria.classic.js')}}"></script>
  40. <script type="text/javascript" src="{{ asset('node_modules/leaflet/dist/leaflet.js')}}"></script>
  42. <script type="text/javascript" src="{{ asset('js/album.js')}}"></script>
  43. {# <script type="text/javascript" src='{{ asset('node_modules/mapbox/lib/mapbox.js') }}'></script>#}
  45. <script type="text/javascript" src="{{asset('js/xml2json.js')}}"></script>
  46. <script type="text/javascript">
  47. $(document).ready(function() {
  49. navigateToActiveId("navmenuAlbum");
  51. $(document.body).addClass('inner-page');
  53. loadChapters("{{album}}");
  54. if (Galleria) {
  56. Galleria.loadTheme("{{ asset('node_modules/galleria/dist/themes/classic/galleria.classic.min.js')}}");
  57. Galleria.configure({
  58. imageCrop: false,
  59. showCounter: true,
  60. fullscreenDoubleTap: true,
  61. thumbnails: true,
  62. });
  63. // Galleria.run('.galleria');
  65. Galleria.ready(function() {
  66. console.log("galery ready strat");
  67. var gallery = this;
  68. this.addElement('fscr');
  69. this.appendChild('stage','fscr');
  70. this.$('fscr')
  71. .click(function() {
  72. var toggled = $(".galleria-container").hasClass("fullscreen");
  73. var images = $(".galleria").attr("data-asset-images");
  74. if(toggled){
  75. $('.galleria-fscr').css("background", "url("+images+"/fullscreen.png)");
  76. } else {
  77. $('.galleria-fscr').css("background", "url("+images+"/fullscreen-back.png)");
  78. }
  79. gallery.toggleFullscreen();
  80. });
  81. this.addIdleState(this.get('fscr'), { opacity:0 });
  83. this.addElement('tgllayer');
  84. this.appendChild('stage','tgllayer');
  85. this.$('tgllayer')
  86. .click(function() {
  87. toggleLayer();
  88. });
  89. this.addIdleState(this.get('tgllayer'), { opacity:0.5 });
  91. this.addElement('maplayer');
  92. this.appendChild('stage','maplayer');
  93. this.$('maplayer')
  94. .click(function() {
  95. toggleMap();
  96. });
  97. this.addIdleState(this.get('maplayer'), { opacity:0.7 });
  99. this.attachKeyboard({
  100. left: this.prev,
  101. right: this.next
  102. });
  103. //map.invalidateSize();
  104. console.log("galery ready end");
  106. });
  107. }
  108. else
  109. {
  110. $("body").text("Gallery does not work");
  111. }
  113. /* map = new L.Map('map', {center: new L.LatLng(50.77,10.56,7), zoom: 9});
  114. var topoUrl = 'http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png';
  115. var topo = new L.TileLayer(topoUrl, {minZoom: 2, maxZoom: 18});
  116. topo.addTo(map);*/
  118. });
  120. </script>
  121. {% endblock %}