www.webdeveloper.com
Results 1 to 3 of 3

Thread: Slide Deck and Llightbox++

  1. #1
    Join Date
    Apr 2007
    Location
    Minnesota
    Posts
    17

    Slide Deck and Llightbox++

    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:

    Code:
    <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:
    Code:
          
    <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:

    Code:
    <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!
    Attached Images Attached Images

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,277

  3. #3
    Join Date
    Apr 2007
    Location
    Minnesota
    Posts
    17
    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?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles