1 Reply Latest reply: May 23, 2013 12:27 PM by Nancy O. RSS

    order of javascript jquery declarations matters?

    westwm Community Member

      hi guys. trying to understand this whole jquery/javascript methodology but getting stumped.

       

      i'm using

       

      ddsmoothmenu for a horizontal menu

      http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm

       

      prettyPhoto lightbox for photo galleries

      http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

       

      cycle plugin to display a slideshow on every page

      http://jquery.malsup.com/cycle/

       

      the declaration section of the webpage for the scripts are in this order:

       

      <!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>

      ...

       

      <!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">

      ...

      <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

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

      /***********************************************

      * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

      * This notice MUST stay intact for legal use

      * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

      ***********************************************/

      </script>

      <script type="text/javascript">

      ddsmoothmenu.init({

          mainmenuid: "smoothmenu1", //menu DIV id

          orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"

          classname: 'ddsmoothmenu', //class added to menu's outer DIV

          //customtheme: ["#1c5a80", "#18374a"],

          contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]

      })

      </script>

       

      /***********************************************

      /*lighbox gallery

      ***********************************************/

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>

      <!--script src="js/jquery.lint.js" type="text/javascript" charset="utf-8"></script-->

      <link rel="stylesheet" href="../prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />

      <script src="../prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

      <style type="text/css" media="screen">

      * { margin: 0; padding: 0; }           

      body {

      background: #282828;

      font: 62.5%/1.2 Arial, Verdana, Sans-Serif;

      padding: 0 20px;

      }

      h1 { font-family: Georgia; font-style: italic; margin-bottom: 10px; }

      h2 {

          font-family: Georgia;

          font-style: italic;

          margin: 25px 0 5px 0;

      }

      p { font-size: 1.2em; }

      ul li { display: inline; }

      .wide {

          border-bottom: 1px #000 solid;

          width: 4000px;

      }

      .fleft { float: left; margin: 0 20px 0 0; }

      .cboth { clear: both; }

      #main {

              background: #fff;

              margin: 0 auto;

              padding: 30px;

              width: 1000px;

              }

      </style>

       

      /***********************************************

      /*cycle slideshow

      ***********************************************/

      <!-- include jQuery library -->

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

      <!-- include Cycle plugin -->

      <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

      <script type="text/javascript">

      $(document).ready(function() {

          $('.slideshow').cycle({

              fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

          });

      });

      </script>

       

      </head>

       

      in the body, ddsmoothmenu is called, then slideshow then lighbox gallery.

      the 1st two scripts work but then the lightbox gallery doesnt work properly (clicked on images dont spawn into a nice lightbox, instead the full image is just displayed on a blank webpage)

       

      if i simply change the order of the script definitions in <head> section (without changing anything else in the body ) to

       

      <head>

       

      /***********************************************

      * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

      ***********************************************/

      /***********************************************

      /*cycle slideshow

      ***********************************************/

      /***********************************************

      /*lighbox gallery

      ***********************************************/

      </head>

       

      then smooth menu works, cycle slideshow does not, but lightbox gallery does start working!

       

      what is conflicting with these last two scripts?

      also lightbox gallery script seems to really slow up IE8 responsiveness when testing. is this script buggy? hence i should use some other script for galler functions?

       

      thanks for any help, this is very frustrating.