Trying to add jquery slider to my page but it breaks my images?
Aug 20, 2012 8:46 AM
Tags: none (add) #jquery #dreamweaverHi 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>
<img src="images/kerrheader_01.gif" width="156" height="705" alt=""></td>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<img src="images/kerrheader_59.jpg" width="75" height="47" alt=""></td>
<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?
