Problem with fancybox and joomla
409 views
Skip to first unread message
ivoalves design
Feb 7, 2011, 1:13:37 PM2/7/11
to fancybox
Hello people,
I'm trying to use fancybox on a joomla site.
I've read all of the documentation on the site, and i've try to use
fancybox in a single page, there's no problem, but, when i use it on
joomla, doesn't work... the image opens on a new window.
I've check the paths and everything its Ok, i use the httpfox and i
can see that everything is loading, so i cant find the problem :S
Thank you,
I'm trying to use fancybox on a joomla site.
I've read all of the documentation on the site, and i've try to use
fancybox in a single page, there's no problem, but, when i use it on
joomla, doesn't work... the image opens on a new window.
I've check the paths and everything its Ok, i use the httpfox and i
can see that everything is loading, so i cant find the problem :S
Thank you,
Viper
Feb 7, 2011, 1:35:17 PM2/7/11
to fancybox
Check again Firefox console. If no errrors found, please provide part
of you code from page or URL.
Remember Joomla uses Mootools JS framework that conflict with jQuery
cause both uses $ object. In latest J releases this problem was fixed.
But in some templates not.
Try to use noconflict or replace all Mootols calls from $ to
document.id
of you code from page or URL.
Remember Joomla uses Mootools JS framework that conflict with jQuery
cause both uses $ object. In latest J releases this problem was fixed.
But in some templates not.
Try to use noconflict or replace all Mootols calls from $ to
document.id
ivoalves design
Feb 7, 2011, 1:38:24 PM2/7/11
to fancybox
Hello,
i didin't know about the mootols... how can i fix it? maybe the
problem is there.
i didin't know about the mootols... how can i fix it? maybe the
problem is there.
Viper
Feb 7, 2011, 2:42:18 PM2/7/11
to fancybox
Right place to start at this page http://api.jquery.com/jQuery.noConflict/
And http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/
In J 1.5/1.6 component JS libraries include before core J libreries
like mootools. Just create file with content
var $ = document.id;
and call it after jQuery library.
And http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/
In J 1.5/1.6 component JS libraries include before core J libreries
like mootools. Just create file with content
var $ = document.id;
and call it after jQuery library.
ivoalves design
Feb 8, 2011, 7:42:26 AM2/8/11
to fancybox
Thanks for the response, i'm not a webdeveloper, only a freelance
designer, can you help me with the file? what name shoul i give it? i
just new to call it like a normal external script file?
On Feb 7, 7:42 pm, Viper <goodladyb...@gmail.com> wrote:
> Right place to start at this pagehttp://api.jquery.com/jQuery.noConflict/
> Andhttp://mootools.net/blog/2009/06/22/the-dollar-safe-mode/
designer, can you help me with the file? what name shoul i give it? i
just new to call it like a normal external script file?
On Feb 7, 7:42 pm, Viper <goodladyb...@gmail.com> wrote:
> Right place to start at this pagehttp://api.jquery.com/jQuery.noConflict/
Viper
Feb 8, 2011, 8:06:00 AM2/8/11
to fancybox
Yes. Save it as noconflict.js (in example), and just write down
var $ = document.id;
And now call this file
<script src="path_to_file/noconflict.js" type="text/javascript"></
script>
var $ = document.id;
And now call this file
<script src="path_to_file/noconflict.js" type="text/javascript"></
script>
ivoalves design
Feb 8, 2011, 8:41:52 AM2/8/11
to fancybox
Hello,
Still the same problem...
Witch part of code can i past here to help get to the solution?
Still the same problem...
Witch part of code can i past here to help get to the solution?
Viper
Feb 8, 2011, 10:25:00 AM2/8/11
to fancybox
Provide the code between <head></head> tags
ivoalves design
Feb 8, 2011, 10:35:26 AM2/8/11
to fancybox
Ok
_________________________________________________________________
<head>
<?php
if($this->countModules('right') == 0) $contentwidth = "100";
if($this->countModules('right') == 1) $contentwidth = "70";
if($this->countModules('banner') == 0) $bannerFlash = "off";
if($this->countModules('banner') == 1) $bannerFlash = "on";
?>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i+
+) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j+
+].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="templates/
tshirtsandall/jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="templates/tshirtsandall/
noconflict.js"></script>
<script type="text/javascript" src="templates/tshirtsandall/fancybox/
jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/
jquery.easing-1.3.pack.js"></script>
<script type="text/javascript">var addthis_config =
{"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/
addthis_widget.js#username=tshirtsandall"></script>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/
style/tshirtsandall.css" type="text/css" />
<link rel="stylesheet" href="templates/tshirtsandall/fancybox/
jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
</head>
<body onload="MM_preloadImages('templates/tshirtsandall/images/social/
social_facebook_on.jpg','templates/tshirtsandall/images/social/
social_email_on.jpg','templates/tshirtsandall/images/social/
social_twitter_on.jpg')">
___________________________________________________________
i put the body because of the onload.
_________________________________________________________________
<head>
<?php
if($this->countModules('right') == 0) $contentwidth = "100";
if($this->countModules('right') == 1) $contentwidth = "70";
if($this->countModules('banner') == 0) $bannerFlash = "off";
if($this->countModules('banner') == 1) $bannerFlash = "on";
?>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i+
+) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0;
i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j+
+].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="templates/
tshirtsandall/jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="templates/tshirtsandall/
noconflict.js"></script>
<script type="text/javascript" src="templates/tshirtsandall/fancybox/
jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/fancybox/
jquery.easing-1.3.pack.js"></script>
<script type="text/javascript">var addthis_config =
{"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/
addthis_widget.js#username=tshirtsandall"></script>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css"
type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css"
type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/
style/tshirtsandall.css" type="text/css" />
<link rel="stylesheet" href="templates/tshirtsandall/fancybox/
jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
</head>
<body onload="MM_preloadImages('templates/tshirtsandall/images/social/
social_facebook_on.jpg','templates/tshirtsandall/images/social/
social_email_on.jpg','templates/tshirtsandall/images/social/
social_twitter_on.jpg')">
___________________________________________________________
i put the body because of the onload.
Viper
Feb 9, 2011, 1:09:26 AM2/9/11
to fancybox
Hmm... Code looks good. Can you provide a link to you page? By email.
Reply all
Reply to author
Forward
0 new messages