Question

我现在尝试使用FancyBox图像库几个小时，但图像文件却在浏览器而不是FancyBox图层中打开。我在网站上使用了另一个Fancybox元素并且工作正常。有人可以帮忙吗？

标题代码：

<link media="screen" href="jquery.fancybox.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.8.2.js">
<script type="text/javascript" src="jquery.hcsticky-min.js">
<script type="text/javascript" src="superfish.js">
<script type="text/javascript" src="jquery.flexslider-min.js">
<script src="jquery.fancybox.pack.js" type="text/javascript">

我尝试的只有一些事情：

$(document).ready(function() {
         // Photo Gallery
         $('a.photogallery').fancybox({
                   padding: 0,
                   overlayColor: '#000',
                   overlayOpacity: 0.45,
                   scrolling: 'no',
                   helpers : {
                        title : { type : 'inside' }
                   }
         });

});

$(document).ready(function() {
         // Photo Gallery
         $('photogallery').fancybox({
                   padding: 0,
                   overlayColor: '#000',
                   overlayOpacity: 0.45,
                   scrolling: 'no',
                   helpers : {
                        title : { type : 'inside' }
                   }
         });

});

$(document).ready(function() {
         // Photo Gallery
         $('a.photogallery').fancybox();

});

$(document).ready(function() {
         // Photo Gallery
         $('.photogallery').click(function() {
         $('photogallery').fancybox({
                   padding: 0,
                   overlayColor: '#000',
                   overlayOpacity: 0.45,
                   scrolling: 'no',
                   helpers : {
                        title : { type : 'inside' }
                   }
         });
         }
});

HTML图库（我也尝试过class =＆＃34; fancybox photogallery＆＃34;以及class和rel标签的不同值）：

<div class="photos">
            <a title="" href="/files/thumb/f66cf2bba997313/800/600" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/f66cf2bba997313/180/180/fit"></a>
            <a title="" href="/files/thumb/36d8b240686ea33/800/600" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/36d8b240686ea33/180/180/fit"></a>
            <a title="" href="/files/thumb/e0986f42bd03cf4/800/600" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/e0986f42bd03cf4/180/180/fit"></a>
            <a title="" href="/files/thumb/1160ee763726480/800/600" rel="photogallery" class="photogallery"><img alt="" src="/files/thumb/1160ee763726480/180/180/fit"></a>
</div>

另一个元素完美无缺：

         // Brochure Request Overlay
         $('.brochure-request').fancybox({
                   padding: 0,
                   width: 800,
                   height: 400,
                   overlayColor: '#000',
                   overlayOpacity: 0.45,
                   scrolling: 'no'
         });

<a class="brochure-request fancybox.iframe btn orange-btn" href="/en/brochures">Brochure</a>

有什么想法吗？提前谢谢！

菲利普

Answer 1

我看到你尝试的一些问题，但是$（'a.photogallery'）。fancybox（）;应该有用。

以下是我的工作：

$(function() {
    $('a.photogallery').fancybox({
                   type: 'image',
                   padding: 0,
                   scrolling: 'no',
                   helpers : {
                        overlay: {
                           css: {'background-color': '#000'},
                           opacity: 0.3
                        },
                        title : { type : 'inside' }
                   }
         });
});

小提琴： http://jsfiddle.net/fstreamz/2qcUs/1/

注意：我正在使用2.0.4作为小提琴中的资源。

我会检查你的js / css路径，并确保你所假设的一切都和控制台一样。然后确保您在href中的图像路径没有重定向到真实图像。

更新

它只是打击了我那些href没有图像扩展名。您可以传递类型：'image'，因此它知道它们是图像。 Fancybox可能不知道如何处理它们，因为它们是无扩展的。更新了配置/小提琴类型：'image'

Fancybox图库不起作用。有人可以帮忙吗？

1 个答案:

更新