Hinzufügen von Social-Share-buttons, um die Fancybox verwendet die Schaltfläche Helfer

Ich bin derzeit versuchen zu integrieren social sharing buttons auf meinem Bild fancybox pop-UPS. Es ist ein JsFiddle die Fancybox geschaffen hat, zu zeigen, wie dies gemacht werden würde...aber ich bin mit dem "Helfer" > jquery.fancybox-buttons.js (siehe hier). Wie kann ich beides miteinander verbinden, mit diesen individuellen Lösungen so, dass wenn sich die fancybox Bild erscheint, hat es die social-sharing-buttons unter (wie im JSFiddle & hat die Schaltfläche Helfer?

Hier ein Beispiel von meiner Seite ist der HTML-Code für die Fancybox-Galerie:

<div id="painting" class="content-pages">

<p>
    <a class="fancybox-buttons" href="painting/2011_b.jpg" data-fancybox-group="paintings" title="Sed vel sapien vel sem uno"><img src="painting/2011_s.jpg" alt="" /></a>

    <a class="fancybox-buttons" href="painting/beginnings-3_b.jpg" data-fancybox-group="paintings" title="Tegan Whitesel - Beginnings III"><img src="painting/beginnings-3_s.jpg" alt="" /></a>

    <a class="fancybox-buttons" href="painting/t-beginnings-i_b.jpg" data-fancybox-group="paintings" title="Tegan Whitesel - Beginnings I "><img src="painting/t-beginnings-i_s.jpg" alt="" /></a>

    <a class="fancybox-buttons" href="painting/t-beginnings-ii_b.jpg" data-fancybox-group="paintings" title="Tegan Whitesel - Beginnings II"><img src="painting/t-beginnings-ii_s.jpg" alt="" /></a>
</p>
</div>

InformationsquelleAutor Forb3s | 2013-02-05

  1. 2

    Ersten, die Sie benötigen, um das laden der js-und css-button-helper-Dateien (befindet sich auf der Helfer-Unterverzeichnis des download.)

    Zweiten, fügen Sie die Schaltflächen Helfer-option, um die benutzerdefinierten Skripts. Möchten Sie vielleicht deaktivieren Sie das standardmäßige close und arrows - Tasten so verwenden Sie die Schaltflächen Helfer nur.

    Also den code, den Sie hinzufügen sollte : 

    //other options
helpers: {
    title: {
        type: 'inside'
    }, //<-- add a comma to separate the following option
    buttons: {} //<-- add this for buttons
},
closeBtn: false, //disable default close
arrows: false    //disable default arrows

    Sehen, dass die gleiche geändert JSFIDDLE.

    First off, ich danke Ihnen sehr für Ihre Hilfe. Ich bin das laden der JS & CSS-Datei für die Schaltfläche Hilfsdateien...und ich bin auch zusätzliche JS & CSS-Dateien für die social buttons (sehr ähnlich zu Ihrem JSFiddle-Beispiel), aber aus irgendeinem Grund noch kein Glück. Könnte es zu tun haben mit der Klasse Namen, die ich verwende? Ich denke, Sie sind ein bisschen anders als das, was die Standard-fancybox-Dateien diktieren. Meine Klasse für jedes Bild ist fancybox-button & ich bin auch mit data-fancybox-group="paintings" trennen Sie die einzelnen Galerie-Art...hier ist ein link zu der Seite an der ich arbeite: teganwhitesel.com/#painting -
    Ich sehe die Tasten, aber ich sehe nicht, das social-media-code innerhalb der title wie im jsfiddle
    Meinst du den JS & CSS-Dateien geladen werden, in der <header> tag? Die Datei mit dem code aus dem JS fiddle ist mit dem Titel fancybox/fancybox-social-buttons.js
    Gut, die fancybox-social-buttons.js die Datei hat die social-media-code ja, aber code muss innerhalb der .ready() Methode. Dann haben Sie die Datei fancybox-jquery-plugin.js mit diesem code $('.fancybox').fancybox();, der überschreibt die vorherigen fancybox-Einstellungen. Nicht die Dinge zu komplizieren, und nur diese Skripte, die Sie benötigen.
    ok... #1. so wie ich die social-media-code (die findet in der fancybox-social-buttons.js Datei) in den .ready() Methode? #2 hab ich auch entfernt jede Spur von der fancybox-jquery-plugin.js da es schien, wie es war, über die Dinge komplizieren? War, das richtige zu tun?

    InformationsquelleAutor JFK

Schreibe einen Kommentar