Slide Deck and Llightbox++

[metallifan15]

Hello,

I'm having a great deal of difficulty in getting the Javascript (jQuery) and such to work together. I am working on a website where all sections of the page are loaded by PHP include files. There is no trouble within those, but there is between the JavaScript for the Slide Deck and Lightbox++.

I have the code in the index page header setup like so:

<link href="style/main.css" rel="stylesheet" type="text/css" />
<link href="style/slidedeck.skin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/slidedeck.jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            jQuery(function() {
                jQuery('ul.nav a').bind('click',function(event){
                    var $anchor = jQuery(this);
                    
                    $('html, body').stop().animate({
                        scrollTop: jQuery(anchor.attr('href')).offset().top
                    }, 1500,'easeInOutExpo');
                    /*
                    if you don't want to use the easing effects:
                    $('html, body').stop().animate({
                        scrollTop: jQuery($anchor.attr('href')).offset().top
                    }, 1000);
                    */
                    event.preventDefault();
                });
            });
        </script>
        
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox++.js" type="text/javascript"></script>
<link href="style/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">

All the PHP pages load fine, but the slide deck is broken (see attached really-broken.jpg)

If I move all the Lightbox related CSS and JS to a different folder and move them into the same location as the PHP page which I am using the lightbox on the result is significantly better. (see attached much-improved.jpg), but the CSS and JS don't quite work right. The overlay doesn't have it's opacity and the white border, the close and load buttons are not there.

Inside the portfolio php page I have the lightbox scripts:

      
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox++.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" >

on the main index where all the php pages are "included" I have the jQuery and slide deck scripts:

<link href="style/slidedeck.skin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/slidedeck.jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            jQuery(function() {
                jQuery('ul.nav a').bind('click',function(event){
                    var $anchor = jQuery(this);
                    
                    $('html, body').stop().animate({
                        scrollTop: jQuery(anchor.attr('href')).offset().top
                    }, 1500,'easeInOutExpo');
                    /*
                    if you don't want to use the easing effects:
                    $('html, body').stop().animate({
                        scrollTop: jQuery($anchor.attr('href')).offset().top
                    }, 1000);
                    */
                    event.preventDefault();
                });
            });
        </script>

I am a designer by trade so JS is not my forte. I could really use some help in getting these two to work together. IF they can't I need to find some way to have the lightbox effect without using a separate JS file which can cause conflicts. Any help is sincerely appreciated!

Thanks!

[007Julien]

See this page : Using jQuery with Other Libraries

[metallifan15]

That is not working, and I have even switched to using the SLimbox2 which runs off my jQuery library. and i still do not get any images to show and I have checked my image paths and they are all good. Any other thoughts?