L
Luke144
Guest
Hallo Leute,
ich habe die aktuelle Version der Fancybox (https://fancyapps.com/fancybox/3/) in meine Seite eingebunden.
Prinzipiell klappt das Initialisieren via JS, doch leider zeigt mir die Fancybox nur Einzelbilder an.
Die Bildergalerie will einfach nicht hinhauen, was mir seit Tagen Kopfzerbrechen bereitet.
Documentation u. Google waren leider auch nicht aufschlussreich.
Bsp Fancybox3 (so hätte ich es gerne): https://codepen.io/fancyapps/pen/vzoPMB?editors=1010
Documentation:
https://fancyapps.com/fancybox/3/docs/#ajax
Absatz: Initialize with JavaScript
Meine index.php (Auszug):
HTML-Ausgabe
Meine texteditor.php (Auszug):
Ich vermute, dass das Problem mit dem data-fancybox Attribut zusammenhängt und ich es falsch einsetze bzw. die Logik falsch kombiniere.
Ich betreue das Projekt ehrenamtlich und würde mich sehr freuen wenn ihr mir auf die Sprünge helfen könntet.
Greetzs,
Luke
ich habe die aktuelle Version der Fancybox (https://fancyapps.com/fancybox/3/) in meine Seite eingebunden.
Prinzipiell klappt das Initialisieren via JS, doch leider zeigt mir die Fancybox nur Einzelbilder an.
Die Bildergalerie will einfach nicht hinhauen, was mir seit Tagen Kopfzerbrechen bereitet.
Documentation u. Google waren leider auch nicht aufschlussreich.
Bsp Fancybox3 (so hätte ich es gerne): https://codepen.io/fancyapps/pen/vzoPMB?editors=1010
Documentation:
https://fancyapps.com/fancybox/3/docs/#ajax
Absatz: Initialize with JavaScript
Meine index.php (Auszug):
HTML:
<script type="text/javascript" src="/scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/fancybox-ma/dist/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="/fancybox-ma/dist/jquery.fancybox.min.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
//$(".fancybox").('[data-fancybox="images"]').fancybox({ // #####funktioniert nicht#####
//$('[data-fancybox="gallery"]').fancybox({ // #####funktioniert nicht#####
$(".fancybox").fancybox({ // #####klappt, aber nur Einzelbilder#####
buttons : [
'slideShow',
'share',
'zoom',
'fullScreen',
'close'
],
thumbs: {
autoStart: true
},
lang: "de",
});
$(".fancybox_start").click(function() {
var rel = $(this).prop('rel');
$('a[rel=\''+rel+'\'].fancybox').eq(0).trigger('click');
return false;
});
});
HTML-Ausgabe
HTML:
<a class="fancybox" href="/upload/Bild-A.jpg" rel="gallery03"><img src="/upload/Bild-A.jpg" alt="" width="105" height="139" /></a> <a class="fancybox" href="/upload/Bild-B.jpg" rel="gallery03"><img src="/upload/Bild-B.jpg" alt="" width="102" height="139" /></a>
Meine texteditor.php (Auszug):
HTML:
rel_list: [
{title: 'Standard', value: ''}, //keine Galerie, nur Einzelbilder
{title: 'Bildergalerie1', value: 'galery01'},
{title: 'Bildergalerie2', value: 'galery02'},
{title: 'Bildergalerie3', value: 'galery03'},
{title: 'Bildergalerie4', value: 'galery04'},
{title: 'Bildergalerie5', value: 'galery05'},
],
link_class_list: [
{title: 'Standard', value: ''},
{title: 'Mein Viewer', value: 'fancybox'},
{title: 'Mein Viewer NO-USE', value: 'fancybox_start'},
],
Ich vermute, dass das Problem mit dem data-fancybox Attribut zusammenhängt und ich es falsch einsetze bzw. die Logik falsch kombiniere.
Ich betreue das Projekt ehrenamtlich und würde mich sehr freuen wenn ihr mir auf die Sprünge helfen könntet.
Greetzs,
Luke
Zuletzt bearbeitet: