1

我现在正在尝试几个小时以使 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="fancybox photogallery" 以及 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>

有任何想法吗？提前致谢！

菲利普

4

1 回答 1

3

我发现您的尝试存在一些问题，但 $('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没有图像扩展名。您可以传递 type: 'image' 以便它知道它们是图像。Fancybox 可能不知道如何处理它们，因为它们是无扩展的。使用 type:'image' 更新了 config/fiddle

于 2013-07-19T05:51:01.430 回答