开发者

Jquery Gallerific and fancybox conflict

So i looked around here and couldn't find anything that works. I am trying to load a gallery with gallerific and inside there is an image that i want to open using fancybox. It seems like gallerific takes over and you can't do anything with the elements inside. Even if i try to call so开发者_运维问答mething within the gallery it just returns null.

I even tried to call fancybox on the onPageTransitionIn and onTransitionIn. The onTransitionIn breaks the gallery and it does nothing on the onPageTrans.

Any ideas?


I set this so that the default galleriffic download image inside the caption instead loads fancybox window

   $(document).ready(function() {
        var gallery = $('#thumbs').galleriffic({
            delay:                     2500,
            numThumbs:                 15,
            preloadAhead:              10,
            enableTopPager:            false,
            enableBottomPager:         false,
            maxPagesToShow:            7,
            imageContainerSel:         '#slideshow',
            controlsContainerSel:      '#controls',
            captionContainerSel:       '#caption',
            loadingContainerSel:       '#loading',
            renderSSControls:          true,
            renderNavControls:         true,
            enableHistory:             false,
            autoStart:                 false,
            syncTransitions:           true,
            defaultTransitionDuration: 900,
            onTransitionIn:   function(slide, caption, isSync) {
                slide.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
                if (caption){
                    caption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);

                    caption.find("a.fancybox").fancybox({
                        'titleShow'     : true,
                        'transitionIn'  : 'elastic',
                        'transitionOut' : 'elastic',
                        'easingIn'      : 'easeOutBack',
                        'easingOut'     : 'easeInBack'
                    });
                }
            }

        });
    });


Ok so i finally got this. In case anyone else has difficulties.

You can define what you want in the onTransition.

Then you can call the regular function to get

onTransitionIn:   function(slide, caption, isSync) {
slide.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
if (caption)
    caption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);

    manipulate elements here
}

It will load it the default way and you can then do what you want.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜