eSales Media Git repositories
Browse code

Add jbox jquery template

Benjamin Roth authored on12/01/2023 09:58:13
Showing1 changed files
contao/templates/j_jbox.html5
History View file @23b6b50
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,86 @@
1 
+<?php
2 
+use Contao\Template;
3 
+
4 
+// Add the colorbox style sheet
5 
+$GLOBALS['TL_CSS']['jbox'] = 'bundles/vonrotenbergjbox/jBox.min.css|static';
6 
+$GLOBALS['TL_CSS']['jbox_image'] = 'bundles/vonrotenbergjbox/plugins/jBox.Image.css|static';
7 
+
8 
+echo Template::generateScriptTag('bundles/vonrotenbergjbox/jBox.all.min.js',false,null);
9 
+?>
10 
+
11 
+<script>
12 
+
13 
+ jQuery(function($) {
14 
+    $('a[data-jbox-iframe],nav a.modal-iframe').map(function() {
15 
+      new jBox('Modal', {
16 
+      	attach: $(this),
17 
+      	preventDefault: true,
18 
+        title: $(this).data('jbox-title') ? '<h3>' + $(this).data('jbox-title') + '</h3>' : ($(this).attr('title') ? '<h3>' + $(this).attr('title') + '</h3>' : ''),
19 
+        // content: '<iframe frameborder="0" class="jBox-iframe" src="' + $(this).attr('href') + '"></iframe>',
20 
+        closeButton: 'title',
21 
+        width: 1200,
22 
+        height: '90%',
23 
+        theme: 'Iframe',
24 
+        animation: {open: 'zoomIn', close: 'slide:top'},
25 
+        onOpen: function() {
26 
+      	  this.setContent('<iframe frameborder="0" class="jBox-iframe" src="' + this.source[0].getAttribute('href') + '"></iframe>');
27 
+        }
28 
+      });
29 
+    });
30 
+
31 
+    $('a[data-jbox-imagemodal]').map(function() {
32 
+      var $self = $(this);
33 
+      new jBox('Modal', {
34 
+        attach: $(this),
35 
+        preventDefault: true,
36 
+        title: $(this).data('jbox-title') ? '<h3>' + $(this).data('jbox-title') + '</h3>' : ($(this).attr('title') ? '<h3>' + $(this).attr('title') + '</h3>' : ''),
37 
+        content: '<img src="' + $(this).attr('href') + '">',
38 
+        onInit: function() {
39 
+          var image = new Image();
40 
+          image.src = $self.attr('href');
41 
+        },
42 
+        onOpen: function() {
43 
+          this.position();
44 
+        },
45 
+        closeButton: 'title',
46 
+        width: 710,
47 
+        maxWidth: 710
48 
+      });
49 
+    });
50 
+
51 
+    $lbImages = $('[data-lightbox]').filter(function(index) {
52 
+      if (!$(this).parents().eq(3).hasClass('slick-cloned'))
53 
+      {
54 
+        return true;
55 
+      }
56 
+    });
57 
+
58 
+    new jBox('Image', {
59 
+      // Put custom options here
60 
+      gallery: 'data-lightbox',
61 
+      attach: $lbImages,
62 
+      imageCounter: true
63 
+    });
64 
+
65 
+    new jBox('Tooltip', {
66 
+      attach: '[data-tooltip-title]',
67 
+      theme: 'Tooltip',
68 
+      // pointer: 'right:60',
69 
+      getContent: 'data-tooltip-title',
70 
+      maxWidth: 250,
71 
+      /*position: {
72 
+        x: 'right',
73 
+        y: 'bottom'
74 
+      },
75 
+      offset: {
76 
+        x: -5,
77 
+        y: 5
78 
+      },*/
79 
+      zIndex: 4000,
80 
+      adjustPosition: true,
81 
+      adjustTracker: true,
82 
+      closeOnClick: true
83 
+    });
84 
+
85 
+  });
86 
+</script>