PDA

View Full Version : Multiple JS files


walkamongus
12-29-2009, 06:32 PM
Hi all, Im having some problems in my code. I want to run both thickbox (http://jquery.com/demo/thickbox/) and InnerFade (http://medienfreunde.com/lab/innerfade/) but I can't get them both to work. Apparently the "$" (call?) thing in the InnerFade is the culprit. I've tried placing <script>jQuery.noConflict();</script> after the jQuery in the html but it didnt work for me. Will I need to change all of the "$" to something else or is there an easier way around this?

Thanks for reading

emerald
12-29-2009, 07:55 PM
Just as a matter of interest...
did you know this?
While Thickbox had its day, it is not maintained any longer, so we recommend you use some alternatives.
from the site...

walkamongus
12-29-2009, 08:29 PM
oh wow, thanks. maybe ill use lightbox.

walkamongus
12-30-2009, 12:53 AM
I've got it now so lightbox works until i put the Innerfade code in the header, then the Innerfade overrides the lightbox. Anyone know how I can get them both to work?

Corrosive
12-30-2009, 07:38 AM
Just as a matter of interest...
did you know this?
from the site...

Shame that as Thickbox supported more than just images. You could put things like iframes in there. Did it give an alternative suggestion?

gentleone
12-30-2009, 10:47 AM
It's always difficult to combine two javascript libraries on one single page. Innerfade uses jQuery and Lightbox uses Prototype. This is asking for conflicts.
You have to make a choice in this. I know there is also a lightbox alternative that uses jQuery. Google for it and you'll find.

Corrosive
12-30-2009, 10:51 AM
I know there is also a lightbox alternative that uses jQuery. Google for it and you'll find.

Yes, it is Thickbox which, as emerald says, is no longer supported. Doesn't mean you can't use it of course! I agree though, it does help to pick a framework and stick to it. Thickbox is still a good option if you want other JQuery stuff plugged into your site.

gentleone
12-30-2009, 10:58 AM
I meant another one so I googled it for myself :)

This one:
http://leandrovieira.com/projects/jquery/lightbox/

And here is a list with more jQuery lightbox alternatives:
http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

Corrosive
12-30-2009, 11:05 AM
This one:
http://leandrovieira.com/projects/jquery/lightbox/



I like this one. The improved loading graphic and the way the next and prev labels are always visible make it a bit more user friendly. Nice one (bookmarked) :)

emerald
12-30-2009, 06:01 PM
Did it give an alternative suggestion?
Actually, yes. :lol::lol::lol:

...so we recommend you use some alternatives.
colorbox (http://colorpowered.com/colorbox/)
jQueryUI Dialog (http://jqueryui.com/demos/dialog/)
fancybox (http://fancybox.net/)
DOM window (http://swip.codylindley.com/DOMWindowDemo.html)
shadowbox.js (http://www.shadowbox-js.com/index.html)-The Management. 9.30.2009 (and Paul Irish (http://www.paulirish.com/))

walkamongus
12-31-2009, 03:30 AM
Thanks for the responses

It's always difficult to combine two javascript libraries on one single page. Innerfade uses jQuery and Lightbox uses Prototype. This is asking for conflicts.
You have to make a choice in this. I know there is also a lightbox alternative that uses jQuery. Google for it and you'll find.

Should thickbox work with Innerfade? I cant seem to get Innerfade to work with it or lightbox. Im not clear on how to manipulate the code (Im a total noob to javascript/jQuery)

gentleone
12-31-2009, 02:32 PM
Im not clear on how to manipulate the code

Can you provide us the code of your page how you have your JavaScript calls in the HEAD when Thickbox and Innerfade are not working together?

walkamongus
01-04-2010, 03:34 PM
Can you provide us the code of your page how you have your JavaScript calls in the HEAD when Thickbox and Innerfade are not working together?

Here's my html. Let me know if you want to see the other files.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<!-- lightbox -->

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<!-- End lightbox -->


<!-- header -->

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">

$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '279px'
});

$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '279px'
});

$('.fade').innerfade({
speed: 1000,
timeout: 6000,
type: 'random_start',
containerheight: '279px'
});

$('.adi').innerfade({
speed: 'slow',
timeout: 5000,
type: 'random',
containerheight: '279px'
});

});
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>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/fonts.css" type="text/css" media="all" />
<style type="text/css" media="screen, projection">
@import url(css/jq_fade.css);
</style>


</head>

<body>

<ul id="portfolio">
<li>
<img src="images/banner.jpg" />
</li>
<li>
<img src="images/banner2.jpg" />
</li>
<li>
<img src="images/banner3.jpg" />
</li>
<li>
<img src="images/banner4.jpg" />
</li>
<li>
<img src="images/banner5.jpg" />
</li>
</ul>

<a href="images/temps/org.jpg" rel="lightbox" title="my caption"><img style="border:1px dotted #999;" src="images/temps/thumbs/t_organic.jpg" /></a>

</body>
</html>

gentleone
01-04-2010, 08:26 PM
Like I mentioned earlier in this thread it's quite a hassle to get Prototype and jQuery working together. Both libraries use the $() function, but they behave differently which cause conflicts.

If you really want to use Lightbox and Innerfade on your page then on the following webpage you can find out how to, but like I said... it's a lot of hassle especially if you want to use more jQuery plugins on that page.

http://dev.jqueryui.com/wiki/PrototypeAndJQuery

My advice to you is to use the jQuery lightbox alternative. This will work for sure with Innerfade without any conflicts.

walkamongus
01-04-2010, 10:47 PM
Many thanks for the help. Im checking out some alternatives

walkamongus
01-07-2010, 05:09 PM
I figured it out... I used fancybox with
jQuery noConflict();

and its working great.

gentleone
01-08-2010, 02:24 PM
Cool! Happy coder now? :)

walkamongus
01-12-2010, 04:16 AM
Im:)

thanks again!