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