Javascript and jQuery (Fancybox) question

Posted by songdogtech on Stack Overflow See other posts from Stack Overflow or by songdogtech
Published on 2011-01-08T16:53:24Z Indexed on 2011/01/12 22:53 UTC
Read the original article Hit count: 239

Filed under:
|
|

Javascript and jQuery (Fancybox) question

I'm using the Javascript function below for Twitter sharing (as well as other services; the function code is simplified to just Twitter for this question) that grabs the to-be-shared page URL and title and it is invoked in the link with onclick. That results in the Twitter share page loading in a pop up browser window, i.e.<img src="/images/twitter_16.png" onclick="share.tw()" />

In order to be consistent with other design aspects of the site, what I'd like to be able to do is have the Twitter share page open not in a standard browser window but in a Fancybox (jQuery) window.

Fancybox can load an external page in an iFrame when the img or href link contains a class (in this case class="iframe" ) in the link and in the document ready function in the header.

Right now, of course, when I give the iframe class to the link that also has the onclick share.tw(), I get two popups: one browser window popup with the correct Twitter share page loaded, and a Fancybox jQuery popup that shows a site 404.

How can I change the function to use Fancybox to present the Twitter share page? Is that a correct way to approach it? Or is there a better way, such as implementing the share function in jQuery, too?

Thanks...

Javascript share function:

var share = {
   tw:function(title,url) {
        this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
    },
    share:function(tpl,title,url) {
        if(!url) url = encodeURIComponent(window.location);
        if(!title) title = encodeURIComponent(document.title);

        tpl = tpl.replace("##URL##",url);
        tpl = tpl.replace("##TITLE##",title);

        window.open(tpl,"sharewindow"+tpl.substr(6,15),"width=640,height=480");
    }
};

It is invoked, i.e.: <img src="/images/twitter_16.png" onclick="share.tw()" />

Fancybox function, invoked by adding class="iframe" in the img or href link

$(".iframe").fancybox({
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery