Skip navigation
kkeller2002
Currently Being Moderated

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

Aug 20, 2012 8:46 AM

Tags: #jquery #dreamweaver

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?

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points