Javascript and jQuery (Fancybox) question
- by songdogtech
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'
});
