Ergebnis 1 bis 7 von 7
  1. #1
    Luke144 ist offline Mitglied
    registriert
    20-07-2017
    Beiträge
    34

    Fancybox3: Bildergalerie klappt nicht

    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-Code:
    <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-Code:
    <a class="fancybox" href="/upload/Bild-A.jpg" rel="gallery03"><img src="/upload/Bild-A.jpg" alt="" width="105" height="139" /></a>&nbsp;<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-Code:
    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
    Geändert von Luke144 (24-04-2019 um 12:47 Uhr)

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.685

    AW: Fancybox3: Bildergalerie klappt nicht

    Zitat Zitat von Luke144 Beitrag anzeigen
    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.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  3. #3
    Luke144 ist offline Mitglied
    registriert
    20-07-2017
    Beiträge
    34

    AW: Fancybox3: Bildergalerie klappt nicht

    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:
    HTML-Code:
    $(".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:
    HTML-Code:
    $('[data-fancybox="gallery"]').fancybox({}
    Daran happert es leider.
    Ich hoffe, es war jetzt ein bisschen verständlicher.
    Geändert von Luke144 (25-04-2019 um 12:58 Uhr)

  4. #4
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.685

    AW: Fancybox3: Bildergalerie klappt nicht

    Kannst du dazu ein fiddle machen?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  5. #5
    Luke144 ist offline Mitglied
    registriert
    20-07-2017
    Beiträge
    34

    AW: Fancybox3: Bildergalerie klappt nicht

    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:

    HTML-Code:
    //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...
    Geändert von Luke144 (30-04-2019 um 14:48 Uhr)

  6. #6
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.685

    AW: Fancybox3: Bildergalerie klappt nicht

    Zitat Zitat von Luke144 Beitrag anzeigen
    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?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

  7. #7
    Luke144 ist offline Mitglied
    registriert
    20-07-2017
    Beiträge
    34

    AW: Fancybox3: Bildergalerie klappt nicht

    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:
    HTML-Code:
    <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:
    PHP-Code:
    <script type="text/javascript">
    $(
    document).ready(function() {

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

    //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.
    Geändert von Luke144 (17-05-2019 um 11:17 Uhr) Grund: Code Tags

Ähnliche Themen

  1. AddEventListener klappt nicht
    Von Bennux im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 14-04-2015, 11:47
  2. onclick klappt nicht...
    Von Sonni174 im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 26-02-2013, 21:01
  3. RegEx klappt nicht
    Von iceman_fx im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 01-06-2010, 12:16
  4. Primitivverschlüsselung klappt nicht
    Von jsnewusr im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 22-05-2006, 09:21
  5. Funktionsaufruf klappt nicht!
    Von woercel im Forum JavaScript
    Antworten: 23
    Letzter Beitrag: 05-08-2005, 12:01

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •