Fancybox v2无法与Durandal一起使用 [英] Fancybox v2 not working with Durandal

问题描述

我无法让Fancybox与Durandal一起工作。我以John Papa的热毛巾模板为起点。

I am not able to get Fancybox work with Durandal. I am using John Papa's Hot Towel Template as my starting point.

问题：每当我单击图像时，它就导航到图像路径，而不是将其覆盖在页面顶部。

Problem: Whenever I click on the image it is navigating to the image path rather than overlaying it on top of the page.

库：Jquery v 1.9.1& FancyBox 2.1.4。

Libraries: Jquery v 1.9.1 & FancyBox 2.1.4.

视图：

<section>
    <a class="fancybox" title="Our fresh starters"     href="http://www.preschools4all.com/image-files/little-bunny-foo-foo-1.jpg">
        <img src="http://www.preschools4all.com/image-files/little-bunny-foo-foo-1.jpg"     alt="Our fresh starters" />
    </a>
</section>

ViewModel：

ViewModel:

define(['services/logger', 'services/dataservice'], function (logger, dataservice) {

   var vm = {
        viewAttached: viewAttached,
        activate: activate,
    };

    return vm;

    function activate() {
           //Do something
          // return promise
    }

    function viewAttached() {            
        $(".fancybox").fancybox();
    }

});

BundleConfig：

BundleConfig:

bundles.Add(
 new ScriptBundle("~/scripts/vendor")
 .Include("~/scripts/jquery-{version}.js")
 .Include("~/scripts/jquery.fancybox.js")
 .Include("~/scripts/bootstrap.js")
);


bundles.Add(
 new StyleBundle("~/Content/css")
 .Include("~/Content/ie10mobile.css")
 .Include("~/Content/bootstrap.css")
 .Include("~/Content/jquery.fancybox.css")
);

怎么了？

推荐答案

bootstrap.js v 2.3.0似乎是问题所在

It seemed like the problem was with bootstrap.js v 2.3.0

Boostrap 2.3.0与fancybox v2不兼容。我升级为使用Bootstrap 2.3.1，并解决了我的问题。

Boostrap 2.3.0 is incompatible with fancybox v2. I upgraded to use bootstrap 2.3.1 and solved my issue.

这篇关于Fancybox v2无法与Durandal一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！