Need Help With Pixelating Slide Show

[jswalters]

It must be my Web editor, (Namo) doing it because all I did was copy the files to my website. I've never had this kind of problem inserting java script before though. I suspect that when I make the corrections, it will do the same.
Jeff

[jscheuer1]

Use NotePad instead. But I think we can probably fix the code so that it doesn't do it again even in Namo. This type of commenting (though not technically required) can often work:

            <div id="fadeshow1"></div><script type="text/javascript">

/* <![CDATA[ */
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [500, 800], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["IMAG0119.jpg"],
		["IMAG0247.jpg"],
		["IMAG0304.jpg"],
		["IMAG0389.jpg"],
		["IMAG120.jpg"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: ""
})
/* ]]> */

</script>

Or possibly (note I've removed the <-- from within the code for this one, because that could be confusing to the editor when using this type of commenting):

            <div id="fadeshow1"></div><script type="text/javascript">
//<!-- 
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [500, 800], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["IMAG0119.jpg"],
		["IMAG0247.jpg"],
		["IMAG0304.jpg"],
		["IMAG0389.jpg"],
		["IMAG120.jpg"] // no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: ""
})
 -->
</script>

But if you were to use the HTML 5 DOCTYPE and validate the HTML markup, it should be fine without any of that. And, even using those comments might not make up for not validating the HTML markup. But one or the other type comment might be a quick fix.

You do know what I mean when I say valid HTML markup, right?

[jswalters]

HI John,
I really don't. As I said in my first post, I am not a coder. I use a WYSIWYG editor and have in the past inserted some Java with no problem. That's about it.
Jeff

[jscheuer1]

OK, it just occurred to me that putting the init in the head (as the instructions for this script say) might also solve the problem. You had it originally in the body, and that can work too, so I left it like that so as not to confuse you. But putting it in the body gives more of a chance that invalid code can trip it up. Still, generally, whatever you do, it's a good idea to have valid HTML code. The basic idea of valid code (there are fine points that often don't matter, but sometimes can be crucial) is that for every opening tag - say <div> there is a corresponding closing tag </div> in that case. No more, no less. When that rule is violated, most browsers error correct for you if they can use their algorithms to guess what you mean. But an editor like Namo often will try to take matters into its own hands, misinterpreting what's meant and 'correcting' it, sometimes making matters worse. Also important are nesting rules. For example, you cannot put one <a> tag inside another <a> tag. Another key element in valid HTML is the DOCTYPE. There are many to choose from. The latest, most versatile, and simplest in many ways is the HTML 5 DOCTYPE. A DOCTYPE is a declaration at the top of the page telling the browser what standards you intend to use in the rest of the page. Without a DOCTYPE, all browsers are in what's called Quirks Mode, where each individual browser has it's own set of rules as to how to view the rest of the document. That's what you currently have on the page we have been working on.

Anyways, if none of the three suggestions I gave in my last post worked, they were:

1) Using NotePad instead of Namo
2) Using the CDATA comment scheme
3) Using the HTML comment scheme

then we can try putting the init in the head (I've also thrown in an HTML 5 DOCTYPE - all working here):

<!DOCTYPE html>
<html>

<head>
<title>CBJ Home Page</title>
<meta name="generator" content="Namo WebEditor v5.0">
<meta name="author" content="Jeff Walters">
<meta name="classification" content="Home Page">
<meta name="description" content="Begining point for my site">
<meta name="keywords" content="Gifts, Birthdays, Wood, Wooden, Wood Turner, Pen, Bowls, Boxes, Artistic">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- optional touchswipe file to enable swipping to navigate slideshow -->
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>

<style>

#fadeshow1 .gallerylayer img{ /* make all images inside fadeshow1 scale to 100% of slideshow width */
width: 100%;
height: auto;
}

</style>

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

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [500, 800], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["IMAG0119.jpg"],
		["IMAG0247.jpg"],
		["IMAG0304.jpg"],
		["IMAG0389.jpg"],
		["IMAG120.jpg"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: ""
})

</script>
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table align="center" cellpadding="0" cellspacing="0" width="1233">
    <tr>
        <td width="167" height="105">
            <p>&nbsp;<img src="images/pens_030313/SL_Honduran_Rosewood_Gold%202%20(Small).jpg" width="156" height="86" border="0"></p>
        </td>
        <td width="1066" height="105" valign="middle"><p align="center"><span style="font-size:14pt;"><b><font color="maroon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;www.cbjeff.com <img src="images/buttons/cbj_html_smartbutton1.gif" namo_npi=":EmbededNPI1" align="middle" width="520" height="88" border="0"></font></b></span> 
            <span style="font-size:14pt;"><b><font color="maroon">www.jeffscottwalters.com</font></b></span></p>
        </td>
    </tr>
</table>
<table align="center" cellpadding="0" cellspacing="0" width="1232">
    <tr>
        <td width="167" height="381" align="center" valign="top">
            <p style="margin-top:0; margin-bottom:0;"><a href="index2.html"><img src="images/pictures/index_html_smartbutton1.gif" namo_npi=":EmbededNPI2" border="0"></a><a href="sale.html"><img src="images/pictures/index_html_smartbutton2.gif" namo_npi=":EmbededNPI3" border="0"></a></p>
            <p style="margin-top:0; margin-bottom:0;"><a href="gallery.html"><img src="images/pictures/index_html_smartbutton3.gif" namo_npi=":EmbededNPI4" border="0"></a><a href="about.html"><img src="images/pictures/index_html_smartbutton4.gif" namo_npi=":EmbededNPI5" border="0"></a><a href="mailto:jeff@jeffscottwalters.com"><img src="images/pictures/index_html_smartbutton5.gif" namo_npi=":EmbededNPI6" border="0"></a>&nbsp;</p>
        </td>
        <td width="1065" height="381" valign="top"><p align="center"><span style="font-size:18pt;"><b><font color="maroon">Welcome 
to my site and my world of Wood Turning</font></b></span></p>
            <div id="fadeshow1"></div></p>
        </td>
    </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p style="margin-top:0; margin-bottom:0;" align="center">&nbsp;</p>
</body>
</html>

One other thing we can try is to make the init an external script, but let's first see if any of these other suggestions work.

[styxlawyer]

Using an editor with syntax highlighting would show up these problems immediately. I would recommend Editplus and have been using it since it first appeared in 1998! A one-off licence for $35 for life can't be bad.