5 Replies Latest reply: Aug 20, 2012 9:35 AM by Nancy O. RSS

    Trying to add jquery slider to my page but it breaks my images?

    kkeller2002 Community Member

      Hi everybody. This is my first post but I am a long time user of Adobe products. This is my first time ever doing a jquery slider in Dreamweaver and it breaks my images whenever I add it to my site. I have tried several different sliders but Nivo was the only one that I could get installed. I get this problem of my images moving around and getting big white gaps between them. I also get another problem of not being able to add text to the page after I put in the slider code. What I am trying to do is put the slider in then have about a paragraph of text under the slider but once the slider code is put in the html I am unable to add or move text. Not sure what is going on there.

       

      I uploaded 2 test pages, one without the slider installed and one with it installed.

       

      http://kerrvilleair.com/before.html

       

      http://kerrvilleair.com/after.html

       

      <html>

      <head>

      <title>newheader</title>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


      <link rel="stylesheet" href="http://kerrvilleair.com/nivo-slider.css" type="text/css" media="screen" />

      <link rel="stylesheet" href="http://kerrvilleair.com/themes/default/default.css" type="text/css" media="screen" />

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

      <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>



      </head>

      <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

      <!-- Save for Web Slices (newheader.psd) -->

      <table id="Table_01" width="1294" height="1578" border="0" cellpadding="0" cellspacing="0">

      <tr>

      <td colspan="2" rowspan="14">

      <img src="images/kerrheader_01.gif" width="156" height="705" alt=""></td>

      <td colspan="13" rowspan="5">

      <img src="images/kerrheader_02.gif" width="358" height="131" alt=""></td>

      <td colspan="19">

      <img src="images/kerrheader_03.gif" width="779" height="2" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="2" alt=""></td>

      </tr>

      <tr>

      <td colspan="7" rowspan="2">

      <img src="images/kerrheader_04.gif" width="376" height="58" alt=""></td>

      <td colspan="3">

      <img src="images/kerrheader_05.gif" width="57" height="54" alt=""></td>

      <td rowspan="2">

      <img src="images/kerrheader_06.gif" width="30" height="58" alt=""></td>

      <td>

      <img src="images/kerrheader_07.gif" width="56" height="54" alt=""></td>

      <td colspan="2" rowspan="2">

      <img src="images/kerrheader_08.gif" width="29" height="58" alt=""></td>

      <td colspan="3">

      <img src="images/kerrheader_09.gif" width="61" height="54" alt=""></td>

      <td colspan="2" rowspan="2">

      <img src="images/kerrheader_10.gif" width="170" height="58" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="54" alt=""></td>

      </tr>

      <tr>

      <td colspan="3">

      <img src="images/kerrheader_11.gif" width="57" height="4" alt=""></td>

      <td>

      <img src="images/kerrheader_12.gif" width="56" height="4" alt=""></td>

      <td colspan="3">

      <img src="images/kerrheader_13.gif" width="61" height="4" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="4" alt=""></td>

      </tr>

      <tr>

      <td colspan="4" rowspan="7">

      <img src="images/kerrheader_14.gif" width="221" height="399" alt=""></td>

      <td colspan="2">

      <img src="images/aboutslice.gif" width="96" height="60" alt=""></td>

      <td colspan="3">

      <img src="images/serviceslice.gif" width="94" height="60" alt=""></td>

      <td colspan="4">

      <img src="images/contactusslice.gif" width="114" height="60" alt=""></td>

      <td colspan="5">

      <img src="images/reviewslice.gif" width="87" height="60" alt=""></td>

      <td rowspan="23">

      <img src="images/kerrheader_19.gif" width="167" height="1517" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="60" alt=""></td>

      </tr>

      <tr>

      <td colspan="14" rowspan="2">

      <img src="images/kerrheader_20.gif" width="391" height="125" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="11" alt=""></td>

      </tr>

      <tr>

      <td colspan="13" rowspan="5">

      <img src="images/kerrheader_21.gif" width="358" height="328" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="114" alt=""></td>

      </tr>

      <tr>

      <td colspan="4" rowspan="4">

      <img src="images/kerrheader_22.gif" width="157" height="214" alt=""></td>

      <td colspan="7">

      <img src="images/kerrheader_23.gif" width="211" height="49" alt=""></td>

      <td colspan="3" rowspan="4">

      <img src="images/kerrheader_24.gif" width="23" height="214" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="49" alt=""></td>

      </tr>

      <tr>

      <td colspan="7">

      <img src="images/kerrheader_25.gif" width="211" height="16" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="16" alt=""></td>

      </tr>

      <tr>

      <td colspan="7">

      <img src="images/kerrheader_26.gif" width="211" height="52" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="52" alt=""></td>

      </tr>

      <tr>

      <td colspan="7">

      <img src="images/kerrheader_27.gif" width="211" height="97" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="97" alt=""></td>

      </tr>

      <tr>

      <td colspan="9">

      <img src="images/kerrheader_28.gif" width="307" height="63" alt=""></td>

      <td colspan="21" rowspan="3">

      <img src="images/textslice.gif" width="660" height="232" alt=""></td>

      <td rowspan="16">

      <img src="images/kerrheader_30.gif" width="3" height="1118" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="63" alt=""></td>

      </tr>

      <tr>

      <td colspan="2" rowspan="3">

      <img src="images/kerrheader_31.gif" width="21" height="183" alt=""></td>

      <td colspan="5">

      <img src="images/kerrheader_32.gif" width="271" height="148" alt=""></td>

      <td colspan="2" rowspan="10">

      <img src="images/kerrheader_33.gif" width="15" height="606" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="148" alt=""></td>

      </tr>

      <tr>

      <td colspan="5" rowspan="2">

      <img src="images/kerrheader_34.gif" width="271" height="35" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="21" alt=""></td>

      </tr>

      <tr>

      <td rowspan="13">

      <img src="images/kerrheader_35.gif" width="1" height="886" alt=""></td>

      <td rowspan="8">

      <img src="images/kerrheader_36.jpg" width="24" height="437" alt=""></td>

      <td colspan="18" rowspan="6"><div class="slider-wrapper theme-default"">

          <div id="slider" class="nivoSlider">

              <img src="demo/images/nemo.jpg" alt="" />

              <a href="http://dev7studios.com"><img src="demo/images/walle.jpg" alt="" title="#htmlcaption" /></a>

              <img src="demo/images/up.jpg" alt="" title="This is an example of a caption" />

              <img src="demo/images/toystory.jpg" alt="" />

          </div>

      </div>

      <div id="htmlcaption" class="nivo-html-caption">

          <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.

      </div>


      <script type="text/javascript">

      $(window).load(function() {
          $('#slider').nivoSlider();
      });
      </script>

      </td>

      <td rowspan="13">

      <img src="images/kerrheader_38.gif" width="12" height="886" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="14" alt=""></td>

      </tr>

      <tr>

      <td rowspan="12">

      <img src="images/kerrheader_39.gif" width="100" height="872" alt=""></td>

      <td colspan="6">

      <img src="images/reviewslice-41.gif" width="193" height="110" alt=""></td>

      <td colspan="2" rowspan="2">

      <img src="images/kerrheader_41.gif" width="155" height="118" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="110" alt=""></td>

      </tr>

      <tr>

      <td colspan="6">

      <img src="images/kerrheader_42.gif" width="193" height="8" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="8" alt=""></td>

      </tr>

      <tr>

      <td colspan="4" rowspan="5">

      <img src="images/kerrheader_43.gif" width="81" height="305" alt=""></td>

      <td colspan="3">

      <img src="images/customerslice.gif" width="261" height="71" alt=""></td>

      <td rowspan="5">

      <img src="images/kerrheader_45.gif" width="6" height="305" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="71" alt=""></td>

      </tr>

      <tr>

      <td colspan="3">

      <img src="images/kerrheader_46.gif" width="261" height="33" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="33" alt=""></td>

      </tr>

      <tr>

      <td rowspan="3">

      <img src="images/kerrheader_47.gif" width="1" height="201" alt=""></td>

      <td colspan="2" rowspan="2">

      <img src="images/contactslice.gif" width="260" height="91" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="46" alt=""></td>

      </tr>

      <tr>

      <td colspan="18" rowspan="4">

      <img src="images/kerrheader_49.gif" width="623" height="528" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="45" alt=""></td>

      </tr>

      <tr>

      <td colspan="2">

      <img src="images/kerrheader_50.gif" width="260" height="110" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="110" alt=""></td>

      </tr>

      <tr>

      <td colspan="2" rowspan="5">

      <img src="images/kerrheader_51.gif" width="66" height="449" alt=""></td>

      <td colspan="7">

      <img src="images/satisfiedslice.jpg" width="294" height="308" alt=""></td>

      <td rowspan="5">

      <img src="images/kerrheader_53.gif" width="3" height="449" alt=""></td>

      <td rowspan="5">

      <img src="images/kerrheader_54.gif" width="24" height="449" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="308" alt=""></td>

      </tr>

      <tr>

      <td colspan="7" rowspan="4">

      <img src="images/kerrheader_55.gif" width="294" height="141" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="65" alt=""></td>

      </tr>

      <tr>

      <td colspan="3">

      <img src="images/kerrheader_56.gif" width="69" height="2" alt=""></td>

      <td rowspan="2">

      <img src="images/kerrheader_57.jpg" width="72" height="47" alt=""></td>

      <td rowspan="2">

      <img src="images/kerrheader_58.jpg" width="88" height="47" alt=""></td>

      <td colspan="2" rowspan="2">

      <img src="images/kerrheader_59.jpg" width="75" height="47" alt=""></td>

      <td colspan="11" rowspan="3">

      <img src="images/kerrheader_60.gif" width="319" height="76" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="2" alt=""></td>

      </tr>

      <tr>

      <td rowspan="2">

      <img src="images/kerrheader_61.gif" width="6" height="74" alt=""></td>

      <td colspan="2">

      <img src="images/kerrheader_62.jpg" width="63" height="45" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="45" alt=""></td>

      </tr>

      <tr>

      <td colspan="6">

      <img src="images/kerrheader_63.gif" width="298" height="29" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="29" alt=""></td>

      </tr>

      <tr>

      <td>

      <img src="images/spacer.gif" width="100" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="56" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="10" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="11" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="4" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="111" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="149" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="6" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="12" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="3" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="1" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="24" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="6" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="20" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="43" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="72" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="88" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="18" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="57" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="39" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="59" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="2" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="33" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="22" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="30" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="56" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="6" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="23" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="41" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="8" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="12" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="3" height="1" alt=""></td>

      <td>

      <img src="images/spacer.gif" width="167" height="1" alt=""></td>

      <td></td>

      </tr>

      </table>

      <!-- End Save for Web Slices -->

      </body>

      </html>

       

      I am very interested in learning how to install these and make them work without breaking my page and I have watched so many tutorials but I still can't figure out what's missing.

       

      Does anybody know what I did wrong?