Fancybox无法加载

Question

Not sure why my fancy box isn't working. 不知道为什么我的精美包装盒无法正常工作。 Hoping someone can help 希望有人可以帮助

HTML Code: HTML代码：

<div class ="homeimage">
   <a class ="fancybox" rel="group" href ="images\image9.jpg"><img src ="images\image9.jpg" alt ="Photo by Tom Harper"/></a>
 </div>

Import and JavaScript Code: 导入和JavaScript代码：

<head>
    <title>Tom Harper - Videographer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<!-- 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?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});

The folder which contains all the fancybox files is in the same directory as the webpage. 包含所有fancybox文件的文件夹与网页位于同一目录中。 All that happens when I click the image is that the image opens in a new page because of the <a> tags that are now reference the image. 当我单击图像时，发生的所有事情是由于<a>标记现在引用了图像，因此图像在新页面中打开。

Answer 1

First: Download the Fancybox plugin here 首先：在此处下载Fancybox插件

secondly: unzip fancybox plugin and implement into your header. 其次：解压缩fancybox插件并将其实现到标题中。 exp...: link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" "fancybox" is my unpacked plugin directory. exp ...：链接rel =“ stylesheet” href =“ fancybox / source / jquery.fancybox.css？v = 2.1.5” type =“ text / css” media =“ screen”“ fancybox”是我解压缩的插件目录。

thirdly: Follow this Documentation or just copy and paste HTML and JavaScript part. 第三：遵循本文档或仅复制并粘贴HTML和JavaScript部分。

and it will work. 它会工作。

 <script type="text/javascript"> $(document).ready(function() { $("#single_1").fancybox({ helpers: { title : { type : 'float' } } }); }); </script>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>Tom Harper - Videographer</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- Add jQuery library --> <!-- Add mousewheel plugin (this is optional) --> <!-- Add fancyBox --> <!-- Optionally add helpers - button, thumbnail and/or media --> </head> <script type="text/javascript"> $(document).ready(function() { $("#single_1").fancybox({ helpers: { title : { type : 'float' } } }); }); </script> <body> <a id="single_1" href="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_b.jpg" title="Bos 3 (p.vanhaastrecht)"> <img src="http://farm2.staticflickr.com/1661/24170619595_ca34ef74d9_m.jpg" alt="" /> </a> </body> </html>

Fancybox无法加载

问题描述

1 个解决方案

解决方案1
0 2016-01-25 13:26:42

Fancybox无法加载

问题描述

1 个解决方案

解决方案1 0 2016-01-25 13:26:42

解决方案1
0 2016-01-25 13:26:42