Fancybox, La Coutume De La Transition

Personne ne sait comment vous ouvrez une fancyBox avec un circuit ouvert de la transition:

http://fancyapps.com/fancybox/

Je cherche à réaliser une transition similaire à l'exemple ici:

http://www.zurb.com/playground/reveal-modal-plugin

J'aime le révéler plugin, mais sa pas obtenu un peu de ce que j'ai besoin que fancyBox pour un nouveau projet

Merci beaucoup,

Sam

  • Pourquoi ne pas simplement utiliser le plugin dans le lien que tu nous a donné? Il a même des instructions de code des.
InformationsquelleAutor Fruit | 2011-12-02
  1. 1

    Fancybox peut avoir la même ouverture d'effet que dans l'exemple que vous avez fournis, mais pas la clôture de la réalité.

    Pour obtenir le même effet de l'ouverture, essayez cette option:

    openMethod : 'changeIn'

    de garder le même effet pendant la période de transition entre les galeries, essayez cette option:

    nextMethod: 'changeIn'

    .

    InformationsquelleAutor JFK
  2. 9

    Ajouter des transitions personnalisées - 

    (function ($, F) {
    F.transitions.dropIn = function() {
        var endPos = F._getPosition(true);

        endPos.top = (parseInt(endPos.top, 10) - 200) + 'px';

        F.wrap.css(endPos).show().animate({
            top: '+=200px'
        }, {
            duration: F.current.openSpeed,
            complete: F._afterZoomIn
        });
    };

    F.transitions.dropOut = function() {
        F.wrap.removeClass('fancybox-opened').animate({
            top: '-=200px'
        }, {
            duration: F.current.closeSpeed,
            complete: F._afterZoomOut
        });
    };

}(jQuery, jQuery.fancybox));

    Les utiliser comme de l' - 

    $(".fancybox").fancybox({
    openMethod : 'dropIn',
    openSpeed : 250,

    closeMethod : 'dropOut',
    closeSpeed : 100
});

    Et oh-la - la même effet!

    • Cela ressemble juste à droite, bien que im obtenir js des erreurs lorsque vous essayez de le configurer, j'ai pas prolongé plugins jQuery avant, où est le meilleur endroit pour placer ce code? (Pour ref de l'erreur im obtenir est : Uncaught TypeError: Cannot read property 'transitions' undefined)
    • Vous pouvez définir la fonction juste après l'ouverture <script> tag et avant le $(document).prêt() ... puis il suffit d'ajouter les options comme indiqué par Janis (deuxième segment de code) dans votre script personnalisé.
    • Merci pour vos commentaires, c'est que j'ai pensé et essayé, le problème est im obtenir la js erreur mentionnée ci-dessus?
    • Ajouter ce morceau de code à la suite notamment de fancybox.js
    InformationsquelleAutor Janis
  3. 3

    Pour tous ceux qui lisent ce moment, j'ai écrit un jQuery Fancybox plugin qui comprend les transitions Janis (Fancybox de l'auteur) a écrit pour répondre à cette question, ainsi que quelques autres, et j'espère qu'il va continuer à évoluer.

    Voir ici: jquery.fancybox.transitions.js

    Inclure le fichier javascript dans une balise script après et jQuery Fancybox

    <script src="path to jquery"></script>
<script src="path to fancybox"></script>
<script src="jquery.fancyboxbox.transitions.js"></script>

    Plus d'informations dans le dépôt GitHub.

    • Merci pour ce plugin, a travaillé comme un charme...
    • Pas de problème! Heureux de vous aider
    InformationsquelleAutor mdenton8
  4. 0

    Bien mon conseil est que si vous savez comment code un vous-même à partir de JQuery alors vous êtes meilleur pari est de continuer à chercher sur le net jusqu'à ce que vous pouvez régler pour quelque chose.

    Si vous cherchez peut-être à refaire ou à l'extension de l'un de ces plugins, puis un bon livre à lire est JQuery: Novice Ninja, le vérifier sur Amazon. Il y a beaucoup de bons conseils et de trucs là-bas.

    http://www.amazon.co.uk/jQuery-Novice-Ninja-Earle-Castledine/dp/0980576857/ref=sr_1_1?ie=UTF8&qid=1322832342&sr=8-1

    Généralement si vous ne voulez pas ré-inventer la roue.
    Heres quelques liens pour JQuery Lightbox plugins

    http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/
    http://webdesign14.com/30-best-jquery-lightbox-plugins/

    InformationsquelleAutor Sean H Jenkins