如何在某些图像上关闭 FancyBox答案

【问题标题】：How to turn off FancyBox on certain images如何在某些图像上关闭 FancyBox
【发布时间】：2011-03-19 20:06:50
【问题描述】：

谁能帮我关闭某些图片上的 FancyBox？我在这里尝试了一百万种不同的选择，但没有取得太大进展。我正在处理的图像位于 WowSlider 横幅中：http://www.freemanfoxx.com。正如您将看到的那样，问题是某些图像没有href 位置，并且当单击它们时，花哨的框正在加载错误页面。如果我们可以动态更改类或做其他事情来阻止fancybox 加载，那将是一个奇迹。

谢谢！！！！

图像是通过 PHP 动态加载的：

if (empty($descr)){
echo "<a href='#'>";}

else {
echo "<a rel=group1 href=";
    echo $descr;
    echo " target=_blank>"; }
?><img src="<?php echo $wpimage[0]; ?>" width="<?php echo $wpimage[1]; ?>" height="<?php echo $wpimage[2]; ?>" alt="" title="" id="wows<?php echo $image->ID; ?>">
<?php
if (empty($descr)){
echo "</a>";}

else {
echo "</a>";}

FancyBox 加载基于：

    $("a.wow-fancy").fancybox({
    'hideOnContentClick': true,
    'width': 895,
    'height': 600,
    'type': 'iframe'
});

“cs-wowslider-images-new”类通过 javascript 通过此文件添加到图像中：http://freemanfoxxrealty.com/wp-content/themes/freemanfoxx/js/2wows-squares.js

更新

我想我可以通过动态删除一个类来实现这一点，但它似乎不起作用..有什么想法吗？

    if(("a.wow-fancy").attr('href') = "#"){
    $(this).removeClass("wow-fancy");
    alert('hi');
}

【问题讨论】：

我相信= 应该是==，并且该代码应该在 wowslider 完成添加其各自的类之后运行。您还需要遍历所有a.wow-fancys，例如$.each('a.wow-fancy') 不确定您在哪里添加此if 语句。

标签： jquery fancybox

【解决方案1】：

一种选择是：

如果$descr 为空（如果这对您有用），请将PHP 更改为根本不包含href 标记。那么：

$('a[href].cs-wowslider-images-new').fancybox({...

有点像这样： http://jsfiddle.net/q9Tpd/

【讨论】：

【解决方案2】：

如果您能够编辑 html，您可以随时为您不想使用 fancybox 的图像添加一个类名并使用选择器：

    $("a.cs-wowslider-images-new:not('.noFancyBoxOnThisClassName')").fancybox({
    'hideOnContentClick': true,
    'width': 895,
    'height': 600,
    'type': 'iframe'
});

已编辑以响应 OP 的问题编辑。

要测试href 是否仅仅是'#'，如果是，则删除wow-fancy 类：

$('a.wow-fancy').each(
    function(){
        if (this.href == '#') {
            $(this).removeClass('wow-fancy');
        }
    });

【讨论】：

类是动态添加的。如果像我上面列出的那样根据 HREF 属性动态更改类呢？我试过了，但它不起作用..也许我的代码有错误？你怎么看，大卫？谢谢。

【解决方案3】：

在我的情况下：

$('.content img')
  .not('[hidden]')
  .not('.group-picture img, .post-gallery img')
  .not('.no-fancybox')
  .each(function () {
    var $image = $(this);
    var imageTitle = $image.attr('title');
    var $imageWrapLink = $image.parent('a');

    if ($imageWrapLink.size() < 1) {
        var imageLink = ($image.attr('data-original')) ? this.getAttribute('data-original') : this.getAttribute('src');
      $imageWrapLink = $image.wrap('<a href="' + imageLink + '"></a>').parent('a');
    }

    $imageWrapLink.addClass('fancybox fancybox.image');
    $imageWrapLink.attr('rel', 'group');

    if (imageTitle) {
      $imageWrapLink.append('<p class="image-caption">' + imageTitle + '</p>');

      //make sure img title tag will show correctly in fancybox
      $imageWrapLink.attr('title', imageTitle);
    }
  });

$('.fancybox').fancybox({
  helpers: {
    overlay: {
      locked: false
    }
  }
});

只需添加.not('.no-fancybox')，然后将no-fancybox 类添加到不需要fancybox 的<img> 标记即可。

其实这段代码来自Hexo博客主题NexT(themes/next/source/js/src/utils.js)

【讨论】：