Trouble getting 2 jquery plugins to work. (facebox and easySlider) [Archive]

Swordfish60423

01-25-2011, 02:43 AM

I am having trouble getting a modal to work with facebox. I have the easySlider working. I've spent 3 hours a day on this for the past week. I feel like the problem is in the document.ready function but google tells me it should be ok. Thanks.

<link href="../styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-image: url(../Images/pagebg3.png);
}
</style>
<link href="../facebox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="../facebox.js" type="text/javascript"></script>
<script src="../scripts/easySlider1.5.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
});
});

</script>
<script type="text/javascript">
$(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'loading.gif',
closeImage : 'closelabel.png'
})
})
</script>

</head>

<body>

<div id="outerwrapper">

<div id="slider">
<ul>
<li><img src="../Images/zslide1.png" width="920" height="244" align="left" /></li>
<li><img src="../Images/slide2.png" width="920" height="245" /></li>
<li><img src="../Images/Slide3.gif" width="920" height="245" /></li>
</ul>
</div>


<div class="example">
<h2>Divs</h2>

<p> <a href="#emergencyhelprequest" rel="facebox">View the 'info' div in the Facebox</a> </p>

<div class="code">
<h3>The Code</h3>

</div>
</div>

<div id="emergencyhelprequest" style="display:none;">
<p> Hey, I'm the 'info' div! </p>

</div>


</div>
</body>
</html>

venegal

01-25-2011, 07:30 AM

$(document).ready(function($) {

Lose the red $. If you put it there as function parameter without actually calling the function with any parameter, it will be null instead of the global jQuery object.

Sorry, that's not it; I just remembered that .ready() automatically passes the global jQuery object to the function you provide. You can get rid of it, though, since it's confusing and you're not using .noConflict() anyway.

It would be easier to see what the problem is if you showed this on a live site.