我正在使用Fancybox在我的网站上创建一个画廊 - Asp.Net MVC
我已经添加了所有库，但是，图像似乎在新选项卡中加载，而不是像弹出式箭头一样工作，箭头在侧面。
以下是我的观点：
@{
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>
我在这里添加了一个小提琴：https://dotnetfiddle.net/MYo1WG
检查开发人员工具，您的页面上有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.
请尝试以下操作：
<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
在你的小提琴中，我发现没有什么真正的问题，我将脚本从头部和身体标签之间移动，并将其放在头部标签中。然后我只是从花哨的盒子里加载了 js 和 css 脚本。它从打开选项卡到使用插件。加载脚本和 css 文件的方式一定有问题。