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

发布于 2024-12-14 09:48:36 字数 692 浏览 4 评论 0原文

我有下面的自定义 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>"

原文

I have the custom mootools event below , would it be possible to open an image URL in Fancybox (jQuery) ? ::: And if its possible any idea how to go about this :::

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+''
            });
    }

Say I'd want to "call" HTML as example below instead of the milkbox.openWithFile :::

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酷炫老祖宗 2024-12-21 09:48:36

查看 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'
    });

looking at the api, the example goes:

    $.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'
    });

so you could try:

    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'
    });

回复收藏 0 原文

半衾梦 2024-12-21 09:48:36

这并不能解决我最初的问题，但可能仍然感兴趣

考虑到我缺乏 javascript (moo & j) ::: 我唯一的其他选择，我认为这不会是一个简单的解决方案是使用“moootools”插件&将它集成到 wP 主题的其余部分 ::: 我删除了 milkbox 插件 &将其替换为“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 & 创建了几个变量。 Y 配置 :::

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

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

我感谢@Dimitar 为解决此问题所做的努力，他的代码虽然不适用于我开始思考上述解决方案 :::

This does not solve my initial Question but might still be of interest

I did not think this was going to be an easy solution considering my lack of javascript (moo & j) ::: My only other option was to use a "moootools" plugin & integrate it into the rest of the wP theme ::: I removed the milkbox plugin & replaced it with "imagezoom"

I replaced this :::

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

With This bit of code :::

//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();

I then created a couple of variables in my functions.php file for the X & Y configuration :::

I also popped this into my custom scripts (.js) file , to set rel=lightbox on all image links :::

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

I thank @Dimitar for his effort in trying to resolve this, his code although not working for me got me thinking about above solution :::

回复收藏 0 原文

~没有更多了~