我有一些“元素”类 div，它们是灰色框，里面有图像和标题。单击它们时，我希望它们看起来更大。
我已经应用了 fancybox，但没有任何反应。我已将所有相关文件添加到 html 中。
这是html代码:
<div class="container">
<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>
<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>
<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>
<div class="item">
<img src="photo.jpg">
<p>Image caption</p>
</div>
</div>
最佳答案
首先下载并解压您的 FancyBox 文件
第二次使用(或不使用)FTP 将这些文件上传到您的服务器
第三步调整你的 FancyBox CSS 和 JS 文件的路径，使其与你上传 FancyBox 插件的根目录的文件夹位置一致
出于此演示的目的，我使用了来自 http://fancyapps.com/fancybox/ 的相同图像.....
许多人的问题似乎不是上传 CSS 和 JS 文件，而是如何实际执行它们。
---这是非常基本的，我刚遇到同样的问题，所以我想对这个问题增加一些见解。
通常缺少使其执行的是在正文部分，该部分位于您显示为缩略图等的图像下方-->这是使其工作的一些 JS };-)
提示:在下载 fancybox 的页面的源代码中...
<script type="text/javascript">
$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}`enter code here`
});
$("#single_2").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
helpers : {
title : {
type : 'inside'
}
}
});
$("#single_3").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'outside'
}
}
});
$("#single_4").fancybox({
helpers : {
title : {
type : 'over'
}
}
});
});
</script>
<!--end above-->
<!-- the above JS (in the body & under the images (i.e
below the anchor/image attributes...below the id of single_1
thru single_4 etc.)
executes & triggers the popup effect of the enlarged
image...Below is similar to how your code should look
based on path adjustment within your server -->
<!--end above-->
From Here you can hit the ground running and customize it as needed.
All the Code to make it Function right:
<!--begin-->
<!-- this format makes it work for you -->
<!-- If you think not go here (below) -->
<!-- http://www.kovacsphotography.com/fancyBox.html -->
<!-- as said before adjust your paths to all JS & CSS -->
<!--begin-->
<!DOCTYPE html>
<html>
<head>
<title>|demo Of FancyBox |</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery- latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancyBox/lib/jquery.mousewheel- 3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancyBox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancyBox/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancyBox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/kovacsphotography/fancyBox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/fancyBox/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/fancyBox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancyBox/source/helpers/jquery.fancybox-thumbs.js"></script>
</head>
<body>
<a id="single_1" href="http://farm8.staticflickr.com /7367/16426879675_e32ac817a8_b.jpg" title="Codirosso spazzacamino (Massimo Greco _Foligno)"> <img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" /> </a>
<a id="single_2" href="http://farm6.staticflickr.com/5612/15344856989_449794889d_b.jpg" title="Morning Twilight (Jose Hamra Images)"> <img src="http://farm6.staticflickr.com/5612/15344856989_449794889d_m.jpg" alt="" /> </a>
<a id="single_3" href="http://farm8.staticflickr.com/7289/16207238089_0124105172_b.jpg" title="(Eric Goncalves (cathing up again!))"> <img src="http://farm8.staticflickr.com/7289/16207238089_0124105172_m.jpg" alt="" /> </a>
<a id="single_4" href="http://farm9.staticflickr.com/8568/16388772452_f4d77a92c7_b.jpg" title="Arctic Paradise (Tom Draxler)"> <img src="http://farm9.staticflickr.com/8568/16388772452_f4d77a92c7_m.jpg" alt="" /> </a>
<script type="text/javascript">
$(document).ready(function() {
$("#single_1").fancybox({
helpers: {
title : {
type : 'float'
}
}
});
$("#single_2").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
helpers : {
title : {
type : 'inside'
}
}
});
$("#single_3").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'outside'
}
}
});
$("#single_4").fancybox({
helpers : {
title : {
type : 'over'
}
}
});
});
</script>
</body>
</html>
这里的技巧是为你拥有的每个图像/ anchor ID 编写一个可执行的 JS(((或者一个可执行的 JS 文件，适用于你所有的图像等)))所以如果你有 9 个不同的，写一个函数到文档正文部分中锚定图像占位符中的每个相应 ID。只要您链接到您的插件文件((CSS 和 JS 文件))就应该没问题。如果你愿意，你可以从 onedrive 或 dropbox 托管一个图像文件......你只需要替换文件所在的链接路径即可使其工作......这似乎是用勺子喂的等等，但它可能会帮助其他人之后..
毕竟这只是使用其他人代码的指南，对吧？ ;-)
关于jquery - 我想让 Fancybox 在我的 div 上工作——我需要编辑 html 吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31127394/