Trying to add jquery slider to my page but it breaks my images?
hi everybody. first post long time user of adobe products. first time ever doing jquery slider in dreamweaver , breaks images whenever add site. have tried several different sliders nivo 1 installed. problem of images moving around , getting big white gaps between them. problem of not being able add text page after put in slider code. trying put slider in have paragraph of text under slider once slider code put in html unable add or move text. not sure going on there.
i uploaded 2 test pages, 1 without slider installed , 1 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 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 example of caption" />
<img src="demo/images/toystory.jpg" alt="" />
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>this</strong> example of <em>html</em> caption <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 web slices -->
</body>
</html>
i interested in learning how install these , make them work without breaking page , have watched many tutorials still can't figure out what's missing.
does know did wrong?
my guess thast using table structure layout, sliced images.
and when insert slideshow, breaking table.
if table structure generated graphics program, fragile.
you have better results letting dw structure layout css positioned div's.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment