[FRAGE] Fancybox3: Bildergalerie klappt nicht

[Luke144]

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):

<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

<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):

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

 

[mikdoe]

Die Bildergalerie will einfach nicht hinhauen

Was genau heißt das?
Wie sieht der Code im Browser aus?
Wo hast du die Syntax in der texteditor.php her - in der Doku finde ich das auf Anhieb nicht? Und ich finde auch deren Bezug zum Rest nicht.

 

[Luke144]

Die "Texteditor.php" und "html.Ausgabe" sind von mir gecoded.
Ich habe es nur gepostet damit die Zusammenhänge klarer werden.

Erläuterung:
Texteditor.php: hier läuft tinymce (https://www.tiny.cloud). Im Editor kann der Benutzer neben Textbearbeitung auch Bilder hochladen (über php).
In der Tiny-Config verwende ich "rel_list:" und "link_class_list:" damit der Benutzer Bildergalerien auf seine Einzelbilder zuweisen kann (zB: BildA -> Galerie03 und BildB -> Galerie03) und als Viewer die Fancybox auswählen kann.
Diese Werte speichere ich in einer MySQL-DB-Tabelle und hole sie mir bei der Ausgabe.php wiederum von dort.
Anm.: Die FBox benötigt bei der html-ausgabe (Besucher-Frontend) grundsätzlich das rel-Attribut (zB rel="gallery03") damit sie zusammenhängende Bilder erkennen kann.

Die Fancybox ist in der index.php eingebunden (siehe Eröffnungsposting).
Das Initialisieren der Fancybox erfolgt in meiner index.php:

$(".fancybox").fancybox({... ... }

Leider erkennt sie nur Einzelbilder und keine zusammenhängenden Galerien.

Das Problem: Irgendwie muss mein JS-Initialize noch um diesen Teil ergänzt werden:

$('[data-fancybox="gallery"]').fancybox({}

Daran happert es leider.
Ich hoffe, es war jetzt ein bisschen verständlicher.

 

[mikdoe]

Kannst du dazu ein fiddle machen?

 

[Luke144]

Ich kann das Problem mit fiddle leider nicht 1:1 nachrekonstruieren da mein Scripting fast ausschließlich dynamisch ist.
Es wäre nicht aussagekräftig.

Inzwischen weiß ich, dass das Problem beim Initialisierungsaufruf der Facybox in meiner index.php liegt.
Aktuell habe ich zwei Ansätze zum Initialisieren der Fancybox via JS in Kombination mit dem 'data-fancybox-Gallery' Attribut:

//Codeansatz 1
$(".fancybox").('[data-fancybox="images"]').fancybox({  

//Codeansatz 2
$('[data-fancybox="gallery"]').fancybox({

Leider funktionieren beide Ansätze nicht (dh. die Fancybox ladet nicht).
Doc: https://fancyapps.com/fancybox/3/docs/#usage (Teil: Initialize with JavaScript)

Ich würde mich sehr freuen wenn mir die JS-Experten unter euch auf die Sprünge helfen könnten.
Ich bin echt schon am Verzweifeln...

 

[mikdoe]

Ich kann das Problem mit fiddle leider nicht 1:1 nachrekonstruieren da mein Scripting fast ausschließlich dynamisch ist.

Genau da liegt das Problem. Dein JS ist bestimmt nicht dynamisch, das würde ja bedeuten, dass dein JS zur Laufzeit seinen Code ändert. Glaube ich nicht. Dein HTML Dokument ist höchstens dynamisch, weil es durch PHP/Perl/Ruby usw. generiert wird. Warum hast du denn das JS nicht in separaten Dateien?
Wenn der Fehler da ist machst du Rechtsklick "Quelltext anzeigen". Und das teilst du dann in die drei Fiddle Boxen auf.
Oder kann man sich das im Netz online ansehen?

 

[Luke144]

Leider ist der Fall nicht einfach darstellbar.
Hinter der Browserausgabe liegt ein Backoffice-Redaktionssystem mit User Content Self Management Funktionalität.

Ich versuche die Problematik mit einem anderen Ansatz auf den Punkt zu bringen:

Das Ziel: Ich möchte voneinander unabhängige Bildergalerien an die FancyboxApp übergeben.

Der Sourcecode im Browser sieht wie folgt aus:

ausgabe.php:

<a class="fancybox" href="/upload/Bild1.jpg" rel="galery01"><img src="/upload/Bild1.jpg" alt="" width="300" height="450" /></a>
<a class="fancybox" href="/upload/Bild2.jpg" rel="galery01"><img src="/upload/Bild2.jpg" alt="" width="300" height="200" /></a>

<a class="fancybox" href="/upload/Bild1.jpg" rel="galery02"><img src="/upload/Bild1.jpg" alt="" width="300" height="450" /></a>
<a class="fancybox" href="/upload/Bild2.jpg" rel="galery02"><img src="/upload/Bild2.jpg" alt="" width="300" height="200" /></a>
<a class="fancybox" href="/upload/Bild3.jpg" rel="galery02"><img src="/upload/Bild3.jpg" alt="" width="300" height="200" /></a>

<a class="fancybox" href="/upload/Bild1.jpg" rel="galery03"><img src="/upload/Bild1.jpg" alt="" width="300" height="450" /></a>
<a class="fancybox" href="/upload/Bild2.jpg" rel="galery03"><img src="/upload/Bild2.jpg" alt="" width="300" height="200" /></a>
<a class="fancybox" href="/upload/Bild3.jpg" rel="galery03"><img src="/upload/Bild3.jpg" alt="" width="300" height="200" /></a>
<a class="fancybox" href="/upload/Bild4.jpg" rel="galery03"><img src="/upload/Bild4.jpg" alt="" width="300" height="200" /></a>

Das erfolgreiche Initialisieren der Fancybox mache ich so:

index.php:

<script type="text/javascript">
$(document).ready(function() {

$(".fancybox").fancybox({
	buttons : [ 
		'slideShow',
    		'share',
	    	'zoom',
    		'fullScreen',
	    	'close'
		],
	thumbs: {
	    	autoStart: true
		},

//An dieser Stelle liegt mein Problem:
//Ich muss die "rel"-Variable an das data-fancybox="gallery" Attribut übergeben damit der Betrachter die jew. Galerie durchschalten kann.

$(".fancybox_start").???? {
	var rel = $(this).data-fancybox; //??
	return false;
});
//Erläuterung: Die Instanz "fancybox_start" kommt vom Backoffice Contenteditor u. wird über "link_class_list" mitgesendet. Das passt so.

});
</script>

Die Doku von Fancyapp beschreibt mein Szenario wie folgt:

Absatz: Initialize with JavaScript

Variante 1:

Select your elements with a jQuery selector (you can use any valid selector) and call the fancybox method:

$('[data-fancybox="gallery"]').fancybox({
// Options will go here
});

Variante 2:

Info Sometimes you might need to bind fancybox to dynamically added elements. Use selector option to attach click event listener for elements that exist now or in the future. All selected items will be automatically grouped in the gallery. Example:

$().fancybox({
selector : '.imglist a:visible'
});

Doku: https://fancyapps.com/fancybox/3/docs/#usage

Ich hoffe, diese Erklärung war verständlicher und konkreter am Problem.