Fancybox, Custom Open Transition

Question

Кто-нибудь знает, как открыть fancyBox с помощью пользовательского открытого перехода:

http://fancyapps.com/fancybox/

Я ищу аналогичный переход к примеру, найденному здесь:

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

Мне нравится плагин открытия, но в нем нет тех функций, которые мне требуются от fancyBox для нового проекта

Большое спасибо,

Sam

Answer 1

Добавление пользовательских переходов -

(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));

Используйте их как -

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

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

А воу-ля - тот же эффект!

Answer 2

Для тех, кто читает это сейчас, я написал плагин jQuery Fancybox, который включает в себя переходы, которые Янис (автор Fancybox) написал для ответа на этот вопрос, а также некоторые другие, и он, надеюсь, будет продолжать развиваться.

См. Здесь: jquery.fancybox.transitions.js

Включите файл javascript в тег сценария после jQuery и Fancybox

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

Дополнительная информация вGitHub репозиторий.

Answer 3

Fancybox может иметь тот же эффект открытия, что и в предоставленном вами образце, но не тот же эффект закрытия.

Чтобы добиться того же эффекта открытия, попробуйте этот параметр:

openMethod : 'changeIn'

, чтобы сохранить тот же эффект при переходе между галереями, попробуйте этот параметр:

nextMethod: 'changeIn'

.

Answer 4

Что ж, мой совет: если вы не знаете, как писать код самостоятельно из JQuery, тогда вам лучше всего искать в сети, пока вы не согласитесь на что-то.

Если вы ищете, возможно, переделать или расширить один из этих плагинов, то хорошая книга для чтения - JQuery: от новичка до ниндзя, посмотрите на Amazon.Там много хороших советов и хитростей.

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

Вообще, хотя вы не захотите изобретать велосипед заново.Вот пара ссылок на плагины JQuery Lightbox

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