JQuery：Fancybox 在选项卡中打开图像 - ASP.Net

Question

我正在使用 Fancybox 在我的网站上创建一个画廊 - Asp.Net MVC

我已经添加了所有的库，但是，图像似乎是在新选项卡中加载的，而不是像带有箭头的 pops 那样工作。

这是我在视图中看到的内容：

  @{
   ViewBag.Title = "Gallery";

  }

 <head>

<!-- Add jQuery library -->
<script type="text/javascript" 
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>

<link href="../../Content/jquery.fancybox.css" rel="stylesheet" 
 type="text/css" />
<script src="../../Scripts/jquery.fancybox.pack.js" type="text/javascript">
 </script>

<link href="../../Content/jquery.fancybox-buttons.css" rel="stylesheet" 
 type="text/css" />
<script src="../../Scripts/jquery.fancybox-buttons.js" 
 type="text/javascript"></script>

<script src="../../Scripts/jquery.fancybox-thumbs.js" 
 type="text/javascript"></script>
<link href="../../Content/jquery.fancybox-thumbs.css" rel="stylesheet" 
type="text/css" />
<script src="../../Scripts/jquery.fancybox-media.js" type="text/javascript">
 </script>

 </head>
<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            openEffect: 'none',
            closeEffect: 'none',
        });
    });
   </script>

这是我要添加的一些图片：

<body>
<br />
<div class="bodyText">

    <center>

        <h1>Gallery</h1>

        <p>Pictures taken by me in Agadir (Morocco), Dubai (UAE) and Sylhet (Bangladesh)</p>
        <br /><br />
    </center>

    <!--inserting the images and adding descriptions-->
    <center>
        <a class="fancybox" rel="gallery" href="../../Content/images/agadir.jpg" title="Marina"><img src="../../Content/images/rsz_agadir.jpg" style='border:2px solid #ffffff' alt="" hspace="5" /></a>
        <a class="fancybox" rel="gallery" href="../../Content/images/agadirmountain.jpg" title="Atlas Mountains trip"><img src="../../Content/images/rsz_agadirmountain.jpg" style='border:2px solid #ffffff' alt="" hspace="5" /></a>
        <a class="fancybox" rel="gallery" href="../../Content/images/agadirsunset.jpg" title="Sunset in Agadir"><img src="../../Content/images/rsz_agadirsunset.jpg" style='border:2px solid #ffffff' alt="" hspace="5" /></a>

我在这里添加了一个fiddle：https://dotnetfiddle.net/MYo1WG

Answer 1

尝试以下操作：

    <a class="fancybox" data-fancybox-group="gallery" href="../../Content/images/agadir.jpg" title="Marina"><img src="../../Content/images/rsz_agadir.jpg" style='border:2px solid #ffffff' alt="" hspace="5" /></a>
    <a class="fancybox" data-fancybox-group="gallery" href="../../Content/images/agadirmountain.jpg" title="Atlas Mountains trip"><img src="../../Content/images/rsz_agadirmountain.jpg" style='border:2px solid #ffffff' alt="" hspace="5" /></a>
    <a class="fancybox" data-fancybox-group="gallery" href="../../Content/images/agadirsunset.jpg" title="Sunset in Agadir"><img src="../../Content/images/rsz_agadirsunset.jpg" style='border:2px solid #ffffff' alt="" hspace="5" /></a>

data-fancybox-group 是 fancybox 插件允许您像轮播一样遍历画廊的属性。

编辑：

https://dotnetfiddle.net/YGj6rZ

在你的 fiddle 中，我没有发现任何错误，我将脚本从 head 和 body 标签之间移到了 head 标签中。然后我从 fancy box 加载了 js 和 css 脚本。它从打开一个选项卡到使用插件。您加载脚本和 css 文件的方式一定有问题。

Answer 2

检查开发者工具，你的页面有JS错误-

Uncaught ReferenceError: $ is not defined

修复此问题，它应该可以正常工作。另一条消息应该给你一个线索：

'http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.

JQuery：Fancybox 在选项卡中打开图像 - ASP.Net

JQuery: Fancybox opens image in tab - ASP.Net

html

css

asp.net-mvc

jquery

fancybox