2017-09-13 2 views
0

Ich benutze FancyBox 3 und wollte eine Zoom-Taste in der Tastenleiste haben, aber es scheint nicht zu funktionieren.FancyBox 3 Zoom Taste

Ich benutze clickContent, um einen Link zu öffnen, und ich dachte, dass, da ich die Zoom-Funktion habe, könnte ich das irgendwie auf eine Schaltfläche umschalten, anstatt auf den Inhalt zu klicken.

Ich habe einen Button mit btnTpl, was es zu einer Klasse von "fancybox-Zoom".

Ich habe versucht, diese (und noch ein paar andere Dinge, aber keines dieser Werke)

afterLoad : function() { 
       $(".fancybox-zoom").click(function(current,event) { 
        return current.type === 'image' ? 'zoom' : false; 
       }); 
      }, 

Wo/wie soll ich die Klick-Funktion oder nenn mache ich falsch? :)

EDIT: Eigentlich fand ich heraus, dass die Funktion Ich brauche scaleToActual ist, aber wenn ich es ein Onclick-Ereignis auf die Schaltfläche wie folgt machen:

<button onclick="$.fancybox.scaleToActual()" data-fancybox-zoom class="fancybox-button fancybox-zoom"></button> 

Es fällt den Uncaught TypeError: $.fancybox.scaleToActual is not a function Fehler ... irgendwelche Ideen über diese Methode?

Jede Hilfe wäre willkommen.

+0

fancybox mehrere Instanzen unterstützt, daher müssen Sie die Instanz eine Referenz haben. Zum Beispiel: $ .fancybox.getInstance(). ScaleToActual(); – Janis

Antwort

1

es so sein würde:

$('[data-fancybox]').fancybox({ 
    onInit : function(instance) { 

    // Make zoom icon clickable 
    instance.$refs.toolbar.find('.fancybox-zoom').on('click', function() { 

     if (instance.isScaledDown()) { 
     instance.scaleToActual(); 

     } else { 
     instance.scaleToFit(); 
     } 

    }); 
    } 
}); 

Demo - https://codepen.io/anon/pen/boGPZx

+0

Danke für die schnelle Antwort und die Demo, funktioniert perfekt, das ist genau das, was ich brauchte. :) – Nimue

Verwandte Themen