是否可以在mootools中使用自定义事件打开Fancybox

时间:2011-11-09 16:05:52

标签: jquery mootools fancybox

我在下面有自定义mootools事件,是否可以在Fancybox(jQuery)中打开图像URL? :::如果它可能有任何想法如何去做这个:::

events: {
    click: function() {
        var tubeObject = this.getParent().retrieve("tubeObject");
        var tubeObject = this.getParent().retrieve("tubeObject")
        var fullurl = tubeObject.full;

            milkbox.openWithFile({ 
                href:'http://localhost/square/wp-content/uploads/2011/10/34.jpg', 
                title:''+fullurl+''
            });
    }

假设我想以下面的方式“调用”HTML而不是milkbox.openWithFile :::

html: "<a class='fancybox' rel='fancybox' href='http://localhost/images/test.jpg' >View Image</a>"

2 个答案:

答案 0 :(得分:0)

看着api,例子是:

    $.fancybox({
        //'orig'            : $(this),
        'padding'       : 0,
        'href'          : 'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
        'title'         : 'Lorem ipsum dolor sit amet',
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });

所以你可以尝试:

    jQuery.fancybox({
        'orig'          : jQuery(this), // pass on the el
        'padding'       : 0,
        'href'          : this.get("href"), // get url
        'title'         : this.get("title") || "",
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });

答案 1 :(得分:0)

这不能解决我的初步问题,但可能仍有兴趣

考虑到我缺少javascript(moo&amp; j),我认为这不是一个简单的解决方案:::我唯一的另一个选择是使用“moootools”插件&amp;将它整合到wP主题的其余部分:::我删除了milkbox插件&amp;用“imagezoom”替换它

我替换了这个:::

milkbox.openWithFile({ 
    href:'http://localhost/square/wp-content/uploads/2011/10/34.jpg', 
    title:''+fullurl+''
});

使用这段代码:::

//http://bertramakers.com/moolabs/imagezoom.php
var imagezoom = new Imagezoom({
    image: fullurl,
    x: ydcoza_imagezoom_x, //custom global variables
    y: ydcoza_imagezoom_y,
    rel: ydcoza_lightbox
});
imagezoom.show();

然后我在我的functions.php文件中为X&amp;创建了一些变量。 Y配置:::

我还将其弹出到我的自定义脚本(.js)文件中,在所有图像链接上设置rel = lightbox :::

/***************************************************
        Add rel:'lightbox' to image links
 ***************************************************/
jQuery("a[rel!='ignore']").each(function() {
    this.rel += 'lightbox';
});

我感谢@Dimitar努力解决这个问题,他的代码虽然没有为我工作,但让我思考上面的解决方案:::