如何在移动版本中查看网站时禁用Wordpress功能?

时间:2012-12-12 08:36:13

标签: jquery wordpress gallery jquery-isotope

我有自定义图库短信,因为我在我的图库页面中使用了同位素。所以基本上,我有一个画廊页面,我只是将我的所有图像拖放到这里,并由dessandro进行同位素布局。另外,我点击时使用Fancybox作为我的灯箱,用于完整版本的图像。这些都在我创建的functions.php自定义库中。

看起来很不错,但是,在移动设备上,我想禁用这个功能,fancybox,因为在这么小的设备中有一个灯箱有点尴尬。

我的解决方案是,禁用我在functions.php中创建的自定义图库功能,以便wordpress的原生图库(在新的更新3.5中很酷)将生效,因此也会禁用同位素的fancybox。

如果用户点击移动版本上的图片,它将链接到attachment.php模板而不是fancybox,因为现在已禁用自定义功能。

一个很好的例子 http://thereason.us/

这个网站是wordpress,所以我知道它可能。有人有想法吗?

我的谢谢。

1 个答案:

答案 0 :(得分:0)

嗯,他们正在做的是他们正在检查屏幕宽度是否超​​过500像素,如果是,则他们打开灯箱,否则他们保持链接的默认操作并打开附件页面。

因此,我建议您更改功能,将data-attachment或其他属性添加到链接到图片的锚点,这些图片会将URL保存到附件页面。

然后在您的JS中,首先将点击事件绑定到您的灯箱链接,例如:

(function($){
    $(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").on('click', function(){
        if ( parseInt($(window).width()) < 500 ) {
            window.location.href = $(this).attr('data-attachment');
            return false;
        }
    });
    // Initialize Fancybox
    $(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").attr('rel','gallery').attr('class','fancybox').fancybox();
})(jQuery);

然后实例化灯箱。理论上,这应该在灯箱之前绑定你之前的功能,但我不是100%肯定。